1.拉开序幕的setup
- 理解：Vue3.0中一个新的配置项，值为一个函数
- setup是所有Componsition API(组合API)“表演的舞台”
- 组件中所用到的:数据，方法等等，均要配置在setup中
- setup函数的两种返回值：
- 若返回一个对象，则对象中的属性、方法、在模板中均可以直接使用(重点关注！)
- 若返回一个渲染函数，则可以自定义渲染内容(了解)
- 注意点：
- 尽量不要与Vue2.x配置混用
- Vue2.x配置(data、methods、computed...)中可以访问到setup中的属性，方法
- 但在setup中不能访问到Vue2.x配置(data、methods、computed...)
- 如果有重名，Vue3.0中setup优先
- setup不能是一个async(异步)函数，因为一旦加上返回值不再是return的对象，而是promise,模板看不到return对象中的属性,（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）
2.ref函数
- 作用:定义一个响应式的数据
- 语法：
const xxx = ref(initValue)- 创建一个包含响应式数据的引用对象(refrence对象，RefImpl)
- JS中操作数据：
xxx.value - 模板中读取数据：不需要.value，直接：
<div>{{xxx}}</div>
- 备注：
- 接收的数据可以是：基本类型、对象类型
- 基本类型的数据：响应式依然是靠
object.defineProperty()的get与set完成的 - 对象类型的数据：内部“求助”了Vue3.0中的一个新函数---
reactive函数， 可以把reactive函数理解为是含有Proxy代理的功能
3.reactive函数
- 作用：定义一个对象类型的响应式数据(基本类型别用它，用
ref函数) - 语法：
const 代理对象 =reactive(源对象)接收一个对象(或数组)，返回一个代理对象(Proxy的实例对象，简称proxy对象) - reactive定义的响应式数据是“深层次的”，不管藏得多深，都能挖出来。
- 内部基于ES6的proxy实现，通过代理对象操作源对象内部数据进行操作。
4. Vue3.0中的响应式原理
vue2.x的响应式
-
实现原理:
- 对象类型：通过
Object.defineProperty()对对象的已有属性值的读取、修改进行拦截(数据劫持) - 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）
1Object.defineProperty(data,'count',{ 2 get(){}, 3 set(){} 4}) - 存在问题：
- 新增属性、删除属性、界面不会更新
新增--
this.$set(this.person,'sex','女')或者Vue.set(this.person,'sex','女')，后者需要在单文件中引入import Vue from 'vue'删除--delete this.person.name页面不会更新，应该--this.$delete(this.person,'name')或者Vue.set(this.person,'name') - 直接通过下标修改数组，界面不会自动更新
this.$set(this.person.hobby,'0','逛街')Vue.set(this.person.hobby,0,'逛街')this.person.hobby.splice(0,1,'逛街') - 总结：解决方案----使用Vue.set、Vue.delete或者vm.$set、vm.$delete这些API
- 对象类型：通过
Vue3.0的响应式
-
实现原理：
- 通过Proxy(代理):拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等
- 通过Reflect(反射):对源对象的属性进行操作
- MDN文档中描述的Proxy与Reflect:
- Proxy:
- Reflect:
1const p = new Proxy(person, { 2 // 拦截读取属性值 3 // target就是传入的person,propName就是属性名 4 get(target, propName) { 5 console.log(`有人读取了p身上的${propName}属性`); 6 // return target[propName]; 7 return Reflect.get(target, propName); 8 }, 9 // 拦截设置属性值或添加新属性 10 // value是修改后的值 11 set(target, propName, value) { 12 console.log(`有人修改了p身上的${propName}属性，我要去更新界面了`); 13 // target[propName] = value; 14 Reflect.set(target, propName, value); 15 }, 16 // 拦截删除属性 17 deleteProperty(target, propName) { 18 console.log(`有人删除了p身上的${propName}属性，我要去更新界面了`); 19 // return delete target[propName] 20 return Reflect.defineProperty(target, propName) 21 }, 22 });
5.reactive和ref
- 从定义数据角度对比：
- ref用来定义：基本类型数据
- reactive用来定义：对象(或数组)类型数据
- 备注：ref也可以用来定义对象(或数组)类型数据，它内部会自动通过
reactive转为代理对象
- 从原理角度对比：
- ref通过
Object.defineProperty()的get与set来实现响应式(数据劫持) - reactive 通过使用Proxy来实现响应式(数据劫持)，并通过
Reflect操作源对象内部的数据
- ref通过
- 从使用角度对比：
- ref定义的数据：操作数据需要
.value,读取数据时模板中直接读取不需要.value - reactive定义的数据：操作数据与读取数据，均不需要
.value
- ref定义的数据：操作数据需要
6.setup注意点
先来补充Vue2中遗漏的两个点：
- 父组件给子组件传参时，子组件可以用props来接收，但是若没有接收，可以用this.$attrs.属性名来接收。
- 若没有给插槽预留位置，即没写
<slot></slot>，可以在this.$slots身上找到。
-
setup执行的时机
- 在beforeCreate之前执行一次，this是undefined;
-
setup的参数
- props:值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性(props接收声明，同VuE2)
- context:上下文对象
- attrs:值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于Vue2中的
this.$attrs,浏览器中的警告会存在 - slots:收到的插槽内容，相当于
this.$slots - emit:分发自定义事件的函数，相当于
this.$emit
7.计算属性与监视
-
computed函数
-
- 与Vue2.x中的computed配置功能一致
1 // Vue2中的watch监听 2 watch: { 3 // 简写 4 sum(newValue, oldValue) { 5 console.log("sum的值变化了", newValue, oldValue); 6 }, 7 // 完整写法 8 sum: { 9 immediate: true, // 立即监听 10 deep: true, // 深度监听 11 handler(newValue, oldValue) { 12 console.log("sum的值变化了", newValue, oldValue); 13 }, 14 }, 15 }, - Vue3写法：
1import { computed } from "vue"; 2setup(props, context) { 3 // 数据 4 let person = reactive({ 5 firstName: "帅", 6 lastName: "坤", 7 fullName: "", 8 }); 9 // vue3中的计算属性computed写法---简写---箭头函数，没有考虑计算属性被修改的情况 10 /* person.fullName = computed(() => { 11 return person.firstName + "-" + person.lastName + "❤"; 12 }); */ 13 // 计算属性--完整写法(考虑读和写) 14 person.fullName = computed({ 15 get() { 16 return person.firstName + "-" + person.lastName; 17 }, 18 set(value) { 19 const nameArr = value.split("-"); 20 person.firstName = nameArr[0]; 21 person.lastName = nameArr[1]; 22 }, 23 }); 24 // 方法 25 26 // 返回一个对象(常用) 27 return { 28 person, 29 }; 30 }, - 与Vue2.x中的computed配置功能一致
-
watch函数
-
与Vue2.x中watch配置功能一致
-
两个小坑：
- 监视reactive定义的响应式数据时：oldValue无法正确获取，强制开启了深度监听(deep配置失效)
- 监视relactive定义的响应式数据中某个属性(该属性还是对象)时：deep配置有效
1 2import {ref，reactive,watch} from 'vue' 3let sum =ref(0); 4let msg =ref('你好啊') 5let person = reactive({ 6 name:'帅坤', 7 age:18, 8 person:{ 9 job:{ 10 j1:{ 11 salary:20 12 } 13 } 14 } 15}) 16//情况一：监视ref定义的响应式数据sum 17watch(sum,(newValue,oldValue)=>{ 18 console.log('sum变化了',newValue,oldValue); 19},{immediate:true}) 20 21//情况二：监视多个ref定义的响应式数据 22watch([sum,msg],(newValue,oldValue)=>{ 23 console.log('sum或msg变化了',newValue,oldValue) 24}) 25 26//情况三：监视reactive定义的响应式数据 27 //1.无法正确获取oldValue值 28 //2.强制开启了深度监听 29watch(person,(newValue,oldValue)=>{ 30 console.log('person变化了',newValue,oldValue) 31},{immediate:true,deep:false}) // 此处的deep配置不再奏效 32 33//情况四：监视reactive定义的响应式数据中的某个属性 34watch(()=>person.job,(newValue,oldValue)=>{ 35 console.log('person的job变化了',newValue,oldValue) 36},{immediate:true,deep:true}) 37 38//情况五：监视reactive定义的响应式数据中的某些属性 39watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{ 40 console.log('person的name或age变化了',newValue,oldValue) 41}) 42 43//特殊情况： 44watch(()=>person.job,(newValue,oldValue)=>{ 45 console.log('person的job变化了',newValue,oldValue) 46},{deep:true}) // 此处由于监视的是reactive所定义的对象中的某个属性(该属性还是对象)，所以deep配置有效
- watch监视ref数据的说明
1<template> 2 <h2>当前求和为{{ sum }}</h2> 3 <button @click="sum++">点我++</button> 4 <h2>当前的信息为:{{ msg }}</h2> 5 <button @click="msg += '❤'">修改信息</button> 6 <hr /> 7 <h2>姓名：{{ person.name }}</h2> 8 <h2>年龄:{{ person.age }}</h2> 9 <h2>薪资:{{ person.job.j1.salary }}k</h2> 10 <button @click="person.name += '~'">修改姓名</button> 11 <button @click="person.age++">修改年龄</button> 12 <button @click="person.job.j1.salary++">涨薪</button> 13</template> 14 15<script> 16import { ref, watch, reactive } from "vue"; 17export default { 18 name: "Demo", 19 setup(props, context) { 20 // 数据 21 let sum = ref(0); 22 let msg = ref("你好啊"); 23 let person = ref({ 24 name: "帅坤", 25 age: 18, 26 job: { 27 j1: { 28 salary: 20, 29 }, 30 }, 31 }); 32 // sum不加.value，是因为sum是基本类型数据。 33 watch( 34 sum, 35 (newValue, oldValue) => { 36 console.log("sum的值变化了", newValue, oldValue); 37 }, 38 { immediate: true } 39 ); 40 // 方式一：这回监视的是RefImpl中的value属性，person是ref生成的，person.value是reactive生成的 41 /* watch(person.value, (newValue, oldValue) => { 42 console.log("person的值变化了", newValue, oldValue); 43 }); */ 44 // 方式二：开启深度监听对象.对象， 45 watch( 46 person, 47 (newValue, oldValue) => { 48 console.log("person的值变化了", newValue, oldValue); 49 }, 50 { deep: true } 51 ); 52 53 // 返回一个对象(常用) 54 return { 55 sum, 56 msg, 57 person, 58 }; 59 }, 60}; 61</script>
- watchEffect函数
- watch的套路是：既要指明监视属性，也要指明监视的回调。
- watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，就监视哪个属性
- watchEffect有点像computed:
- 但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值。
- 而watchEffect更注重的是过程(回调函数的函数体)，所以不用写返回值。
1//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。 2watchEffect(()=>{ 3 const x1 = sum.value 4 const x2 = person.job.j1.salary 5 console.log('watchEffect配置的回调执行了') 6})
8. 生命周期
1<template> 2 <h2>当前求和为{{ sum }}</h2> 3 <button @click="sum++">点我++</button> 4</template> 5 6<script> 7import { 8 ref, 9 onBeforeMount, 10 onMounted, 11 onBeforeUpdate, 12 onUpdated, 13 onBeforeUnmount, 14 onUnmounted, 15} from "vue"; 16export default { 17 name: "Demo", 18 setup() { 19 // 数据 20 let sum = ref(0); 21 22 // 通过组合式api形式的生命周期钩子，与Vue2.x中钩子对应关系如下： 23 /* 1.beforeCreate ===> setup() 24 2.created ===> setup() 25 3.beforeMount ===>onBeforeMount 26 4.mounted ===> onMounted 27 5.beforeUpdate ===> onBeforeUpdate 28 6.updated ===> onUpdated 29 7.beforeUnmount ===> onBeforeUnmount 30 8.unmounted ===> onUnmounted */ 31 console.log("----setup---"); 32 onBeforeMount(() => { 33 console.log("----onBeforeMount---"); 34 }); 35 onMounted(() => { 36 console.log("----onMounted---"); 37 }); 38 onBeforeUpdate(() => { 39 console.log("----onBeforeUpdate---"); 40 }); 41 onUpdated(() => { 42 console.log("----onUpdated---"); 43 }); 44 onBeforeUnmount(() => { 45 console.log("----onBeforeUnmount---"); 46 }); 47 onUnmounted(() => { 48 console.log("----onUnmounted---"); 49 }); 50 51 // 返回一个对象(常用) 52 return { 53 sum, 54 }; 55 }, 56 // 通过配置项的形式使用生命周期钩子函数 57 //#region 58 /* beforeCreate() { 59 console.log("----beforeCreate---"); 60 }, 61 created() { 62 console.log("----created---"); 63 }, 64 beforeMount() { 65 console.log("----beforeMount---"); 66 }, 67 mounted() { 68 console.log("----mounted---"); 69 }, 70 beforeUpdate() { 71 console.log("----beforeUpdate---"); 72 }, 73 updated() { 74 console.log("----updated---"); 75 }, 76 beforeUnmount() { 77 console.log("----beforeUnmount---"); 78 }, 79 unmounted() { 80 console.log("----unmounted---"); 81 }, */ 82 //#endregion 83}; 84</script> 85 86<style> 87</style>
若非要将组合式和配置项一起使用，同名钩子情况下，组合式api的执行顺序要早于配置项形式
9. 自定义hook函数
- 什么事hook?——本质是一个函数，把setup函数中使用的Composition API进行了封装
- 类似于Vue2.x中的mixin
- 自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂
10.toRef与toRefs
- 作用：创建一个ref对象，其value值指向另一个对象中的某个属性
- 语法：
const name = toRef(person,'name') - 应用：要将响应式对象中的某个属性单独提供给外部使用
- 扩展：
toRefs与toRef功能一致，但可以批量创建多个ref对象，语法：toRefs(person)，但是要注意，对于多层对象属性来说,他只能提供一层对象属性，即toRefs(person)中若想展示salary，还需要{{job.j1.salary}}
其它Composition API
1.shallowReactive和shallowRef
- shallowReactive: 只处理对象最外层属性的响应式(浅响应式)
- shallowRef:只处理基本数据类型的响应式，不进行对象的响应式处理(ref会求助与reactive，生成proxy，带有get/set属性，但是 shallowRef不会)
- 什么时候使用？
- 如果有一个对象数据，结构比较深，但变化时只是外层属性变化，即只有对象中的基本属性字段发生变化====>shallowReactive
- 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换====>shallowRef 比如14_src/demo.vue中的替换功能
2. readonly与shallowReadonly
- readonly:让一个响应式数据变为只读的(深只读)
- shallowReadonly：让一个响应式数据变为只读的(浅只读)
- 应用场景：不希望数据被修改时
1// 全部只读 2 person =readonly(person) 3 // 字段只读，深层可修改 4 person =shallowReadonly(person)
3.toRaw与markRaw
raw---未加工的，生的，原始的，格式
- toRaw:
- 作用：将一个由
reactive生成的响应式对象转为普通对象。 - 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新
1function showRawPerson() { 2 console.log("输出响应式的person", person); 3 const p = toRaw(person); 4 console.log("输出原始person", p); 5 const sum = toRaw(sum); 6 console.log("输出最原始的sum ", sum); // undefined,说明toRaw只对reactive生成的响应式数据有效 7 }
- 作用：将一个由
- markRaw:
比toRaw应用的更多
- 作用：标记一个对象，使其永远不会再成为响应式对象
- 应用场景：
-
- 有些值不应被设置为响应式，例如复杂的第三方类库等
-
- 当渲染具有不可变数据的大列表时，跳过响应式转换可以提高性能
-
4.customRef
- 作用：创建一个自定义的ref，并对其依赖跟踪和更新触发进行显式控制
- 实现防抖效果：
1<template> 2 <input type="text" v-model="keyword" /> 3 <h3>{{ keyword }}</h3> 4</template> 5 6<script> 7import { ref, customRef } from "vue"; 8export default { 9 name: "App", 10 setup() { 11 // 数据 12 // 使用Vue提供的ref 13 // let keyword= ref("hello"); 14 // 使用程序员自定义的ref 15 let keyword = myRef("hello", 500); 16 // 自定义ref：名为---myRef 17 function myRef(value, delayTime) { 18 // 实现防抖功能 19 let timer; 20 // 这个value是接收到的keyword值，即hello 21 return customRef((track, trigger) => { 22 return { 23 get() { 24 console.log(`有人从myRef容器中读取数据了，我把${value}给他了`); 25 // 通知Vue追踪value的变化，即提前和get商量一下，让他认为这个value是有用的 26 track(); **//===>追踪** 27 return value; 28 }, 29 set(newValue) { 30 console.log(`有人把myRef这个容器中数据改为了:${newValue}`); 31 // 实现防抖功能 32 clearTimeout(timer); 33 timer = setTimeout(() => { 34 value = newValue; 35 // 通知Vue去重新解析模板 36 trigger(); **//===>触发** 37 }, delayTime); 38 }, 39 }; 40 }); 41 } 42 // 返回keyword一个对象(常用) 43 return { 44 keyword, 45 }; 46 }, 47}; 48</script> 49 50</style> 51
5.provide与inject
- 作用：实现祖孙组件间通信，祖孙组件也称为跨级组件 (实现祖与后代组件间通信)
- 套路：父组件有一个
provide选项来提供数据，后代组件有一个inject选项来使用这些数据 
- 具体写法：
- 祖组件中
1<template> 2 <div class="app"> 3 <h3>我是App组件(祖),{{name}}---{{price}}</h3> 4 <Son /> 5 </div> 6</template> 7 8<script> 9import { toRefs, reactive,provide } from "vue"; 10import Son from "./components/Son.vue"; 11export default { 12 name: "App", 13 components: { Son }, 14 setup() { 15 let car = reactive({ name: "奔驰", price: "40w" }); 16 provide('car',car)//给自己的后代组件传递数据 17 return { ...toRefs(car) }; 18 }, 19}; 20</script> - 孙组件中
1<template> 2 <div class="grandSon"> 3 <h3>我是GrandSon组件(孙),{{car.name}}---{{car.price}}</h3> 4 </div> 5</template> 6 7<script> 8import {inject} from 'vue' 9export default { 10 name: "GrandSon", 11 setup(props) { 12 let car =inject('car') 13 console.log('grandSon中Inject接收到的数据',car); 14 return{car} 15 } 16}; 17</script>
- 祖组件中
6.响应式数据的判断
- isRef:检查一个值是否为一个ref对象
- isReactive:检查一个对象是否由
reactive创建的响应式代理 - isReadonly:检查一个对象是否由
readonly创建的只读代理 - isProxy:检查一个对象是否由
reactive或者readonly创建的代理1<template> 2 <div class="app"> 3 <h3>我是App组件(祖)</h3> 4 </div> 5</template> 6 7<script> 8import { 9 toRefs, 10 ref, 11 reactive, 12 readonly, 13 isRef, 14 isReactive, 15 isReadonly, 16 isProxy, 17} from "vue"; 18export default { 19 name: "App", 20 setup() { 21 let sum = ref(0); 22 let car = reactive({ name: "奔驰", price: "40w" }); 23 let car2 = readonly(car); 24 25 console.log(isRef(sum)); //true 26 console.log(isReactive(car)); //true 27 console.log(isReadonly(car2)); //true 28 console.log(isProxy(car2)); //true,readonly修饰后的数据，底层还是proxy响应式 29 console.log(isProxy(sum)); //false,ref的底层是objectDefineProperty,不是proxy 30 return { ...toRefs(car) }; 31 }, 32}; 33</script>
Composition API的优势
- 使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data,methods,computed里修改
- CompositionAPI的优势---我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起