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

 更新时间:2022年04月01日 10:10:19   作者:星海拾遗  
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性,下面这篇文章主要给大家介绍了关于Vue踩坑之Vue Watch方法不能监听到数组或对象值的改变的相关资料,需要的朋友可以参考下

前言

Vue不能监听到数组和对象值的变化其实和双向绑定的原理有关。Vue双向绑定原理是利用js中的Object.defineproperty重定义对象的GET和SET方法,而同时这种方法存在着缺陷。就是只能监听到对象内已有的值。在监听对象中属性变化的方法中中,无疑是 使用ES6的proxy更为优越。

同时我对Vue中不能监听到数组对象变化也做了试验。代码如下。

 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>`
    })

很简单的代码,设置按钮改变message,arr,obj的值,同时对这三个值的变化设置监听事件,测试结果如下。

视图显示三个值都发生了改变,但是Vue只监听到了第一个值的改变。

官方文档给出如下解释

对此Vue提供了解决办法。

Vue不能监听到数组变化官方文档中提出有以下有两种情况。

一:利用索引直接改变arr的值 如我在button事件中写的(arr[0]=1000)

解决方法 将this.arr[0]=1000改写为Vue可以监听的形式 this.$set(this.arr,0,1000)

this.$set接受三个参数,第一个是需要操作的数组对象,第二个是需要修改的数据的数组下标,第三个是修改后的值。

上图看效果。

将修改arr值得方法修改如下

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

成功监听

二:直接修改数组的长度 如this.arr.length=3 

来做个测试。我们用修改数组长度得方法删除数组中的值,看看watch能不能监听的到。

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

结果,监听不到。

解决方法使用js中数组方法arr.splice操作数组达到修改长度的目的。

看看效果

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

我们将数组的第一个值删除,此时数组的第二个值变成了arr[0],渲染到了页面中,watch监听成功。

Vue中无法监听对象属性的添加或者删除

解决方法:this.$set(obj,name,‘xxx’)对对象进行操作时,set接受三个参数,第一个为对象的名称,第二个为对象的key值,第三个为key对应的value值。

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')
            }
        },

控制台输出如下

那么问题来了,我改变的是对象的新值‘major’的值,请注意看我上面代码中method方法中的设置obj的代码。

此时Vue只是监听到了我改变了对象的新值。经过我测试,我改变对象的旧值,比如name值。Vue依然监听不到对象的变化。此时Vue提出了深度监听的方法如下。

但是这种方法经过我测试不能监听到对象新值的变化。

总结如下

总结:如果操作对象是数组,改变数组的值用Vue的$set方法,改变数组的长度用数组的splice方法使数组变化变成可监听的。如果操作对象是对象。如果操作的属性是对象内已经有的值,使用$watch,加上关键字deep深度监听对象,如果操作的属性是对象内没有的新属性。使用$set使对象变成可监听的!

到此这篇关于Vue踩坑之Vue Watch方法不能监听到数组或对象值的改变的文章就介绍到这了,更多相关Vue Watch方法不能监听数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用Vue.$set()或者Object.assign()修改对象新增响应式属性的方法

    使用Vue.$set()或者Object.assign()修改对象新增响应式属性的方法

    vue代码中,只要在data对象里定义的对象,赋值后,任意一个属性值发生变化,视图都会实时变化,这篇文章主要介绍了使用Vue.$set()或者Object.assign()修改对象新增响应式属性,需要的朋友可以参考下
    2022-12-12
  • vue 插槽简介及使用示例

    vue 插槽简介及使用示例

    这篇文章主要介绍了vue 插槽简介及使用示例,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • vue模块移动组件的实现示例

    vue模块移动组件的实现示例

    这篇文章主要介绍了vue模块移动组件的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 基于Vue生产环境部署详解

    基于Vue生产环境部署详解

    下面小编就为大家带来一篇基于Vue生产环境部署详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue在图片上传的时候压缩图片

    vue在图片上传的时候压缩图片

    这篇文章主要介绍了vue在图片上传的时候压缩图片,帮助大家缓解服务器压力,提高程序性能,感兴趣的朋友可以了解下
    2020-11-11
  • vue组件生命周期详解

    vue组件生命周期详解

    这篇文章主要为大家详细介绍了vue组件生命周期,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Vue 项目迁移 React 路由部分经验分享

    Vue 项目迁移 React 路由部分经验分享

    这篇文章主要为大家介绍了Vue 项目迁移 React 路由部分经验分享,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue-Cli 3.0 中配置高德地图的两种方式

    Vue-Cli 3.0 中配置高德地图的两种方式

    这篇文章主要介绍了Vue-Cli 3.0 中配置高德地图的两种方式,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 详解Vue.js Mixins 混入使用

    详解Vue.js Mixins 混入使用

    本篇文章主要介绍了Vue.js Mixins 混入使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue实现tab标签(标签超出自动滚动)

    vue实现tab标签(标签超出自动滚动)

    当创建的tab标签超出页面可视区域时自动滚动一个tab标签距离,并可手动点击滚动tab标签,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05

最新评论