目录
shallowReactive和shallowRef
shallow Reactive:只处理对象最外层属性的响应式(浅响应式)
shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理
什么时候使用:
- 如果有一个对象数据,结构比较深,但变化时只是外层属性变化===>shallowReactive.下面的例子只会响应得到job这一层,后面的j1得不到。
let person = shallowReactive({
job:{
j1:{
salary:20
}
}
})
- 如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换===>shallowRef
let x = shallowRef()
y:0
})
readonly 和 shallowReadonly
- readonly:让一个响应式的数据变为只读的(深只读)
- shallowReadonly:让一个响应式的数据变为只读的(浅只读)
- 应用场景:不希望数据被修改
let person = shallowReactive({
job:{
j1:{
salary:20
}
}
})
person = readonly(person) //person对象里的为只读,不能修改了
person = shallowReadonly(person) //只有浅层次为只读,salary可以修改
toRaw和markRaw
toRaw:
- 作用:将一个reactive生成的响应式对象转化为普通对象
- 使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。
markRaw:
- 作用:标记一个对象,使其永远不会再成为响应式对象
- 应用场景:
- 有些值不应被设置为响应式,例如复杂的第三方类库等
- 当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。
function showRawPerson(){
const p = toRaw(person)
console.log(p)
}
toRaw会生成最原始的对象数据。
function addCar(){
let car = {name:'奔驰',price:40}
person.car = markRaw(car)
}
function changePrice(){
person.car.price++
console.log(person.car.price)
}
上面的函数使得car从响应式变为普通对象,所以点击changePrice函数,不会出现响应式的变化。
customRef
作用:创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显示控制。
实现防抖效果:
<template>
<input type="text" v-model="keyword"/>
<h3>{{keyword}}</h3>
</template>
<script>
import {ref ,customRef} from 'vue'
export default {
name: 'App',
setup() {
//自定义ref
function myRef(value){
let timer
return customRef((track,trigger)=>{
return {
get(){
console.log(`有人从myRef这个容器中读取数据了,我把${value}给他了`)
track() //通过vue追踪value的变化
return value
},
set(newValue){
console.log(`有人从myRef这个容器中数据改为了:${newValue}`)
clearTimeout(timer)
setTimeout(()=>{
value = newValue
trigger() //通知vue去重新解析模板
},1000)
}
}
})
}
//let keyword = ref('hello') //使用vue提供的ref
let keyword = myRef('hello')
return{
keyword
}
}
}
</script>
provide和inject
作用:实现祖孙组件间通信
套路:父组件有一个provide选项来提供数据,后代组件有一个inject选项来开始使用这些数据
具体写法:
祖组件
setup(){
...
let car = reactive({name:'奔驰',price:'40万'})
provide('car',car)
...
}
孙组件
setup(props,context){
...
const car = inject('car')
return {car}
...
}
响应式数据的判断
isRef:检查一个值是否为一个ref对象
isReactive:检查一个对象是否是由reactive创建的响应式代理
isReadonly:检查一个对象是否是由readonly创建的只读代理
isProxy: 检查一个对象是否是由reactive或者readonly方法创建的代理