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 的值，响应被阻止了