watch 监听

export default {
    data() {
        return {
            name: 'Joe',
            studen: {
                name: 'Joe',
                skill: {
                    run: {
                        speed: 'fast'
                    }
                }
            },
            name2: 'Joe'
           
        }
    },
    watch: {
        name: {
            handler: 'sayName',
            immediate: true  // 立即执行,
        }, 
        studen: {
            handler: 'sayName',
            deep: true // 深度监听，实现原理：Vue 内部对需要 deep watch 的属性会进行递归的访问，而在此过程中也会不断发生依赖收集。（只要此属性也是响应式属性）
        },
        name2: [   // 触发监听执行多个方法
            'sayName1',
            function(newVal, oldVal) {
                this.sayName2()
            },
            {
                handler: 'sayName3',
                immaediate: true
            }
        ]
    },
    methods: {
        sayName() {
            console.log(this.name)
        },
        sayName1() {
            console.log('sayName1==>', this.name)
        },
        sayName2() {
            console.log('sayName2==>', this.name)
        },
        sayName3() {
            console.log('sayName3==>', this.name)
        }
    }
}