0

vue3中toRaw函数和markRaw函数

 4 months ago
source link: https://www.fly63.com/article/detial/11489
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

更新日期: 2022-05-12阅读量: 84标签: 函数分享

扫一扫分享

在setup函数中,我们通过ref和reactive函数创建响应式数据,其特点是,每次修改数据都会更新UI界面,这样的问题是非常消耗性能

所以,如果我们有些时候,有些操作可以不需要每次修改数据都去更新UI界面,那么我们可以通过vue3提供的toRaw方法来获取该数据被Proxy包装前的原始数据,然后通过对原始数据进行修改,进而可以修改对应的代理对象内部数据。这是通过原始数据修改改变的,并不会触发 UI界面更新

<script>
import { reactive, toRaw } from "vue";
export default {
  setup() {
    const obj1= {name:'alice'};
    const user = reactive(obj1);
    const obj2 = toRaw(user);
    console.log(obj1 === obj2);//true
    function change() {
      obj2.name = 'Frank';
    }
    return { user, change};
  },
};
</script>

上面例子中,通过包装后的响应式对象user来修改,界面会立即更新。但是如果通过修改原始数据obj2 来修改数据,界面是不会跟新的。另外我们可以看见obj2===obj1,由此证明: toRow就是用于获取一个Proxy对象的原始数据

以上是获取reactive的原始数据(创建时响应式数据时传入的原始数据),我们再来看下如何获取ref的原始数据

我们知道ref的本质是reactive,即ref(obj)相当于reactive({value : obj}) 所以如果想通过toRaw方法获取ref类型的原始数据,就必须明确告诉toRaw,需要获取的是.value的值。因为.value中保存的才是当初创建时传入的原始数据

import { ref, toRaw } from "vue";
export default {
  setup() {
    const obj1= {name:'alice'};
    const user = ref(obj1);
    const obj2 = toRaw(user.value);
    console.log(obj1,user,obj2);
    return { user };
  },
};

有的情况下,我们希望某个数据在以后的操作中永远都不会被追踪,vue3提供了一个方法:markRaw

setup() {
   const obj= {name:'alice',age:18};
   obj= markRaw(obj);
   const user= reactive(obj);
   function change(){
    user.age=19
   }
   return { user , change};
}

上述代码中,obj被markRaw标记后,当后面将obj变成proxy对象时,发现调用change方法改变数据时,界面并不会再跟新了!

链接: https://www.fly63.com/article/detial/11489


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK