[前端暴龙机，Vue2.x 进化 Vue3 ] Day14.监听器

虽然之前提过的 计算属性 computed，就有监听的功能了，不过有时候我们仍需要一个属於自己定义的监听器，这时就可以使用到 watch 这个更通用的方法了~
点我复习 computed

watch 用法

var app = new Vue({
    el: '#app',
    data: {
        question: ''
    },
    watch:{
        // 把要观察的变数名称直接拿来使用
        question(){
            // 变动时要做的事 ...
        }
        
        // 也可以写成这样，可以依照需求
        question(newData, oldData){
            // 变动时要做的事 ...
            
            // watch 提供了两个参数可以使用
            // newData : 变更前的资料
            // oldData : 变更後的资料
        }
    },
    methods: {
    }
})

watch 的使用会是将我们想要监听的变数，在 watch 当成 function 来使用，所以当范例中 question 的值被改变，就会自动执行 watch 我们定义变动时要做的事

物件的监听

除了简单的变数之外，物件、computed计算後的回传值 或是阵列...等，也是可以监听，先来看看物件监听的写法

data:{
    member:{
        id:1,
        nickName:"Jerry"
    }
},
watch : {
    // 记得使用引号括起来
    'member.nickName' : function() {
        // do something ...
    }
}

深层监听

如果是阵列的话，一开始我们可能会只是个空阵列，等到我们接到值，才往里面丢资料，这时候就会用到深层监听的方式来监控阵列内内容的变化

data:{
    todos:[]
},
watch : {
    todos:{
        deep: true,
        handler() {
            // do something ...
        }
    }
}

深层的写法会比较不同，要记得加上 deep: true 来告知使用深层监听而非浅层监听

watch 的其他使用

对於 watch 的使用还有一些其他的使用方式跟介绍，像是 也可用来监听路由变化、Vue 实体初始化时叫用监听器、监听器的注销 ...等等，这边就没有多做介绍，有兴趣的可以再找找~

参考资料

Vue 官方文件
勇者斗 Vue 龙 监听器( watch )
博客园(颠覆者) Vue.js中 watch(深度监听)的最易懂的解释