$set()方法是手工将vue的属性变成响应式属性的方法吗?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了$set()方法是手工将vue的属性变成响应式属性的方法吗?相关的知识,希望对你有一定的参考价值。

是的,常用于给数组或者对象添加响应属性 参考技术A $set对于数组来说是更新,对于对象来说是将改属性变为响应式属性

Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新

一、为什么需要使用Vue.set?

  vue中不能检测到数组和对象的两种变化:

  1、数组长度的变化 vm.arr.length = 4

  2、数组通过索引值修改内容 vm.arr[1] = ‘aa’

  Vue.$set(target,key,value):可以动态的给数组、对象添加和修改数据,并更新视图中数据的显示。

  vue在构造函数new Vue()时,就通过Object.defineProperty中的getter和setter 这两个方法,完成了对数据的绑定。所以直接通过vm.arr[1] = ‘aa’的方法,无法修改值去触发vue中视图的更新,必须还得通过Object.defineProperty的方法去改变,而Vue.$set()就封装了js底层的Object.defineProperty方法。

  所以我们需要利用Vue.set() 响应式新增与修改数据。

二、Vue.set使用

  Vue不能检测到对象属性的添加或删除。

  由于Vue会在初始化实例时对属性执行getter/setter转化过程,所以属性必须在data对象上存在才能让Vue转换它,这样才能是响应式的。例如:

data () {
    return {
        form: {
            total: 10
        }
    }
}
 
// this.form.total是响应式的
 
// 若直接增加属性,是非响应式的
this.form.showFlag= true  //非响应式的

  使用Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上。Vue.set(this.form, ‘showFlag‘, true)

  还可以使用vm.$set实例方法,这也是全局Vue.set方法的别名:this.$set(this.form, ‘showFlag‘, true)

  这样,this.form.showFlag 就是响应式的了。

  Vue.set(target, key/index, value) 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.obj.newProperty = ‘hi‘)

  官方文档:https://cn.vuejs.org/v2/api/#Vue-set

Vue.set( target, propertyName/index, value )

  • 参数

    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value
  • 返回值:设置的值。

  • 用法

    向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi‘)

    注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。意思是,set 这个方法只能用于data 里面的子数组对象,而不能直接用于data (这个根数据)或者vue 实例

var vm = new Vue({
el:"#div",
  data: {
    items: [a, b, c]
  }
});
 
Vue.set(vm.items,2,"ling")

  设置数组元素:Vue.set(vm.items, 2, "ling") 表示把 vm.items  这个数组的下标为2 的元素,改为"ling",把数组  ["a","b","c"] 修改后是 ["a","b","ling"]

 

以上是关于$set()方法是手工将vue的属性变成响应式属性的方法吗?的主要内容,如果未能解决你的问题,请参考以下文章

vue2响应式原理总结

如何给一个响应式数据添加一个属性 this.$set

$set 的 用法

vue中 数组通过循环添加新属性页面不更新

Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新

vue2源码-- Vue.set和Vue.delete