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)
  • 相关阅读:
    CentOS8下安装mysql8
    Git使用
    《操作系统导论》读书笔记
    《Linux命令行大全》读书笔记
    Centos8 开机后显示 Activate the web console with: systemctl enable --now cockpit.socke
    numpy学习笔记
    CentOS8使用阿里源
    Python 面向对象
    matplotlib解决不显示中文问题
    MySQL基础第三课
  • 原文地址:https://www.cnblogs.com/web-fengmin/p/7048853.html
Copyright © 2011-2022 走看看