一、拉开序幕的 setup
1. setup 的理解
- setup 是 Vue3 中一个新的配置项，值为一个函数。
- setup 是所有 Composition API（组合API）“表演的舞台”
- 组件中所用到的：数据、方法等，都要配置在 setup 中
2. setup 函数的两种返回值
- 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（
重点）
<template> <h2>一个人的信息</h2> <h3>姓名：{{ name }}</h3> <h3>年龄：{{ age }}</h3> <button @click="sayHello">说话</button> </template> <script> export default { name: "App", // 此处只是测试一下setup，暂时不考虑响应式 setup() { // 数据 let name = "张三"; let age = 18; // 方法 function sayHello() { alert(`我是${name}，我${age}岁了`); } // 返回一个对象（常用） return { name, age, sayHello, }; }, };
显示效果如下：
- 若返回一个渲染函数：则可以自定义渲染内容。（了解）
<template> <h2></h2> </template> <script> export default { name: "App", setup() { return () => h('h2', 'I am studying Vue3.') }, };
显示效果如下：
3. 注意点
- Vue 3 不要与 Vue2.x 配置混用
- setup 不能是一个 async 函数，因为返回值不再是一个return 对象，而是 promise，模板看不到 return 对象中的属性
二、ref 函数
1. 作用
定义一个 响应式 的数据
2. 语法
const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象（reference对象，简称 ref 对象）
- JS中操作数据：xxx.value
- 模板中读取数据：不需要.value，直接 <div>{{xxx}}<div>
3. 备注
- 接收的数据可以是：基本类型、也可以是对象类型
- 基本类型的数据：响应式依然是靠 Object.defineProperty() 的 get 和 set 完成的
- 对象类型的数据：内部 “求助” 了 Vue3.0 中的一个新函数—— reactive函数
4. 实例
- 引入 ref，用于响应式
- setup 里面的属性用 ref 包裹成响应式数据
- 基本类型的数据使用 .value 来改变
- 对象类型的数据使用 .value.xxx 来改变
<template> <h2>一个人的信息</h2> <h3>姓名：{{ name }}</h3> <h3>年龄：{{ age }}</h3> <h4>工作种类：{{ job.type }}</h4> <h4>薪资：{{ job.salary }}</h4> <button @click="changeInfo">修改人的信息</button> </template> <script> import { ref } from "vue"; export default { name: "App", setup() { let name = ref("张三"); let age = ref(18); let job = ref({ type: "前端工程师", salary: "30K", }); function changeInfo() { name.value = "李四"; age.value = 28; job.value.type = "算法工程师"; job.value.salary = "60K"; } // 返回一个对象（常用） return { name, age, job, changeInfo, }; }, }; </script>
改变前的效果：
改变前后的效果：
三、reactive 函数
1. 作用
定义一个 对象类型 的响应式数据（基本类型使用 ref 函数）
2. 语法
接收一个对象（或数组），返回一个代理对象（Proxy 的实例对象）
const 代理对象 = reactive(源对象)
3. 备注
- reactive 定义的响应式数据是 “深层次的”
- 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作
4. 实例
- 把所有的属性放在 person 对象中
- 通过 reactive 把对象交出去
<template> <div> <h3>姓名：{{ person.name }}</h3> <h3>年龄：{{ person.age }}</h3> <h3>工作种类：{{ person.job.type }}</h3> <h3>爱好：{{ person.hobby }}</h3> <h3>薪资：{{ person.job.salary }}</h3> <h3>测试C：{{ person.job.a.b.c }}</h3> <button @click="changeInfo">修改人的信息</button> </div> </template> <script> import { reactive } from "vue"; export default { name: "App", setup() { let person = reactive({ name: "张三", age: 18, job: { type: "前端工程师", salary: "30K", a: { b: { c: 99, }, }, }, hobby: ["抽烟", "喝酒", "烫头"], }); function changeInfo() { (person.name = "李四"), (person.age = 28), (person.job.type = "算法工程师"), (person.job.salary = "60K"), (person.job.a.b.c = 200), (person.hobby[0] = "敲代码"); } return { person, changeInfo, }; }, }; </script>
修改前：
修改后：
四、Vue3.0 的响应式
1. 实现原理
- 通过 Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。
- 通过 Reflect（反射）：对源对象的属性进行操作。
2. 响应式原理
- get 用于读取、set 用于修改和追加、deleteProperty 用于删除
- target 相当于 person，propName 相当于 name / age
// 源数据 let person = { name: '张三', age: 18 } // 模拟Vue3中的响应式 const p = new Proxy(person, { // 读取p的某个属性时调用 get(target, propName) { console.log(`有人读取了p身上的${propName}属性`); return Reflect.get(target, propName) }, // 修改或追加p的某个属性时调用 set(target, propName, value) { console.log(`有人修改了p身上的${propName}属性，我要去更新页面了`); Reflect.set(target, propName, value) }, // 删除p的某个属性时调用 deleteProperty(target, propName) { console.log(`有人删除了p身上的${propName}属性，我要去更新页面了`); return Reflect.deleteProperty(target, propName) } })
测试：
五、reactive 对比 ref
1. 从定义数据角度对比
- ref 用来定义：基本类型数据
- reactive 用来定义：对象（数组）类型数据
- 备注：ref 也可以用来定义对象（或数组）类型数据，它内部会自动通过 reactive 转为代理对象
2. 从原理角度对比
- ref 通过 Object.defineProperty() 的 get 和 set 来实现响应式（数据劫持）
- reactive 通过使用 Proxy 来实现响应式（数据劫持），并通过 Reflect 操作源对象内部的数据
3. 从使用角度对比
- ref 定义的数据：操作数据需要 .value，读取数据时模板中直接读取不需要 .value
- reactive 定义的数据：操作数据与读取数据：均不需要 .value
六、setup 的两个注意点
1. setup 执行的时机
在 beforeCreate 之前执行一次，this 是 undefined
测试 setup 的执行时机
<template> <div> <h3>姓名：{{ person.name }}</h3> <h3>年龄：{{ person.age }}</h3> </div> </template> <script> import { reactive } from "vue"; export default { name: "Demo", beforeCreate() { console.log("--beforeCreate--"); }, setup() { console.log("--setup--", this); let person = reactive({ name: "张三", age: 18, }); return { person, }; }, }; </script>
setup 在 beforeCreate 之前执行：
2. setup 的参数
props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性
context：上下文对象
attrs：值为对象，包含：组件外部传递过来，但没有在 props 配置中声明的属性，相当于 this.$attrs
slots：收到的插槽内容，相当于 this.$slots
emit：分发自定义事件的函数，相当于 this.$emit
实例：
App.vue
<template> <div> <Demo @hello="showHelloMsg" msg="Hello" school="清华大学"> <template v-slot:qwe> <span>清华大学</span> </template> </Demo> </div> </template> <script> import Demo from "./components/Demo.vue"; export default { name: "App", components: { Demo }, setup() { function showHelloMsg(value) { alert(`你好啊，你触发了hello事件，我收到的参数：${value}!`); } return { showHelloMsg, }; }, }; </script>
Demo.vue
<template> <div> <h3>姓名：{{ person.name }}</h3> <h3>年龄：{{ person.age }}</h3> <button @click="test">测试触发一下Demo组件的Hello组件</button> </div> </template> <script> import { reactive } from "vue"; export default { name: "Demo", props: ["msg", "school"], emits: ["hello"], setup(props, context) { console.log("--setup--", props); console.log("--setup--", context); console.log("--setup--", context.attrs); //相当于Vue2中的$attrs console.log("--setup--", context.emit); //触发自定义事件 console.log("--setup--", context.slots); //插槽 let person = reactive({ name: "张三", age: 18, }); function test() { context.emit("hello", 200); } return { person, test, }; }, }; </script>
输出结果如下
不积跬步无以至千里 不积小流无以成江海
