Vue3 setup语法糖
- 理解：Vue3.0中一个新的配置向，值为一个函数
- setup是所有Composition API（组合API） ”表演的舞台“
- 组件中所有用到的:数据、方法等等，均要配置在setup中
- setup函数的两种返回值：
- 若返回一个对象，则对象中的数据、方法、在模板中均可直接使用（重点）
1、setup（） 这个函数内部的变量/函数是局部的
2、这个函数的返回值，可以被当前组件的任意地方使用
3、这个函数内部不要使用this来操作组件数据
4、setup在组件加载期间只有运行一次，从创建到销毁只运行一次
setup 函数的语法糖
setup属性，会让打包工具打包时，直接帮我们把setup函数内部声明的变量/函数 return，然后组件就可以用了
<script setup> </script>
<template><div class="home"><h1>显示vue3.0的数据和方法</h1><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><button @click="sayName()">点击测试vue3.0的方法</button></div>
</template><script>export default {setup() {// 现在暂时还不考虑响应式数据的问题// 数据 let name = "李国栋";let age = 18;// 方法let sayName = function () {console.log(`我的名字是${name},我的年龄是${age}`);}return {name, age, sayName}}}
</script>若返回一个渲染函数，则可以自定义渲染内容（了解）
//页面中会显示一个h1标签,标签的内容是"vue3返回渲染函数"
<script>
import {h} from 'vue'
export default {setup() {// 返回一个渲染函数// h相当于document.CreateElement()return ()=>{return h("h1","vue3返回渲染函数")}}
}
</script>注意点
- 尽量不要和Vue2.x配置混用
- Vue2.x配置（data，methods，computed......）中可以访问setup中的属性，方法
- 但在setup中不能访问到Vue2.x配置(data，methods，computed......)
- 如有重名，setup优先
- setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板看不到return对象中的属性