美文网首页
【vue】为什么要使用Vue.$set(target,key,v

【vue】为什么要使用Vue.$set(target,key,v

作者: SophieRabbit | 来源:发表于2020-09-03 15:59 被阅读0次

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()对于数组的处理其实就是调用了splice方法。splice是vue中的变异数组方法,添加了get和set后会引起视图响应。

变异数组: https://blog.csdn.net/qq_34865249/article/details/94893352

if (Array.isArray(target) && isValidArrayIndex(key)) {

  target.length = Math.max(target.length, key)

  target.splice(key, 1, val)

  return val

 }

https://www.jb51.net/article/171869.htm

相关文章

网友评论

      本文标题:【vue】为什么要使用Vue.$set(target,key,v

      本文链接:https://www.haomeiwen.com/subject/mmowsktx.html