vue的watch:{}属性用法handler(v){},immediate,deep

export default {
    name:'index',
    props: {
        //从父组件过来的数据
        test: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            data: []
        }
    }
    watch: {
        //对这个数据进行监听
        test: {
            //默认(test是空数组)是不进行初次监听，要初次监听就immediate要设为true
            immediate: true,
            //如果test数组里面是多个对象，且对象中的属性发生变化，deep（是深度监听）设为true
            deep: true,
            handler(v) {//执行监听到的数据v（从父组件异步过来的数据）
                this.data = v
                console.log(v)//打印一下，你发现这里是一坨数据
            }
        }
    }
}

好啦，身为前端小菜鸡的我，就理解了这么多

更新一下，可以对象里面的某个属性，也可以监听计算属性

data(){
    return {
       obj:{
        name:'张三'
        }
    }
},
computed:{
    fun(){
        console.log('这里一堆代码')
    }
},
watch:{

    //监听对象里面的某个属性,一参是v新值，二参是old旧值
    'obj.name'(v,o){
       console.log('这里一堆代码')
    },

    //监听计算属性
    fun:{
        handler(v) {
         console.log('这里一堆代码')
        }
    }
}