美文网首页
Vue 中的 set 和 $set 的原理是什么,是怎么实现的?

Vue 中的 set 和 $set 的原理是什么,是怎么实现的?

作者: 指尖跳动 | 来源:发表于2020-03-08 22:35 被阅读0次

如下图所示,先进行一个判断,判断target不是undefined、null、string、number、symbol、boolean类型的数据。

  1. 如果target是一个数组,那么根据key值及数组长度更改数组的长度(取其中较大者),然后直接·
    使用splice函数修改数组,虽然vue没有监听数组变化,但是监听了数组的push,pop,shift,unshift,splice,sort,reverse函数,所以使用splice也可以达到更新dom的目的

  2. 如果target是一个对象,且key是对象已存在的私有属性,那么直接赋值就可以了,因为这个key必然是被监听过的

  3. 如果这个key目前没有存在于对象中,那么会进行赋值并监听。这里省略了ob的判断,那么ob是什么呢,vue中初始化的数据(比如data中的数据)在页面初始化的时候都会被监听,而被监听的属性都会被绑定ob属性,这里就是判断这个数据有没有被监听的。如果这个数据没有被监听,那么就默认你不想监听这个数据,所以直接赋值并返回

最后,$set就是set

Vue.prototype.$set = set;

相关文章

  • Vue 中的 set 和 $set 的原理是什么,是怎么实现的?

    如下图所示,先进行一个判断,判断target不是undefined、null、string、number、symb...

  • Vue数据响应思路(五)—— 实现Vue.set

    Vue.js 中, Vue.set 和 vm.$set 是一回事,其中 vm.$set 是 Vue.set 的别名...

  • set

    set实现原理 set的实现是基于map的。其实Set利用的就是Map中“键”不能重复的特性来实现的。 HashS...

  • $set 的实现原理

    vm.$set( target, propertyName/index, value ) 源码: 其中 defin...

  • Android面试Java基础篇(一)

    问:Java集合类List,Map,Set相关的实现原理。 答:List和Set都是Collection的子类 ...

  • 内存管理

    内存管理:一、属性的内存管理方式:其实就是手动生成set和get方法:必须了解set和get方法中的实现原理 二、...

  • vue 中的Vue.set 和 this.$set 的区别

    2019年8月14号上午,有个需求为,根据点击的按钮 联动一个下拉列表,如,点击“全部”,下拉列表显示所有的选项,...

  • vue中的$set

    在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新...

  • vue中的set

    Vue.set()在methods中也可以写成this.$set() 这个组件最后显示的界面如下: 当点击按钮之后...

  • vue中的$set

    当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;(如果在实例创建之后添加新的属性到实例上,...

网友评论

      本文标题:Vue 中的 set 和 $set 的原理是什么,是怎么实现的?

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