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


相关推荐

  • wsus补丁服务器搭建_搭建局域网自动更新服务器

    wsus补丁服务器搭建_搭建局域网自动更新服务器1、搭建wsus补丁服务器,在微软官网下载安装包WSUS30-KB972455-x64.exe,地址为:http://www.microsoft.com/en-us/download/details.aspx?id=52162、建议wsus补丁服务器部署在loggetter上,这样省得再买一个winserver2008正版授权,而且就算loggetter故障了,是对整个桌面云…

    2022年10月24日
    0
  • SCTP详解

    SCTP详解转载自:IBM中文官网sctp部分,代码下载地址:http://www.ibm.com/developerworks/apps/download/index.jsp?contentid=163181&filename=l-sctp-msdemo.zip&method=http&locale=zh_CN作者:M.TimJones是一名嵌入式软件工程师,他是 GNU/LinuxAppl

    2022年6月29日
    23
  • Oracle列转行函数LISTAGG() WITHIN GROUP ()的使用方法

    Oracle列转行函数LISTAGG() WITHIN GROUP ()的使用方法前言:最近在写一些比较复杂的SQL,是一些统计分析类的,动不动就三四百行,也是首次写那么长的SQL,有用到一些奇形怪状的SQL函数,在这里结合网上的例子做一些笔记,以后用到不记得用法可以翻出来看!1.基础用法:LISTAGG(XXX,XXX)WITHINGROUP(ORDERBYXXX),就像聚合函数一样,通过Groupby语句,把每个Group的一个字段,拼接起来…

    2022年10月24日
    0
  • “2014比赛现场招”开始,个人网站的完全访问权限“举”时代?

    “2014比赛现场招”开始,个人网站的完全访问权限“举”时代?

    2022年1月1日
    45
  • java事务回滚案例_java事务控制

    java事务回滚案例_java事务控制疑问,确实像往常一样在service上添加了注解 @Transactional,为什么查询数据库时还是发现有数据不一致的情况,想想肯定是事务没起作用,出现异常的时候数据没有回滚。于是就对相关代码进行了一番测试,结果发现一下踩进了两个坑,确实是事务未回滚导致的数据不一致。下面总结一下经验教训:Spring事务的管理操作方法编程式的事务管理实际应用中很少使用通过

    2022年8月30日
    3
  • ntp服务器udp协议,golang实现NTP协议获取服务器时间[通俗易懂]

    ntp服务器udp协议,golang实现NTP协议获取服务器时间[通俗易懂]//fileprojectmain.gopackagemainimport(“encoding/binary””fmt””net””os””os/signal””sync””time”)const(NTP_SERVER_IP=”time.windows.com”/*NTPIP*/NTP_PORT_STR=”123″/*NTP专用端口号字符串*…

    2022年8月31日
    0

发表回复

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

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