1.SetUp
| https://cn.vuejs.org/api/composition-api-setup.html#basic-usage setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API (组合式)“表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。 特点如下： setup函数返回的对象中的内容，可直接在模板中使用。 setup中访问this是undefined。 setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。 |
代码演示(两种方式)
| <template> <div> <h2>姓名：{{name}}</h2> <button @click="showName">显示名字</button> </div> </template> <script lang="ts"> export default { setup(){ // 数据，原来写在data中 let name = '张三' // 方法，原来写在methods中 function showName(){ console.log(name) } //返回值： // 1.返回一个对象，对象中的内容，模板中可以直接使用 return {name,showName} //2.返回一个函数，自定义渲染的内容 return ()=>‘今天天气真好’ } } </script> |
setup 的返回值
1.若返回一个对象：则对象中的属性、方法等，在模板中均可以直接使用（重点关注）。
2.若返回一个函数：则可以自定义渲染内容，代码如下：
| setup(){ return ()=>'你好啊！' } |
setup 语法糖
setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去，代码如下：
| <template> <div> <h2>姓名：{{name}}</h2> <button @click="showName">显示名字</button> <button @click="changeName">修改名字</button> </div> </template> <!-- 下面的写法是setup语法糖 --> <script setup lang="ts"> console.log(this) //undefined // 数据 let name = '张三' // 显示姓名方法 function showName(){ console.log(name) } //修改姓名方法 function changeName(){ name+='~' console.log(name) //数据进行修改，但是没有动态渲染到页面 }
</script> |
