Vue3 markRaw的疑问

128 阅读1分钟

首先,通过搜索引擎搜索markRaw,文章上都是在对象上面挂markRaw之后的对象

然后,按照官方意思markRow将标记一个对象为不可转为代理,那么可以解释成在已声明好的响应式对象上添加一个不被响应式的对象

<div>{{p.name}}</div>
<div>{{p.car}}</div>
<button @click="p.name+='!'">name</button>
<button @click="p.car.price++">car</button>

let p = reactive({
    name: '111'
})
p.car = markRaw({ name: 'kawasakii', price: 10 })

上述代码的表现是点击car按钮时确实展示出来的price是没有变化的,符合预期。 但是点击name按钮的时候会将页面渲染出price更新之后的数据,所以并没有真的实现添加非响应式的效果

出现这样问题的原因,以及markRow真实的使用场景是什么呢