• 关于vue无法侦听数组及对象属性的变化的解决方案


    参考博文

    https://ainyi.com/51

    https://blog.csdn.net/qq_38280242/article/details/102807862

    watch一般是可以监听变量的变化的,但是对于数组或者对象在某些特定情况下是无法监听到的。这种情况其实和双向绑定的原理有关。Vue双向绑定原理是利用js中的Object.defineproperty重定义对象的GET和SET方法,而同时这种方法存在着缺陷,就是只能监听到对象内已有的值。详细可见官方文档https://cn.vuejs.org/v2/guide/reactivity.html

    一、数组

    1、可以监听到的情况

    如push、splice、=赋值(array=[1,2,3])

    2、无法监听到的情况

    使用下标修改某个元素(这种比较常见)

    array[index] = 1
    
    object.a = 3

    直接修改数组length

    array.length = 5

    3、解决方案

    • this.$set(array, index, data) - 这是个深度的修改,某些情况下可能导致你不希望的结果,因此最好还是慎用
    this.dataArr = this.originArr
    this.$set(this.dataArr, 0, {data: '修改第一个元素'})
    console.log(this.dataArr)        
    console.log(this.originArr)        //同样的 源数组也会被修改 在某些情况下会导致你不希望的结果
    • 上面提到的splice方法进行增删改
    • 利用临时变量进行中转
    let tempArr = [...this.targetArr]
    tempArr[0] = {data: 'test'}
    this.targetArr = tempArr

    二、对象

    对象和数组都是js里的引用类型,在实际存储中,数据是存储在堆中的,利用存储在栈里的对象名或者数组名的指针进行索引,因此也存在在浅拷贝和深拷贝以及等号赋值时,到底是仅仅新建了一个指针指向了同一份数据,还是两个指针分别指向了两份完全一样的数据的问题

    这部分内容参考https://juejin.im/post/59ac1c4ef265da248e75892b

    1、可以监听到的

    对象的直接=赋值

    this.obj = {name: 'test'}

    2、无法监听到的

    对象属性的增删改

    obj: {
        prop1: 'data1',
        prop2: 'data2'
    }
    ...
    //
    this.obj.prop3 = 'data3'
    //
    delete this.obj.prop1
    //
    this.obj.prop1 = 'data4'

    3、解决办法

    • this.$set(obj, key ,value) - 可实现增、改
    • watch时添加deep:true深度监听,只能监听到属性值的变化,新增、删除属性无法监听
    this.$watch('blog', this.getCatalog, {
        deep: true
        // immediate: true // 是否第一次触发
      });
    • watch时直接监听某个key
    watch: {
      'obj.name'(curVal, oldVal) {
        // TODO
      }
    }
    • object.assign()+直接=赋值
    this.watchObj = Object.assign({}, this.watchObj, {
      name: 'xiaoyue',
      age: 15,
    });
  • 相关阅读:
    Vue var 变量 按数字形式 加 1
    vue 向服务器端请求得到 json数组 赋到列表中
    Vue 列表 增删改 前端代码
    Vue中实现清空数组 和 清空 eltable
    JS/Jquery遍历JSON对象、JSON数组、JSON数组字符串、JSON对象字符串
    vue 模拟后台返回json数组,赋在页面数据json的列表中
    PCA
    EXCEL如何判断两个单元格是否一致
    Ubuntu安装winehq最新版
    使用格式工厂压缩视频
  • 原文地址:https://www.cnblogs.com/sue7/p/11088696.html
Copyright © 2020-2023  润新知