vue3的toRaw和markRaw

• 直接上代码吧，里面的注释就解释上面两个属性，也可以直接将代码拷贝去实验

<template>
    <button @click="rawPerson.age++">{{ rawPerson.age }}</button>
    <button @click="rawNum.num++">{{ rawNum.num }}</button>
    <!-- 这里有个奇怪现象 点击上面第一个按钮页面数据不会变因为是普通对象不具备响应式，
    但是点击第二个因为是响应式数据会变并且第一次变的时候会将第一个按钮的数据也刷新成最新的，可能是与vue渲染有关 -->
    <h2>{{ person.car }}</h2>
    <button @click="addProp">增加person属性</button>
    <button @click="addPrice">改变新增属性的值，记得先添加属性，不然报错</button>
</template>
  
<script>
import { reactive, ref, toRaw, markRaw } from 'vue';
export default {
    name: 'toRef',
    setup() {

        let person = reactive({ // 此时person里面的对象比如salary.job.num都具有响应式
            name: "james",
            age: 38,
            salary: {
                job: {
                    num: 11
                },
            }
        });
        let num = ref({ num: 0 });
        console.log(person, num);
        let rawPerson = toRaw(person);// 将reactive定义的响应式数据对象变成普通对象了,此时rawPerson就是普通对象了
        let rawNum = toRaw(num);// toRaw对ref定义的数据是没有作用的包括ref定义的对象
        // console.log(rawPerson, rawNum);

        function addProp() { // 为person增加属性
            // person.car = { name: 'byd', price: 18 };
            // 这里也有个知识点，在vue2中我们往定义好的对象中加属性是不会有响应式效果的
            //因为vue2用的object.defineproperty来做数据劫持然后响应式的，但是在vue3中改用proxy它会监听我们整个对象，而vue2中的响应式只会监听某个属性
            //在vue2中想要像这样增加属性需要用到this.$set()方法
            // 所以在vue3也会出现一些问题，就是我们往一个对象上添加某些属性，比如第三方的js库或者一个很庞大的数据对象但是我们只读不需要监听的
            //此时就可以使用到markRaw了,此时我们需要像下面那样添加属性了
            person.car = markRaw({ name: 'byd', price: 18 });//此时就不具备响应了，只是添加了一个普通的对象了
        }
        function addPrice(){
            person.car.price++;
            console.log(person.car.price);//其实数据是已经变了 但是缺失了响应式所以页面上是不会变的
        }
        return {
            rawPerson,
            rawNum,
            rawNum,
            person,
            addProp,
            addPrice
        };
    }
}
</script>
  

• toRaw
  • 作用：将一个由reactive生成的响应式对象转换为普通对象
  • 使用场景：用于读取响应式对象对应的普通对象，使其失去响应式
• markRaw
  • 作用：标记一个对象，使其永远不会再成为响应式对象
  • 应用场景：
    • 有些值不适合设置成响应，如复杂的三方数据
    • 数据量很大的列表，但是该列表不需要更改的数据，这样能跳过响应式转换提高性能