vue-响应式原理[通俗易懂]

vue-响应式原理[通俗易懂]1.vue响应式原理核心使用的API是:Object.defineProperty(obj,key,val)会对props和data、computed中的数组和对象都进行一个遍历,这个过程其实就是赋予数据set和get方法,让数据的访问和赋值有一些内部处理2.由于vue的核心使用的是Object.defineProperty,但是IE8及其以下版本是不兼容这个API的,并且也没有提供相关的API支持这个功能,因此这也是为什么vue项目不兼容的根本原因3.在对数组和对象进行操作的过程中,会对对象进行一个

大家好,又见面了,我是你们的朋友全栈君。

1.vue响应式原理核心使用的API是:Object.defineProperty(obj,key,val)
会对props和data、computed中的数组和对象都进行一个遍历,这个过程其实就是赋予数据set和get方法,让数据的访问和赋值有一些内部处理

2.由于vue的核心使用的是Object.defineProperty,但是IE8及其以下版本是不兼容这个API的,并且也没有提供相关的API支持这个功能,因此这也是为什么vue项目不兼容的根本原因

3.在对数组和对象进行操作的过程中,会对对象进行一个递归,因为对象中属性的值有可能还是一个对象,vue将数组和对象设置访问器属性分开做了两个方法进行的处理

4.源码中observe方法是递归的去执行检查是否是一个对象,是对象就递归,确保里面的每一个属性都得到了响应式的初始化

5.defineReactive方法就是具体的一个Object.defineProperty()的一个vue的封装了,也就是在这里进行的响应式的关键代码

6.所谓的自动化其实就是在get和set里面去做文章

7.其中get做的事情其实就是依赖收集:就是订阅数据变化的watcher的收集,这样在set的时候就会做一些更新这些watcher的操作,也就清楚的知道了在触发setter的时候,能知道应该通知哪些watcher去进行渲染

8.set()中发生的就是派发更新了,也就是对get()收集的依赖,进行精准更新的一个过程。当数据发生改变后,通知所有订阅了这个数据变化的watcher执行update

9.为什么我们给对象添加新属性的时候需要$set去设置,但是我们对数组的一些操作却能够直接更新。是因为vue重写了一些数组原型上的方法:push、pop、shift、unshift、splice、sort、reverse

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/132323.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • QT QList介绍及应用

    QT QList介绍及应用QList是目前最常用的容器类,它存储了给定类型的值的一个列表,而这些值可以通过索引访问。QList使用数组来实现,以确保进行快速的基于索引的访问。使用QList::append和QList::prepend在列表的两端进行添加项目。使用QList::insert()在列表的中间插入项目。实例:#include<QCoreApplication>#include<Q…

    2025年6月14日
    3
  • bs和cs开发架构的详细解析区别_BS与CS架构区别

    bs和cs开发架构的详细解析区别_BS与CS架构区别目前开发的基本架构。一、CS结构—-Client/Server1、开发者需要编写两个端点,一个是客户端程序,一个是服务端程序。举例:QQ、360等等。2、需要再客户机安装客户端的部分。3、弊端:客户端的维护比较麻烦,机器只要一重装,就需要重新安装该软件,同时升级也比较麻烦。后期有了一个解决方案:对于升级,可以通过网络升级的形式完成。4、好处:客户端的出现,可以

    2022年10月16日
    2
  • 【C语言】输入一组整数,求出这组数字子序列和中最大值

    【C语言】输入一组整数,求出这组数字子序列和中最大值

    2022年1月30日
    47
  • sql server可以定义的约束_常见约束类型及其约束反力

    sql server可以定义的约束_常见约束类型及其约束反力SQLserver常见的约束条件1.检查只能是男或者女Sexin(‘男,女’)),Sex=‘男’orsex=‘女’)2.在一个范围中间Sage>0andsage<120Sagebetween12and303.长度大于某个值len(pwd)>6)//pwd为密码字段4.数大于某个值Sage>15.只能是8位字符,前两…

    2025年6月5日
    3
  • python 字符串替换_python字符串替换的2种方法

    python 字符串替换_python字符串替换的2种方法一、python字符串替换可以用两种方法实现:1.用字符串本身的方法2.用正则来替换字符串下面用个例子来实验:a=’helloword’我把a字符串里的word替换为python1.用字符串本身的replace方法a.replace(‘word’,’python’)输出结果是hellopython2.用正则表达式来完成替换:importrestrinfo=re.compi…

    2022年5月15日
    41
  • Java如何快速入门?

    Java如何快速入门?转自:微点阅读https://www.weidianyuedu.com一、掌握静态方法和属性静态方法和属性用于描述某一类对象群体的特征,而不是单个对象的特征。Java中大量应用了静态方法和属性,这是一个通常的技巧。但是这种技巧在很多语言中不被频繁地使用。理解静态方法和属性对于理解类与对象的关系是十分有帮助的,在大量的Java规范中,静态方法和属性被频繁使用。因此学习者应该理解静态方法和属性。Java在方法和属性的调用上是一致的,区别只表现在声明的时候,这和c++是不同的。二、重视接口..

    2022年6月1日
    37

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号