Vue3学习-分析工程结构、初识setup
Vue3高级全套教程合集： Vue2基础全套教程合集： Vue2高级全套教程合集：
一、分析工程结构
Vue3.0与Vue2.0的项目结构一致，
├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ │── main.js: 入口文件 ├── .gitignore: git版本管制忽略的配置 ├── babel.config.js: babel的配置文件 ├── package.json: 应用包配置文件 ├── README.md: 应用描述文件 ├── package-lock.json：包版本控制文件
二、初识setup
- 理解：Vue3.0中一个新的配置项，值为一个函数。
- setup是所有Composition API（组合API）“ 表演的舞台 ”。
- 组件中所用到的：数据、方法等等，均要配置在setup中。
- setup函数的两种返回值： 若返回一个渲染函数：则可以自定义渲染内容。（了解）
- 注意点： 尽量不要与Vue2.x配置混用 Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。 但在setup中不能访问到Vue2.x配置（data、methos、computed…）。 如果有重名, setup优先。 setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合） 具体编码： 不考虑响应式，测试setup的功能。 <template> <h1>一个人的信息</h1> <h2>姓名：{ { name}}</h2> <h2>年龄：{ { age}}</h2> <h2>性别：{ { sex}}</h2> <h2>a的值是：{ { a}}</h2> <button @click="sayHello">说话(Vue3所配置的——sayHello)</button> <br> <br> <button @click="test2">测试一下在Vue3的setup配置中去读取Vue2中的数据、方法</button> </template> <script> // import {h} from vue export default { name: App, //此处只是测试一下setup，暂时不考虑响应式的问题。 setup(){ //数据 - 此时这样定义的数据是没有响应式的。 let name = 张三 let age = 18 let a = 200 //方法 function sayHello(){ alert(`我叫${ name}，我${ age}岁了，你好啊！`) } function test2(){ console.log(name) console.log(age) console.log(sayHello) console.log(this.sex) console.log(this.sayWelcome) } //返回一个对象（常用） return { name, age, sayHello, test2, a } //返回一个函数（渲染函数） // return ()=> h(h1,尚硅谷) } } </script>
setup的两个注意点
- setup执行的时机 在beforeCreate之前执行，并且setup中的this是undefined。 具体编码： <script> export default { name: Demo, props:[msg,school], emits:[hello], beforeCreate() { console.log("---beforeCreate---"); }, setup(props,context){ console.log("---setup---","this指向为：",this); } } </script> 运行结果：
- setup的参数 props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。 context：上下文对象 attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。 slots: 收到的插槽内容, 相当于 this.$slots。 emit: 分发自定义事件的函数, 相当于 this.$emit。 具体编码： 此时无需在意该处的reactive，看不懂没事，重点注意，setup身上可以接收两个参数 props 和 context <template> <h1>一个人的信息</h1> <h2>姓名：{ { person.name}}</h2> <h2>年龄：{ { person.age}}</h2> <button @click="test">测试触发一下Demo组件的Hello事件</button> </template> <script> import { reactive} from vue export default { name: Demo, props:[msg,school], emits:[hello], setup(props,context){ console.log(---setup---,context) //数据 let person = reactive({ name:张三, age:18 }) //方法 function test(){ context.emit(hello,666) } //返回一个对象（常用） return { person, test } } } </script>
