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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • axios的安装和使用

    axios的安装和使用文章目录一、axios介绍二、安装axios三、案例一、axios介绍什么是axios?Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。特性:1、从浏览器中创建XMLHttpRequests2、从node.js创建http请求3、支持PromiseAPI4、拦截请求和响应5、转换请求数据和响应数据6、取消请求7、自动转换JSON数据8、客户端支持防御XSRF浏览器支持:二、安装axios方法一:速.

    2022年10月22日
  • MySql数据库导入sql错误 Unknown collation: ‘utf8mb4_0900_ai_ci‘

    MySql数据库导入sql错误 Unknown collation: ‘utf8mb4_0900_ai_ci‘

  • 风控模型的基础知识

    风控模型的基础知识风控模型根据设定的y变量与可获得的x变量不同,大致可以分为三类:即A卡,B卡,C卡。今天就让我们聊聊三者的区别。1、A卡(Applicationscorecard)A卡即申请评分模型,此类风控模型的目的在于预测申请时点(申请信用卡、申请贷款)未来一定时间内逾期的概率。Y变量的设定观察点为申请时点,定义为表现期内是否逾期。X变量一般只有客户填写的申请书信息,加上外部查询的数据与征信报告。2、B卡(Behaviorscorecard)B卡即行为评分模型,此类风控模型的目的在于预测使用时点(获得贷

  • Java三种方式实现发送xml参数的WebService接口调用

    Java三种方式实现发送xml参数的WebService接口调用项目开发中与第三方系统数据对接遇到的问题,仅用作记录。1.使用cxf调用(联调时没有收到响应信息)JaxWsDynamicClientFactoryclientFactory=JaxWsDynamicClientFactory.newInstance();logger.info(JSON.toJSON(todoInfo));Clientclient=clientFacto…

  • 求一个手机淘宝直播中抢购的脚本,急「建议收藏」

    求一个手机淘宝直播中抢购的脚本,急「建议收藏」要求,手机淘宝直播中不管上架什么东西,我都是第一个购买成功的!天灵灵地灵灵,太上老君急急如律令,大神来>o<

  • 关于java的外语文献_java英文参考文献(涵盖3年最新120个)

    关于java的外语文献_java英文参考文献(涵盖3年最新120个)近年来,随着我国科学的技术的飞速发展,计算机语言的内容和形式得到了极大的丰富,特别是java语言的广泛应用,它不仅是计算机语言的重要组成部分,同时也是我国程序编写的重要内容之一,java语言的出现和广泛使用,极大的丰富了人们的生产,生活,为人们的工作和学习提供了很大的便利.下面是搜素整理的java英文参考文献的分享,供大家借鉴参考。java英文参考文献一:[1]AbbasMrAnsar,Eli…

发表回复

您的电子邮箱地址不会被公开。

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