计算属性

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

基本使用

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

计算属性是基于它们的依赖项进行缓存的

如果页面中需要使用多次计算属性的值，只会计算一次，计算属性只有在它的相关依赖发生改变时才会重新求值。

计算属性不能与data中的属性同名，因为无论是data中的属性还是计算属性，最终都是挂载到vm上的

watch监视数据的变化

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

watch对应了一个对象，键是观察的属性，值是对应的回调函数。

基本使用

• 基本使用

//第一个参数：当前值
//第二个参数：上一次的值
username: function(curr, old) {

}

• 表单校验效果

// watch: 监视数据的变化
watch: {
    // 监视msg，只要msg属性的值发生改变，function就会执行
    // value: 当前值  oldValue:上一次的值
    msg: function(value) {
        if (value.length >=3 && value.length <= 6) {
            this.tips = '正确'
        } else {
            this.tips = '密码格式不正确'
        }
    }
}

监视对象

监视对象的时候，需要加上deep: true

为了发现对象内部值的变化，可以在选项参数中指定 deep: true 

• 如果是一个对象，无法监听到对象内部值的变化

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        user: {
          name:'zs',
          age: 18
        }
      },
      watch: {
        user: function(curr, old) {
          console.log(curr, old);
        }
      }
    });
  </script>


<input type="text" v-model="user.name">
<input type="text" v-model="user.age">

• 需要加上deep

watch: {
    user: {
        deep: true,
            handler: function(curr, old) {
                //注意：如果监听的是对象，新值与旧值都是相同的，因为指向了同一个对象。
                //https://cn.vuejs.org/v2/api/#vm-watch
                console.log(curr.age, curr.name);
            }
    }
}

• immediate 属性,立马进行监听

watch: {
    user: {
        deep: true,
        immediate:true,
        handler: function(curr, old) {
          console.log(curr.age, curr.name);
        }
    }
}