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>
-
-