VUE DAY3 变异方法、计算属性和侦听器

动态添加的属性不是响应式的

（对于被Object.defineProperty修饰过的属性可以成为响应式属性。）
如果要向响应式对象中添加一个响应式的属性，且触发视图更新。
想要？如下：

//Vue无法探测普通的新增属性
this.myObject.newProperty = 'hi'

//破解方法 vm.$set(target, key, value)
this.$set(this.MyObject, 'newProperty', 'hi)

或

Vue.set(this.MyObject, 'newProperty', 'hi')

变异方法

变异方法（mutation method），会改变被这些方法调用的原始数组。
push()
pop()
shift()
unshift()
sort()
reverse()
调用以上变异方法的时候，会触发视图更新。

对应的，也有非变异方法（non-mutating method）
filter()
concat()
slice()
这些方法不改变原始数组，但是会返回一个新数组。

如果利用索引设置一个项，Vue是检测不到改动的。破解方法参考以上动态添加属性。

监听器

vue实例提供了一个watch属性，用于监听vue实例中属性的变化。

<script>
  var vm = new Vue({
    el:'...',
    data:{...},
    //watch对应了一个属性
    watch:{
      //msg:键，观察的属性
      //funtion:值，对应的回调函数
      msg:function(value, [oldvalue]){
        ...
      }
    }

  })
</script>

如果要监视一个对象中内部属性的改变，需要加上deep:true属性，否则vue无法监听到内部值的变化。

watch:{
  user:{
    deep:true,
    hander:funtion(curr, old){
      ...
    }
  }
}

添加immediate属性表示立马进行监听。

计算属性

当计算属性依赖的数据发生改变时，计算属性会重新计算一次，如果计算属性依赖的属性没有发生改变，那么计算属性就不会重新计算。

var vm = new Vue({ 
  el: '#app', 
  data: { n1:'', n2:'' }, 
  //n3依赖与n1和n2的值，当n1 和 n2发生改变的时候，这个函数就会执行。 
  //返回值就是n3的值 
  computed: { 
    n3(){ 
      return +this.n1 + +this.n2; 
    } 
  } 
});

计算属性是基于它们的依赖项进行缓存的，即上例中n3基于n1和n2进行了缓存，如果n1和n2的值没有发生改变，那么多次访问n3时，计算属性会返回之前的的计算结果，而不会再执行函数。
计算属性不能和data中的属性同名，因为无论是data属性还是计算属性，最终都是挂载到vm上的。

计算属性默认只有getter,不过在需要是可以自己设置一个setter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}