zoukankan      html  css  js  c++  java
  • vue数据响应式的一些注意点

    有关对象属性值不触发视图更新的情况:

    Vue 不能检测到对象属性的添加或删除,由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

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

    方法一:您还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:

    this.$set(this.someObject,'b',2)

    方法二:创建一个新的对象,让它包含原对象的属性和新的属性

    // 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
    this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })



    有关数组数组值改变不触发视图更新的情况:

    1. 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
    2. 当你修改数组的长度时,例如:vm.items.length = newLength

    方法一:使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:

    // Vue.set
    Vue.set(vm.items, indexOfItem, newValue)
    方法二:使用数组原型链上的方法对数据进行修改
    // Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)
  • 相关阅读:
    实验5 函数
    实验4 在分支循环结构中调用自定义函数
    Play 内置标签
    POI 正常输出WORD 文档
    用户WORD模板写文件
    Spring 注解过滤
    Spring 循环依赖
    Spring 表单标签
    WebService 客户端生成服务端代码
    Jquery 常用函数
  • 原文地址:https://www.cnblogs.com/web-fengmin/p/7048853.html
Copyright © 2011-2022 走看看