Vue-Setup

一、setup概述

小小提示：vue3中可以写多个根标签。

 Person.vue中内容

知识点总结：

       1、vue2的选项式API可以和vue3的组合式API一块使用。

       2、vue3中不能在setup函数中使用this关键字，在 vue3中的setup函数中，this是undefined。

       3、在setup中定义数据、方法，得通过return把这些数据和方法返回出去。

       4、在setup中直接定义的数据，不是响应式的。

       5、return{name:name,age:age} 如果是这样的写法，可以简写 return{name,age}。

       6、setup函数 比 beforeCreate函数 还要优先。

setup其他知识点： 

data中能够读取setup中的数据

setup中不能读取data中的数据

setup 比 data执行的要早

            // setup的返回值也可以是一个渲染函数。
            // return function(){
            //     return '哈哈哈哈'
            // }
            // 简写形式
            return ()=> '哈哈'  

 效果：直接返回页面，直接渲染，和 template 没什么关系了。

二、setup的语法糖 

如果不借助插件的话，这里得有两个

安装插件合并以上的两个标签

在终端输入以下的命令：

在vite.config.ts文件中进行配置 

重启项目：

此时就可以这样写： 

效果，组件的名字可以自己定义。

总结：

       如果不借助插件的话，需要使用两个script 标签，并且相当于 setup函数的script标签中，得写上setup和lang="ts"。而安装好插件之后，可以只定义一个script标签，在这一个script 标签中，通过name="xxx"，来定义组件的名字。 

---

power by 尚硅谷