<template> <h1>{ { counter1 }}</h1> <hr> <h1>{ { data.x }}</h1> <button @click="counter1++">加加</button> <hr> <button @click="data.x.counter2++">新属性加加</button> <hr> <button @click="getRawObject">获取原始对象</button> <hr> <button @click="add">拓展属性</button> </template> <script> import { markRaw, reactive, toRaw, toRefs } from 'vue' export default { name : "App", setup(){ let data = reactive({ // 这里的原始对象的值也被修改了 counter1 : 1 }); // 获取响应式对象的原始对象 // 操作这个对象没有响应式处理 function getRawObject(){ let rawObj = toRaw(data); rawObj.counter1++; // 原始对象也关联我们初始的这个对象的,修改的时候也被修改了 console.log(rawObj); // 修改原始对象没有响应式 } function add(){ // 是响应式的,因为我们底层添加也是调用的set方法 // 以Proxy代理对象的形式执行了set方法 // 因此是具有响应式的 // 标记为markRaw后这个属性就是原始对象了,不具有响应式 // 底层也没有创建Proxy对象,极大的提升了效率 data.x = markRaw({ counter2 : 100 }); } return { data, getRawObject, add, ...toRefs(data) }; } } </script> <style> </style>
<template>
<h1>{ { counter1 }}</h1>
<hr>
<h1>{ { data.x }}</h1>
<button @click="counter1++">加加</button>
<hr>
<button @click="data.x.counter2++">新属性加加</button>
<hr>
<button @click="getRawObject">获取原始对象</button>
<hr>
<button @click="add">拓展属性</button>
</template>
<script>
import { markRaw, reactive, toRaw, toRefs } from 'vue'
export default {
name : "App",
setup(){
let data = reactive({
// 这里的原始对象的值也被修改了
counter1 : 1
});
// 获取响应式对象的原始对象
// 操作这个对象没有响应式处理
function getRawObject(){
let rawObj = toRaw(data);
rawObj.counter1++;
// 原始对象也关联我们初始的这个对象的,修改的时候也被修改了
console.log(rawObj);
// 修改原始对象没有响应式
}
function add(){
// 是响应式的,因为我们底层添加也是调用的set方法
// 以Proxy代理对象的形式执行了set方法
// 因此是具有响应式的
// 标记为markRaw后这个属性就是原始对象了,不具有响应式
// 底层也没有创建Proxy对象,极大的提升了效率
data.x = markRaw({
counter2 : 100
});
}
return {
data,
getRawObject,
add,
...toRefs(data)
};
}
}
</script>
<style>
</style>
VUE框架Vue3使用toRaw和markRaw标记为原始和转换为原始对项目效率进行优化------VUE框架
猜你喜欢
转载自blog.csdn.net/2201_75960169/article/details/135270674
今日推荐
周排行