Vue3新增属性
目录
（没错，1被我吃了）
2.ref函数：
作用：定义一个响应式的数据
复习一下vue3笔记：
语法：const xxx=ref(initValue)
- 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）
- js种操作数据 ：
xxx.value - 模板中读取数据，不需要value，直接 <div>{xxx}</div>
备注：
- 接受的数据可以是：基本类型，也可以是对象类型
- 基本类型的数据：响应式依然是靠
get和set完成的 - 对象类型的数据：内部求助了Vue3.0中的一个新函数，——reactive函数
3.reactive函数
- 作用：定义一个对象类型的响应式数据（基本类型别用它，用ref函数）
- 语法：
const 代理对象=reactive(被代理对象)接受一个对象（或者是数组），返回一个代理对象( proxy对象) - reactive定义的响应式数据是”深层次“的
- 内部基于 ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作
4.Vue3.0中的响应式原理
vue2.0x的响应式
- 实现原理:
- 对象类型：通过
Object.defineProperty()对对象的已有属性值的读取，修改进行拦截（数据劫持） - 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）
- 存在问题：
- 新增属性，删除属性，界面不会更新
- 直接通过下标修改数组，界面不会自动更新
Vue3.0x的响应式
- 实现原理
- 通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写，属性的添加，属性的删除等。
- 通过Reflect（反射）：被代理对象的属性进行操作
- MDN文档当中的Proxy 和 Reflect:
Proxy:
Reflect:
new Proxy(data,{
get(target,prop){
return Reflect.get(target,prop)
},
//拦截设置属性值或者是添加新属性
set(target,prop,value){
return Reflect.set(target,prop,value)
}
})5.reactive对比ref
- 从定义数据角度对比
- ref用来定义：基本数据类型
- rective用来定义：对象（或者是数组）类型数据
- 备注：ref也可以来定义对象（或者数组）类型数据，它内部会自动通过reactive转换为代理对象
- 从原理角度对比：
- ref通过Object.defineProperty() 的 get 和 set 来实现响应式(数据劫持)
- reactive通过使用Prxoy来实现响应式（数据劫持）,并且通过Reflect操作源对象内部的数据
- 从使用角度对比
- ref定义的数据：操作数据需要 .value ，读取数据的时候模板中直接读取，不需要 .value
- reactive定义的数据：操作数据和读取数据都不需要 .value
6.setup的两个注意点儿
- setup执行的实际
- 在beforeCreate之前执行一次，this是undefined
- setup的参数
props:值是对象，包含：组件外部传递过来，并且组件内部声明接收了的属性
context:上下文对象
- attrs:值是对象，包含：组件外部传递过来，但是没有在props配置中声明的属性，相当于 this.$attrs
- slots:收到的插槽内容，相当于 this.$slots。
- emit:分发自定义事件的函数，相当于 this.$emit
7.计算属性和监视
1.computed函数
- 和vue2.0x中computed配置功能一致
- 写法
import {computed} from 'vue'
setup(){
...
//计算属性——简写
let fullName=computed(()=>{
return person.firstName+'-'person.lastName
})
//计算属性——完整
let fullName=computed({
get(){
return person.firstName+'-'+person.lastName
},
set(value){
const nameArr=value.split('-')
person.firstName=nameArr[0]
person.lastName=nameArr[1]
}
})
}2.watch函数
- 和vue2.0x中watch配置功能一致
- 两个小坑：
- 监视reactive定义的响应式数据的时候：oldValue无法正确获取，强制开启了深度监视（deep配置失效)
- 监视reactive定义的响应式数据中某个属性的时候：deep配置有戏
//情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
console.log('sum变化了',newValue,oldValue)
},{immediate:true})
//情况二：监视ref所定义的多个响应式数据,一个数组
watch([sum ,msg],(newValue,oldValue)=>{
console.log('sum变了',newValue,oldValue);
},{immediate:true,deep:true})
/*情况三：监视reactive所定义的一个响应式数据的全部属性
1.注意：此处无法正确的获取oldValue，
2.强制开启了深度监视（也就是deep配置无效）
**/
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue);
},{deep:false})//此时的deep配置无效
//情况四：监视reactive所定义的一个响应式数据中的某个属性.需要写成一个函数，让人家帮你调用
watch(()=>person.age,(newValue,oldValue)=>{
console.log('person的age变化了',newValue,oldValue);
},{deep:false})
//情况五：监视reactive所定义的一个响应式数据中的某些属性
watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
console.log('person的name或者是age变化了',newValue,oldValue);
})
//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
console.log('person里面的job变化了',newValue,oldValue) ;
},{deep:true})//此处由于监视的是reactive中定义的对象的某个属性，所以，deep配置有效
也就是说，如果你监视的如果是个对象，手动自动开始深度监视都无效，如果监视的是对象里面的基本数据类型，默认开启的深度监视有效，第三种要监视对象内的对象要手动开启深度监视
3.watch函数
- watch的套路是：既要知名监视的属性，也要指明监视的回调
- watchEffect的套路是：不用知名监视哪个属性，监视的会调用中用到哪个属性，那就监视哪个属性
- watchEffect有点儿像computed
- 但是computed注重的计算出来的值 (回调函数的返回值），所以必须要些返回值
- 但是watchEfferc更注重的是过程（回调函数的函数体），所以不用写返回值
//watchEffect所指定的回调中用到的数据只要发生变化，就直接重新执行回调
watchEffect(()=>{
const x1=sum.value
const x2=person.age
console.log('watchEffect配置的回调执行了')
})8.生命周期
- vue3.0中可以继续使用vue2.0中的生命周期钩子，但是有两个已经被改名
beforeDestory改名为beforeUnmountdestoryed改名为unmounted
- vue3.0也提供了Composition API形式的生命周期钩子，和vue2.0x中钩子的对应关系如下
- beforeCreate => setup()
- created => setup()
- beforeMount =>onBeforeMount
- mounted =>onMounted
- beforeUpdate =>onBeforeUpdate
- updated =>onUpdated
- beforeUnmount =>onBeforeUnmount
- unmounted =>onUnmounted
9.自定义hook函数
- 什么是hook?——本质是要给函数，把setup函数中使用的CompoistionApi进行了封装
- 类似于vue2.0x中的mixin
- 自定义Hook的优势：复用代码，让setup中的逻辑更清楚易懂
10.toRef
- 作用：创建一个ref 对象，其value值指向另一个对象中的某个属性值
- 语法:
const name=toRef(perosn,'name') - 应用：要将响应式对象中的某个属性单独提供给外部使用的时候
- 扩展：toRefs 和 toRef功能一致，但是可以批量创建多个ref对象，语法： toRefs(person)
时间得意，春风嘉许
开学，那么除去学习就有很多精彩的校园生活值得记录喽~
生活
周一的时候是农历二月初九，也就是
心心念念的赵姐的《与凤行》也播出了 ，七年了，宇文玥终究从冰湖里面捞了出来
然后，报考六级，结果自己把密码忘了，三个好友帮忙，抢了一个小时，才报上，真是卡啊，不容易~
好像没见过0号楼这样的亮灯方式，感觉很美
春，很喜欢
扫一扫
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
