1、toRaw使用场景
ref/reactive数据类型每次修改都会被追踪,都会更新UI界面,但是这样是非常消耗性能的,所以如果我们有一些操作不需要追踪,不需要更新UI界面,那么这个时候我们就可以通过toRaw方法拿到它的原始数据,对原始数据进行修改,这样就不会被追踪,这样就不会更新UI界面,这样性能就好了。
reactive:
<template>
<p>{{state}}</p>
<button @click="myFn">按钮点击</button>
</template>
.....
setup() {
let obj={name:'lj',age:18}
let state=reactive(obj)
let obj2=toRaw(state)
console.log(obj===obj2); //true
function myFn(){
obj2.name='zs'
console.log(state); //Proxy {name: "zs", age: 18}
console.log(obj2); //{name: "zs", age: 18}
}
return {
myFn,state
}
},
ref:
setup() {
let obj={name:'lj',age:18}
let state=ref(obj)
let obj2=toRaw(state.value)
console.log(obj===obj2); //true
function myFn(){
obj2.name='zs'
console.log(state);
console.log(obj2);
}
return {
myFn,state
}
},
运行结果:(点击按钮时视图state值并没有更新)
结论:
这样虽然数据被修改,但是不会更新ui界面