vue set方法_Vue 数据响应式

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

new Vue内部对data的代理和监听

• data的bug
  • 由于使用了Object.defineProperty(obj, 'n', {...}) ,必须要有'n',才能监听和代理mydata

Object.defineProperty(obj, 'n', {...}) & get(){} & set(){} 书写如下：

var _xxx = 0
Object.defineProperty(obj3,'xxx',{
		get(){
    	return _xxx
    },
  	set(value){
    	_xxx = value
    }
})//get，set对属性的读写进行监控

• 解决办法：刚开始的时候就声明 或者 使用Vue就提供的API
  • Vue.set & this.$set

//代码示例如下：

import Vue from "vue/dist/vue.js";
Vue.config.productionTip = false;

new Vue({
  data: {
    obj: {
      a: 0,           // obj.a 会被 Vue 监听 & 代理
      b: undefined    //刚开始的时候就声明
    }
  },
  template: `
    <div>
      {{obj.b}}
      <button @click="setB">set b</button>
    </div>
  `,
  methods: {
    setB() {
      // this.obj.b = 1;   
      Vue.set(this.obj, "b", 12);     //使用Vue就提供的API
      this.$set(this.obj, "b", 12);   //使用Vue就提供的API
      //上面2个函数一模一样
    }
  }
}).$mount("#app");

• 如果代理和监听的是数组的话，原理和处理方法：
  • 篡改数组的API,Vue 将被侦听的数组的变更方法进行包裹，使用 Vue 提供的数组变异 API 时，会自动添加监听和代理。

import Vue from "vue/dist/vue.js";
Vue.config.productionTip = false;
new Vue({
  data: {
    array: ["a", "b", "c"]
  },
  template: `
    <div>
      {{array}}
      <button @click="setB">set b</button>
    </div>
  `,
  methods: {
    setB() {
      this.array.push("d");        //用push方法添加
      console.log(this.array);
    }
  }
}).$mount("#app");

• 包裹原型的API如下：

this.array.push("d")