vue数据监听

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

常规用法

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

深层监听

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

配合生命周期

// 有的时候我们会使用使用多个组件进行传值，在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
    },
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_5414