vue 笔记

watch

官网解释

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property；

watch 用于监听值的变化 ，再vue实例化时被加载；注意内部方法的定义不可以使用箭头函数；否则将出现函数的作用域问题，this 将不再指向vue 实例；
示例：

 data:{
     name:'',
     person:{
         age:18
     }
 },
 watch:{
     name(val, oldVal){//普通的watch监听；就是handler() 函数的简单写法 
         console.log("name: "+val, oldVal);
     },
      name{// 第一次被加载的时候就执行其内部逻辑
       　handler(newVal,oldVal) {
      　　// ...
    　　},
    　　immediate: true
     },
     //深度监听，可监听到对象、数组的变化 当我们需要监听对象或者数组的属性变化时则使用该种方式；此方式会给对象内部的每一个属性都加上一个监听器每一个值发生变化的时候都会执行handler() 函数； 只需要设置deep:true即可
     person:{
         handler(val, oldVal){
             console.log("b.age: "+val.age, oldVal.age);
         },
         deep:true //true 深度监听
     },
     // 当我们不需要深度监听对象内所有的属性值时则可以使用这种写法；
       person.age:{
         handler(val, oldVal){
            　// ...
         },
         deep:true //true 深度监听
     },
      // 你可以传入回调数组，它们会被逐一调用
    name: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],


 }