zoukankan      html  css  js  c++  java
  • 【vue开发问题-解决方法】(七)Vue不能检测到对象属性添加或删除 ,vue不能检测到数组的变动问题

    由于JavaScript的限制,Vue不能检测对象属性的添加或删除。

    vue实现数据双向绑定有这么一个过程:当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty() 把这些属性全部转为getter/setter。每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。实现数据data变化更新视图view。

    因为若一个对象的属性没有在data中声明,则他就不是响应式的。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,这样的话这个对象属性就是响应式的。而执行这个过程必须在data中声明才会有。

    var vm = new Vue({
        data:{
            a:1// vm.a 是响应的
    
        }
    })
    vm.b = 2;// vm.b 是非响应的

    要解决这个问题需要用Vue.set(object, key, value)或者vm.$set方法(全局 Vue.set 方法的别名)

    Vue.set(vm.someObject, 'b', 2);
    //或者
    this.$set(this.someObject,'b',2);

    由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 
    * 当使用索引直接设置一个项时,例如: 

    vm.items[indexOfItem] = newValue;
    
    解决---->
    Vue.set(vm.items,indexOfItem,newValue) / vm.items.splice(indexOfItem, 1 , newValue)

    * 当你修改数组的长度时,例如: 

    vm.items.length = newLength;

    解决---->
    vm.items.splice(newLength)
  • 相关阅读:
    socket 编程
    空间配置器
    线程
    Linux系统编程——进程替换:exec 函数族
    linux粘着位
    exit函数与_exit
    [smart210] 定时器与PWM
    [smart210] s5pv210的中断体系
    [smart210] Nand Flash K9F4G08U0B 的配置与读写控制(二)
    [smart210] Nand Flash K9F4G08U0B 的配置与读写控制(一)
  • 原文地址:https://www.cnblogs.com/qiuyueding/p/9202835.html
Copyright © 2011-2022 走看看