vue 的"响应式"是什么意思/ Object.freeze( ) 阻止数据响应

最新推荐文章于 2024-05-23 09:08:32 发布

灵灵7

最新推荐文章于 2024-05-23 09:08:32 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 响应式阻止响应

本文链接：https://blog.youkuaiyun.com/weixin_41796631/article/details/82823001

Vue的响应式系统依赖于实例创建时存在的属性。通过修改已存在属性的值，可以实现响应式更新。然而，使用`Object.freeze()`会阻止属性修改，导致响应系统无法追踪变化，从而阻止响应。例如，一个冻结的对象作为Vue实例的数据时，即使在Vue组件中尝试修改属性，也不会触发视图更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<p id="inpChange"> vue实例创建后，弹出窗口: newV.message==data.message
</p>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

//创建数据对象
var data={
message:"good good study"}

//创建一个新实例newV ，并把上面的数据对象data添加到这个newV实例中
//添加created这个声明周期钩子函数(created 钩子可以在实例被创建后执行代码)

var newV=new Vue({
el:"#inpChange",
data:data,
created:function(){
          alert(this.message)
          alert(this.message==data.message),
          alert(this.message="day day up"),  //修改实例中this.message 的值
          alert(this.message==data.message)  //此时结果为true，说明data 这个数据对象的message 值也随之修改了（双向响应）
},
});