浅谈vue的对象/数组更新及深度监听

<template>
    <div class="">
        <div class="">{{ obj }}</div>
        <div class="">{{ list }}</div>
        <span class="ys-btn" @click="changeAge">改变年龄</span>
        <span class="ys-btn" @click="addHeight">新增属性height</span>
        <span class="ys-btn" @click="changeList">改变list某值</span>
        <span class="ys-btn" @click="addList">新增list一个值</span>
    </div>
</template>

<script>
    export default {
        name:"ys_tooltips",
        data(){
            return {
                obj:{
                    name:"跃焱邵隼",
                    age:17
                },
                list:['小华','晓丽','大大']
            }
        },
        methods:{
            changeAge(){
                // this.obj.age="18" //可以这样监听对象/数组的属性改变
                this.$set(this.obj,'age',18); //Vue.set( target, key, value )
            },
            addHeight(){
                // this.obj.height="180" //vue无法这样监听对象及数组的属性新增/删除；所以需要使用vm.$set的方式
                this.$set(this.obj,'height',"180") //Vue.set( target, key, value )
            },
            changeList(){
                this.$set(this.list,0,'小乔'); //Vue.set( target, key, value )
            },
            addList(){
                this.$set(this.list,this.list.length,"小河") //Vue.set( target, key, value )
            }
        },
        mounted(){

        },
        watch:{
            obj:{
                handler(newVal,oldVal){
                    this.ysvDirect.message({
                        type:'tip',//默认
                        msg:"obj is change:"+JSON.stringify(newVal),
                        face:'wow',//cry,smile,wow
                        // during:3000
                    })
                }
                ,deep:true //深度监听 监听数组对象的属性增删改查
            },
            list:{
                handler(newVal,oldVal){
                    this.ysvDirect.message({
                        type:'tip',//默认
                        msg:"obj is change:"+JSON.stringify(newVal),
                        face:'wow',//cry,smile,wow
                        // during:3000
                    })
                }
                ,deep:true //深度监听 监听数组对象的属性增删改查
            }，

          'obj.age':{ //只监听 某个属性的变化。避免深度深度监听的深度遍历开销大；
                handler(newVal,oldVal){
                    this.ysvDirect.message({
                        type:'tip',//默认
                        msg:"obj is change:"+JSON.stringify(newVal),
                        face:'wow',//cry,smile,wow
                        // during:3000
                    })
                }
             }

        }
    }
</script>

/********************/

总结：

1：vue监听数组及对象属性的增删改查，应该使用深度监听；

2：当数组/对象的属性改变/新增时我们最好使用 this.$set（）方法。而不是直接赋值的方法（this.obj.age=''）因为直接赋值的方法，对于新增属性，vue监听不到；

3：深度监听，会深度遍历；为了减少开销，必要情况下，我们只监听相应某个属性值的变化就行了。如上