vue数据监听

关于数据监听，vue提供了两种方式watch和computed（计算属性）

常规用法

watch:{
    id(newVal,oldVal){
        // do somethings ...
    }
}

深层监听

// 深度监听，可监听到对象、数组的变化
watch:{
    obj:{
        deep: true, // 监听多层对象或者数组
        immediate: true, // 立即生效
        handler: (newVal, oldVal) => {
            // do somethings ...
        },
    }
}

资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

配合生命周期

// 有的时候我们会使用使用多个组件进行传值，在watch到变化的时候往往监听的组件还没有加载完成这时候就需要配合生命周期使用
mounted(){
    this.$watch('obj', (newVal,oldVal) => {
        // do somethings...
    }, { deep: true, immediate: true })
}

配合computed（计算属性）监听vuex变化

 

watch:{
    nodesList: {
        immediate: true,
        deep: true,
        handler (val) {
            // do somethings...
        }
    },
},
computed:{
    obj() {
        return this.$store.state.obj
    },
}