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

<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 值也随之修改了（双向响应）
},
});

例子说明：

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

 

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

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


//注意:
只有当实例被创建时中存在的属性才是响应式的。
也就是说如果你添加一个新的属性，比如：
newV.b ="newMes"

对b属性值的修改不会触发其他改变（不响应）

可以预先设置一个带有初始值的数据对象，以后只要修改属性值就可以实现响应
如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
Object.freeze( )
会阻止修改现有的属性，也意味着响应系统无法再追踪变化。(阻止响应)
<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新！ -->
<button v-on:click="foo = 'after'">点击更改文字内容</button>
</div>

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

var obj = {
foo: 'before'
}

Object.freeze(obj)

new Vue({
el: '#app',
data: obj
})

 

例子说明：
vue 部分

1. 创建数据对象obj, 赋值 foo:"before",

var obj = {
          foo: 'before'
}

Object.freeze(obj)   // 对object 对象使用 Object.freeze( ) 方法

new Vue({
            el: '#app',
            data: obj
})

 

Html 部分

2. 绑定click点击事件foo="after" 在 button 元素上，为了点击按钮后，改变 foo 的值

<div id="app">  
  <p>{{ foo }}</p>
  <button v-on:click="foo = 'after'">点击更改文字内容</button>
</div>

 

3. 点击按钮后，obj.foo 的值没有改变，说明后续的点击事件没有改变foo 的值，响应被阻止了

原文链接：https://blog.csdn.net/weixin_41796631/article/details/82823001