Vue里使用watch监听属性变化的基础方法,和在父子组件里常见的坑

发表日期: 2021-11-10
文章位置: 首页 / 经验分享 / Web经验分享

原数据:

queryData: {
    name: '',
    creator: '',
    selectedStatus: '',
    time: [],
},

1我要监听queryData

watch: {
    queryData: function(newVal,oldVale) {
        //do something
    },
},

注意这里要用functio(){}写法,千万不能用简化的()=>{}语法!!!原因不知道,实践的坑就是如此。

2我要监听queryData里的name

2.1使用deep全监听(不推荐)

watch: {
    queryData: function(newVal,oldVal) {
        console.log(queryData.name)
    },
    deep: true //增加deep,表示监听里面所有嵌套的对象
},

2.3针对监听(推荐)

刚才的deep设为了true,这样的话,如果修改了这个queryData中的任何一个属性,都会执行handler这个方法。不过其实这样开销是蛮大的,尤其是对象里面结构嵌套过深的时候,所以可以优化一下

watch: {
    'queryData.name': function(newVal,oldVal) {
        //do something
    },
},

举例:ElementUi的日期控件清空时间,会导致值变null,需要修正

watch: {
    'form.SendTime': function(newVal,oldVal) {
        if(newVal == null){
            this.form.SendTime=''
        }
    },
},

2.3巧用计算属性

computed+watch的方案

computed: {
    aaa: function() {
        return this.queryData.name
    }
},

watch: {
    aaa: function(newVal,oldVale) {
            //do something
    },
},

注意computed里也不能用=>{}箭头语法,因为它会指向window作用域,而不是vue,导致报错


3v-if与子组件的watch的联动坑

之前犯了一个错误,在弹窗功能里发现的:

  1. 父页面用v-if去控制弹窗子组件是否显示,并希望把父组件的客户ID传递给弹窗使用

  2. 但是发现,v-if后出现的子组件,根本watch不到父组件传递过来的客户ID

  3. 因为传递的数据,子组件生成前已经到达,当watch监听时,已经是结果数据,没发生变化,所以不触发事件

  4. 正确的做法,是直接把客户ID,在子组件的data里赋值,或者直接用,不需要再监听了


那为什么有时候子组件有需要watch父组件某个参数呢?

答案:那是因为初次生成后,父组件改数据,子组件不能及时知道,传递要时间,所以要watch监听,及时响应



随便看看

Copyright © 2016-2022 江门蓬江区华越科技公司 版权所有 | 承接软件定制开发,欢迎联系
粤ICP备17073215号