vue响应式：进阶

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天，点击查看活动详情

toRaw()

ref和reactive都是响应式API，一旦更新数据，就会更新到UI上，但是在某些操作下，我们不需要去更新页面，也就是不需要响应式的数据了，就可以使用toRaw拿到数据的原始值。

import { ref, reactive, toRaw } from 'vue'

const a  = reactive({
    age:"18"
})

const b = toRaw(a);
console.log(a) // Proxy{age:18}
console.log(b) // {age:18}

a对象是一个Proxy对象，具有响应式，而b对象就是一个普通的Object.

markRaw()

将对象从开始就不能具有响应式。

import {reactive,toRaw,isReactive ,markRaw} from 'vue'

const a  = markRaw({
    age:"18"
})

const b = reactive(a);
console.log(a) // {age:18}
console.log(b) // {age:18}
console.log(isReactive(b)) // false

shallowReadonly()

将对象的根层属性改为只读，如果在数据不想被改变的时候可以使用，但是仅限于根级属性。

import { ref, reactive,,shallowReadonly} from 'vue'

const a  = shallowReadonly({
    age:"18",
    children:{
        name:"zs"
    }
})

a.age = '20';
a.children.name = 'li'
console.log(a.age,a.children.name); //18,li

shallowReactive()

和shallowReadonly差不多，就是将根级属性变为响应式，而子级属性还是普通属性。

import {ref, reactive, shallowReactive} from 'vue'

const a = shallowReactive({
    age: "18",
    children: {
        name: "zs"
    }
})

console.log(isReactive(a), isReactive(a.children)); //true,false

customRef()

customRef将定义响应式的控制权交给开发者，你可以使用它创建一个自定义的ref，并且显式声明对其的跟踪和触发依赖的方式。 customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象。

effectScope()

Vue 3.2版本引入了新的 Effect scope API，使用 effectScope 创建一个 effect 作用域，可以捕获其中所创建的响应式副作用 (即计算属性和侦听器)，这样捕获到的副作用可以一起处理。使用 getCurrentScope 返回当前活跃的 effect 作用域。使用 onScopeDispose 在当前活跃的 effect 作用域上注册一个处理回调函数。当相关的 effect 作用域停止时会调用这个回调函数。