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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 传感器开发流程!_传感器工艺流程

    传感器开发流程!_传感器工艺流程今天公司要求我进行传感器的开发,而且只给2天时间,反映下自己没做过这方面可能需要时间延长下,不管,就给你两天时间!干不完就使劲加班…现在企业压榨劳动力太赤裸裸了

    2022年9月29日
    2
  • 页面自动跳转的两种常用方法

    页面自动跳转的两种常用方法

    2021年7月2日
    89
  • python open函数返回值_open函数 · intermediate-python · 看云

    python open函数返回值_open函数 · intermediate-python · 看云#open函数#`open`函数[open](http://docs.python.org/dev/library/functions.html#open)函数可以打开一个文件。超级简单吧?大多数时候,我们看到它这样被使用:~~~f=open(‘photo.jpg’,’r+’)jpgdata=f.read()f.close()~~~我现在写这篇文章的原因,是大部分时间我看到`ope…

    2022年5月9日
    91
  • linux navicat 在线激活码 2021(注册激活)

    (linux navicat 在线激活码 2021)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html1STL5S9V8F-eyJsaWNlbnNlSW…

    2022年3月27日
    225
  • 最全静态网页模板网站下载_网页首页内容模板

    最全静态网页模板网站下载_网页首页内容模板前言最近好多人私信我:我学了不久前端,想要用一些项目实战来练练手。那么,我以后将定期更新静态网页实战,专用于提供初学者的练习。那么这次博客为大家提供一些模板网站,希望初学者借鉴和学习优质资源:以下网站对于初学者的作用:提供免费的静态网页下载提高自己的css+html5设计水平http://sc.chinaz.com/moban/“站长素材”网站中包括大量的免费模板,可任意下载。…

    2025年9月15日
    5
  • 2020最全JVM垃圾回收机制面试题整理,阿里面试官最爱问的都在这里了(附答案)

    2020最全JVM垃圾回收机制面试题整理,阿里面试官最爱问的都在这里了(附答案)前言为什么需要垃圾回收首先我们来聊聊为什么会需要垃圾回收,假设我们不进行垃圾回收会造成什么后果,我们举一个简单的例子我们住在一个房子里面,我们每天都在里面生活,然后垃圾都丢在房子里面,又不打扫,最后房子都是垃圾我们是不是就没法住下去了。所以JVM垃圾回收机制也是一样的,当我们创建的对象占据堆空间要满了的的时候我们就对他进行垃圾回收,注意java的垃圾回收是不定时的,c语言的是需要去调用垃圾回收方法刚刚也说到上面举的例子也说到假设一个房子都被垃圾堆满了那么我们没法住人了那么我们是不是会告

    2022年5月25日
    35

发表回复

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

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