vue之观察者watch

前言：computed和watch区别

computed：监听多个数据或者一个数据来维护返回一个状态值，只要其中一个或多个数据发生了变化，则会重新计算整个函数体，重新返回状态值。(computed中监听的值可以不再data中设置，而watch要)
watch：只能一个一个监听数据，只要这个数据发生变化，就会返回两个参数，第一个是当前的值，第二个是变化前的值。每当变化的时候，则会触发函数体的逻辑行为，根据逻辑行为做后续的操作

Watch用法

Watch：它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。具体的用法可以直接看下面的示例，简单直接。　　

用法一：数组与对象都用handle
　　数组：

    data() {
        return {
            winChips: new Array(11).fill(0)   
        }
    },
    watch: {
　　    winChips: {
　　　　    handler(newValue, oldValue) {
　　　　　　    for (let i = 0; i < newValue.length; i++) {
　　　　　　　　    if (oldValue[i] != newValue[i]) {
　　　　　　　　　　    console.log(newValue)
　　　　　　　　    }
　　　　　　    }
　　　  　},
　　　  　deep: true  //开启深入监听，一般用于监听数组中的值；如果不开启，将只监听数组整体，而不会监听数组中的值
　　    }
    }

对象：

    data() {
    　　return {
    　　　　bet: {
    　　　　　　pokerState: 53,
    　　　　　　pokerHistory: 'local'
　　　　    }   
        }
    },
    watch: {
　　    bet: {
　　　  　handler(newValue, oldValue) {
　　　　　  　console.log(newValue)
　　　      　},
　　　      　deep: true   //开启深入监听，一般用于监听对象中的键对值
　  　  }
    }

其中如果要对对象中的键值进行监听，需要加引号

    data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　    }   
        }
    },
    watch: {
　　    'bet.pokerHistory':function(val,oldval){
                console.log(val+"aaa")
            }//键路径必须加上引号
    } 
    //通过这个办法可以直接监听对象中的某个键对值而不用deep。弊端是这里只能监听固定的键对值

用法二：正常的值

    data() {
        return {
           frontPoints: 0    
        }
    },
    watch: {
         frontPoints(newValue, oldValue) {
           console.log(newValue)
         }
    }

对handler方法和、immediate属性和deep属性的解析

handler：其实watch方法里面，都是默认用handler方法，不管你是否写了handler方法，因为VUEJS会处理这个逻辑，然后最终编译为handler

immediate：该属性一般和handler联用，当这个属性是true时，表示声明了handler所在监听的元素声明完了后就立即执行。如上面的例子数组中，我们将deep换成immediate属性后。当该watch声明完winChips后，会立即执行。

deep属性：当他为true时，为深入解析，一般用于数组与对象中。如果我们不用他，那么在一般情况下，我们只能监听到该对象的变化以及数组整体的变化，而不能深入监听对象里的键对值变化以及数组里的值的变化。

$watch API

该API可实现动态添加观察者watch以及动态删除。

动态添加

$watch的语法很简单：

vm.$watch(expOrFn(要监听的属性), callback, [options])

其中vm指的是Vue中的一个实例，就是我们的app。如，

let watch = app.$watch('count', function(newValue, oldValue){ 
    alert('Count changed from ' + oldValue + ' to ' + newValue + '!') 
    });

当我们要对data的对象中的键值进行监听时，有两种方法。
　　方法一：

app.$watch('person.name.firstName', function(newValue, oldValue){ 
    alert('firstName 从 ' + oldValue + ' 变成 ' + newValue + '!') 
    })

　　方法二：

app.$watch('person.name', function(newValue, oldValue){ alert('firstName从 ' + oldValue.firstName + ' 变成 ' + 'newValue.firstName' + '!') 
    }, {deep: true})
    //这里我们只监听到对象中的name。
    //但是如果我们想要监听到name中的firstname时，需要加个参数  deep: true

动态删除

setTimeout(function() { 
    watch();  //删除；把它当做函数运行一遍就相当于删除观察者
    }, 5000);  
    //watch运作5秒后删除