河池环江网站建设,重庆平台网站建设平台,无锡网站程序,专门做t恤的网站目录
1.ref函数
2.reactive函数
3.reactive对比ref
4.computed函数
5.watch函数
6.toRef
7..provide inject
1.ref函数 作用: 定义一个响应式的数据 语法: const xxx ref(initValue) 创建一个包含响应式数据的引用对象#xff08;reference对象#xff…目录
1.ref函数
2.reactive函数
3.reactive对比ref
4.computed函数
5.watch函数
6.toRef
7..provide inject
1.ref函数 作用: 定义一个响应式的数据 语法: const xxx ref(initValue) 创建一个包含响应式数据的引用对象reference对象简称ref对象。 JS中操作数据 xxx.value 模板中读取数据: 不需要.value直接div{{xxx}}/div 备注 接收的数据可以是基本类型、也可以是对象类型。 基本类型的数据响应式依然是靠Object.defineProperty()的get与set完成的。 对象类型的数据内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。
2.reactive函数 作用: 定义一个对象类型的响应式数据基本类型不要用它要用ref函数 语法const 代理对象 reactive(源对象)接收一个对象或数组返回一个代理对象Proxy的实例对象简称proxy对象 reactive定义的响应式数据是“深层次的”。 内部基于 ES6 的 Proxy 实现通过代理对象操作源对象内部数据进行操作 reactive 方法是用来创建一个响应式的数据对象该API也很好地解决了Vue2通过 defineProperty 实现数据响应式的缺陷
3.reactive对比ref 从定义数据角度对比 ref用来定义基本类型数据。 reactive用来定义对象或数组类型数据。 备注ref也可以用来定义对象或数组类型数据, 它内部会自动通过reactive转为代理对象。 从原理角度对比 ref通过Object.defineProperty()的get与set来实现响应式数据劫持。 reactive通过使用Proxy来实现响应式数据劫持, 并通过Reflect操作源对象内部的数据。 从使用角度对比 ref定义的数据操作数据需要.value读取数据时模板中直接读取不需要.value。 reactive定义的数据操作数据与读取数据均不需要.value。
4.computed函数
import {computed} from vuesetup(){...//计算属性——简写let fullName computed((){return person.firstName - person.lastName})
// 为什么说是computed的完整形式呢因为computed的简写形式只是单独的完成了读的功能而没办法去更改firstName 和lastName的值下面我们进行computed的完整形式。//计算属性——完整let fullName computed({get(){return person.firstName - person.lastName},set(value){const nameArr value.split(-)person.firstName nameArr[0]person.lastName nameArr[1]}})
}
5.watch函数 当被监视的属性变化时回调函数自动调用进行相关操作所谓监视属性就是监测指定的属性是否发生变化如果发生了则进行一系列操作如果没发生变化则监视属性也不会被触发。 与Vue2.x中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或msg变化了,newValue,oldValue) }) /* 情况三监视reactive定义的响应式数据 此时vue3将强制开启deep深度监听 当监听值为proxy对象时oldValue值将出现异常此时与newValue相同 若watch监视的是reactive定义的响应式数据则无法正确获得oldValue 若watch监视的是reactive定义的响应式数据则强制开启了深度监视 */ watch(person,(newValue,oldValue){ console.log(person变化了,newValue,oldValue) },{immediate:true,deep:false}) //此处的deep配置不再奏效 //情况四监视reactive定义的响应式数据中的某个属性 watch(()person.job,(newValue,oldValue){ console.log(person的job变化了,newValue,oldValue) },{immediate:true,deep:true}) //情况五监视reactive定义的响应式数据中的某些属性 watch([()person.job,()person.name],(newValue,oldValue){ console.log(person的job变化了,newValue,oldValue) },{immediate:true,deep:true}) //特殊情况 watch(()person.job,(newValue,oldValue){ console.log(person的job变化了,newValue,oldValue) },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性所以deep配置有效 6.toRef
toRef 是将某个对象中的某个值转化为响应式数据其接收两个参数第一个参数为 obj 对象第二个参数为对象中的属性名 作用创建一个 ref 对象其value值指向另一个对象中的某个属性。 语法const name toRef(person,name) 应用: 要将响应式对象中的某个属性单独提供给外部使用时。 扩展toRefs 与toRef功能一致但可以批量创建多个 ref 对象语法toRefs(person)
script
// 1. 导入 toRef
import {toRef} from vue
export default {setup() {const obj {count: 3}// 2. 将 obj 对象中属性count的值转化为响应式数据const state toRef(obj, count)// 3. 将toRef包装过的数据对象返回供template使用return {state}}
}
/script7..provide inject
假设这有三个组件分别是 A.vue 、B.vue 、C.vue其中 B.vue 是 A.vue 的子组件C.vue 是 B.vue 的子组件
// A.vue
script
import {provide} from vue
export default {setup() {const obj {name: 前端印象,age: 22}// 向子组件以及子孙组件传递名为info的数据provide(info, obj)}
}
/script// B.vue
script
import {inject} from vue
export default {setup() { // 接收A.vue传递过来的数据inject(info) // {name: 前端印象, age: 22}}
}
/script// C.vue
script
import {inject} from vue
export default {setup() { // 接收A.vue传递过来的数据inject(info) // {name: 前端印象, age: 22}}
}
/script
