前端培训丁鹿学堂：快速了解使用vue的watch

watch在vue中是监听器的意思。

他可以监听一个属性，当属性发生变化的时候执行某些操作。

基本操作：

watch是一个对象，监听的属性是一个函数，参数分别是新的值和旧的值

const app = Vue.createApp({
    data(){
        return {
            name:'zhangsan',
            n:1
        }
    },
    watch:{
        n(newValue,oldValue){
            console.log(`${oldValue}=>> ${newValue}`)
        }
    },
    template:`
        <div>你好我是vue组件</div>
        <input v-model="n">
       
    `
})
app.mount('#app')

如上代码所示, 只有当n的值有发生改变时, watch中的n函数才会执行.

watch进阶

watch还有复杂一点的用法，就是监听的属性不作为函数，而是作为对象。他就有一些参数可以控制了，让watch功能更强大。

handler:就是监听的属性发生改变的时候的执行函数，参数也是第一个是改变后的，第二个是改变前的

deep：true 表示深度监听，当监听的是一个对象的属性的时候，要设置deep为true才监听的到。

immediate是否第一次监听。当页面初始化的时候是不能触发watch，有时候需求是第一次加载就触发的话，要immediate设置为true

const app = Vue.createApp({
    data(){
        return {
            name:'zhangsan',
            msg:{
                n:1
            }
        }
    },
    watch:{
       "msg.n":{
        handler(newValue,oldValue){
            console.log(111)
            console.log(`${newValue} ==> ${oldValue}`)
        },
        deep:true,
        immediate:true
       }
    },
    template:`
        <div>你好我是vue组件</div>
        <input v-model="msg.n">
       
    `
})
app.mount('#app')