Vue3.0性能优化之toRaw,markRaw

有一些操作不需要更新UI界面,就可以用toRaw,节约性能,我们可以通过toRaw方法拿到它的原始数据，对原始数据进行修改,就不会更新UI界面

怎么做呢?先说下toRaw配合reactive

import { reactive,toRaw} from 'vue'

 setup() {
 let obj = {name:'lsh',age:18};
 let state = reactive(obj)
 let obj2 = toRaw(state)

console.log(obj === obj2) //true
 }

当我们改变

obj2.name = 'saa'

视图不会改变,但是内部确已经改变了

怎么做呢?再说下toRaw配合ref

注意点:如果想通过toRao拿到ref类型的原始数据(创建时传入的那个数据) ,那么就必须明确的告诉toRaw方法,要获取的是.value的值,因为经过Vue处理之后,.value中保存的才是当初创建时传入的那个原始数据

代码

import { ref,toRaw} from 'vue'

 setup() {
 let obj = {name:'lsh',age:18};
 let state = ref(obj)
 let obj2 = toRaw(state.value)

console.log(obj === obj2) //true
 }

当我们改变

obj2.name = 'saa'

最后说下markRaw

数据改变，视图不会发生变化

代码

import { reactive，markRaw } from 'vue'

let obj = {name:'lsh',age:18};
obj = markRaw(obj)
let state = reactive(obj)

改变

state.name = 'saa'