Vue数据响应式

1.什么是响应式？

“响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。

2.Vue的data响应式

代码示例：

 const vm = new Vue({data:{n:0}})

• 响应式即对不同的输入能反馈出不同的结果。
• 此时，如果修改vm.n或者修改后面对象的n，那么UI当中的n被更新了，就会响应我，这个联动的过程就是 vue 的 数据响应式。
• Vue2 通过Object.defineProperty来实现数据响应式。

3.响应式网页

如果改变网页窗口大小，网页内容发生改变，那么这就是一个响应式网页。

4.易出现的问题

在如下代码中必须要有一个 ​n，才能够监听和代理obj.n。如果说前端开发者在写代码的过程当中，忘记了给​n​怎么办？

Object.defineProperty(obj,"n",{...})

1）情形：

• 情形1:vue会给出一个警告

new Vue({
  data: {},
  template: `<div>{{n}}</div>`
}).$mount("#app");

在这里，​data是一个空的，然后再写了一个​n，Vue一旦发现是​undefined​​或者是​null​​它都一律不显示在页面上。

此时，控制台会出现一个报错：“属性或者方法n 没有定义在实例上面，但是你却引用了它。”Vue依然会正常的去执行这些代码，但是当它渲染到div的时候却发现找不到n，所以不能再没有定义n的情况下进行使用。

• 情形2:Vue只会检查第一成属性。

new Vue({
  data: {
    obj: {
      a: 0 // obj.a 会被 Vue 监听 & 代理
    }
  },
  template: `
    <div>
      {{obj.b}}
      <button @click="setB">set b</button>
    </div>
  `,
  methods: {
    setB() {
      this.obj.b = 1; 
    }
  }
}).$mount("#app");

这次将a放在​data​对象里，然后在页面中显示对象的b，这样可以避开Vue的警告。

因为Vue在检查的时候只检查了第一成也就是​data​部分， 正常来说的话，Vue会正常的监听​data​，同时也会正常的监听​a​，只要写了都会进行监听。

如果我们对​vue.obj.a​进行变换，是可以正常的翻译到这个视图里面的，但是这里写的是​obj.b，当​button​按钮被点击将会触发​setB​，然后将1赋值给b并展示在页面上面。

答案当然是没有反应，因为一开始只告诉了​vue ​obj​里面有一个a，vue当然就只监听了​obj​里面的a，b自然就不存在了。

2）解决办法：

Vue有新提供api，​Vue.set​和​this.$set

 //接上面代码 
methods: {
    setB() {
      //this.obj.b = 1; 老代码 
      Vue.set(this.obj,"b",1)
    }
}

如果一开始知道这个b是不存在的，那么我们在使用的时候就先通知一下vue，我要​set​ ​ob​j的一个新的值进去，然后再把值给带上去。

这样子点击​button​就能实现触发​setB​，然后新的值显示在页面上面。因为新增key会自动创建代理和监听，并且触发UI更新（但是并不会立即更新）。

5.在 data 中的属性

1）数据属性

数据属性包含一个数据值的位置，在这个位置可以读取和写入值，数据属性有 4 个描述其行为的特性

• configurable：是否可 delete 属性，从而定义新属性，默认值 true
• enumerable：是否可枚举，通过 for in 循环读取属性，默认值 true
• writable：是否可修改属性的值
• value：属性的数据值，默认值 undefined

2）访问器属性

访问器属性不包含数据值，它们包含一堆 getter 和 setter 函数（非必须），访问器属性有如下 4 个特性

• configurable：是否可 delete 属性，从而定义新属性，默认值 true
• enumerable：是否可枚举，通过 for in 循环读取属性，默认值 true
• get：读取属性时调用的函数，默认值 undefined
• set：写入属性时调用的函数，默认值 undefined