Vue踩坑之Vue Watch方法不能监听到数组或对象值的改变详解

 let vm = new Vue({
        el: '#app',
        data: {
            message: 'wxs',
            arr:[1,2,3],
            obj:{
                name:'wxs',
                age:21
            }
        },
        methods:{
            change:function () {
                this.message = 'vue'
                this.arr[0]=100
                this.obj.name='xxx'
            }
        },
        watch:{
            message:function (newValue,oldValue) {
                console.log('message改变了')
            },
            arr:function (newValue,oldValue) {
                console.log('arr改变了')
            },
            obj:function (newValue,oldValue) {
                console.log('obj改变了')
            }
        },
        template: `<div><div>{{message}}</div><div>{{arr[0]}}</div><div>{{obj.name}}</div><button @click="change()">改变!</button></div>`
    })

        methods:{
            change:function () {
                this.message = 'vue'
                this.$set(this.arr,0,100)
                this.obj.name='xxx'
            }
        },

        methods:{
            change:function () {
                this.message = 'vue'
                this.arr.length=0
                this.obj.name='xxx'
            }
        },

        methods:{
            change:function () {
                this.message = 'vue'
                this.arr.splice(0,1)
                this.obj.name='xxx'
            }
        },

this.obj=Object.assign（{}，this.arr，{
age：21，
major：'soft'
}）

methods:{
            change:function () {
                this.message = 'vue'              
                this.$set(this.arr,1,100)
                this.$set(this.obj,'major','Vue')
            }
        },