Vue监视属性

Vue监视属性

监视属性：watch

computed和watch之间的区别:
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能computed不一定能完成，例如:watch可以进行异步操作。
两个重要的小原则:
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成简头函数，这样this的指向才是vm或组件实例对象。

示例：

<div id="app">
    <input type="text" v-model="name"><br>
    <hr>
    <span>{{numbers.a}}</span><br>
    <button @click="numbers.a++">修改numbers.a的值</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;   //阻止vue在启动时生成生产提示

    const vm = new Vue({
        el: '#app',
        data: {
            name: 'A',
            numbers: {
                a: 1,
                b: 2
            }
        },
        methods: {
        },
        computed: {
            info:{
                get(){
                    return name + name
                },
                set(){

                }
            }
        },
        //监视属性
        watch: {

            name:{
                //name发生改变时会调用handler
                handler(newValue,oldValue){
                    alert('name被修改了，新值：' + newValue + '，旧值：' + oldValue)
                }
            },
            // 计算属性也能被监视
            info:{
                immediate:true, //初始化时让handler调用一下
                handler(newValue,oldValue){
                    alert('info被修改了，新值：' + newValue + '，旧值：' + oldValue)
                }
            },
            //监视多级结构中某个属性的变化
            'numbers.a':{
                handler(newValue,oldValue){
                    alert('numbers.a被修改了，新值：' + newValue + '，旧值：' + oldValue)
                }
            },
            //监视多级结构中所有属性的变化
            numbers:{
                deep:true,  //开启深度监视(默认不开启)
                handler(newValue,oldValue){
                    console.log('numbers被修改了')
                    //监视属性可以使用异步任务去维护数据，而计算属性不可以
                    setTimeout(()=>{
                        console.log(newValue)
                        console.log(oldValue)
                    },1000)
                }
            },
        }
    })

    // // 监视属性的另一种写法
    // vm.$watch('name',{
    //     handler(newValue,oldValue){
    //         alert('name被修改了，新值：' + newValue + '，旧值：' + oldValue)
    //     }
    // })
</script>