zoukankan      html  css  js  c++  java
  • Vue之$set使用

    背景

    后端参与前端开发的小白,在开发过程中遇到了如下情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。

    官方文档中是这样描述的:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

    解决方案

    官方给出了如下解决方案:

    Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上:

    Vue.set(vm.obj, 'e', 0)
    

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

    this.$set(this.obj,'e',02)
    

    Vue不能检测数组变动

    例如下面两种情况:

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

    举个例子:

    var vm = new Vue({
      data: {
        items: ['a', 'b', 'c']
      }
    })
    vm.items[1] = 'x' // 不是响应性的
    vm.items.length = 2 // 不是响应性的
    
    

    为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:

    // Vue.set
    Vue.set(vm.items, indexOfItem, newValue)
    // Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)
    

    你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:

    vm.$set(vm.items, indexOfItem, newValue)
    

    为了解决第二类问题,你可以使用 splice:

    vm.items.splice(newLength)
    
  • 相关阅读:
    C 获取编译日期函数
    C# HttpWebRequest 使用,一个Http分析Demo
    C# 字节序调整
    char/wchar_t之间的互转MultiByteToWideChar和WideCharToMultiByte的用法
    前导声明代替头文件依赖和交叉包含
    MFC network address control使用
    [收藏]POSIX标准
    带引用计数的智能指针
    C# string byte[] 转换
    DIV随鼠标滚动
  • 原文地址:https://www.cnblogs.com/junjiang3/p/10758516.html
Copyright © 2011-2022 走看看