1、toRaw
- 作用:将一个由```reactive```生成的响应式对象转为普通对象
- 使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。
代码:
setup(){ //数据 let sum = ref(0) let person = reactive({ name:'张三', age:18, job:{ j1:{ salary:20 } } }) function showRawPerson(){ const p = toRaw(person) p.age++ console.log(p) } }
例子:
2、markRaw
markRaw:
作用:标记一个对象,使其永远不会再成为响应式对象。
应用场景:
有些值不应被设置为响应式的,例如复杂的第三方类库等。
当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。
代码:
<template> <h4>当前求和为:{{sum}}</h4> <button @click="sum++">点我++</button> <hr> <h2>姓名:{{name}}</h2> <h2>年龄:{{age}}</h2> <h2>薪资:{{job.j1.salary}}K</h2> <h3 v-show="person.car">座驾信息:{{person.car}}</h3> <button @click="name+='~'">修改姓名</button> <button @click="age++">增长年龄</button> <button @click="job.j1.salary++">涨薪</button> <button @click="showRawPerson">输出最原始的person</button> <button @click="addCar">给人添加一台车</button> <button @click="person.car.name+='!'">换车名</button> <button @click="changePrice">换价格</button> </template> <script> import {ref,reactive,toRefs,toRaw,markRaw} from 'vue' export default { name: 'Demo', setup(){ //数据 let sum = ref(0) let person = reactive({ name:'张三', age:18, job:{ j1:{ salary:20 } } }) function showRawPerson(){ const p = toRaw(person) p.age++ console.log(p) } function addCar(){ let car = {name:'奔驰',price:40} person.car = markRaw(car) } function changePrice(){ person.car.price++ console.log(person.car.price) } //返回一个对象(常用) return { sum, person, ...toRefs(person), showRawPerson, addCar, changePrice } } } </script>
注意:
如果在setup的return使用
return{ ...toRefs(person), }
在setup进入页面只会执行一次,如果后期再给person添加属性,这个属性不会是响应式的
参考链接:
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=160&spm_id_from=pageDriver