首页 > 其他分享 > 你知道Vue响应式数据原理吗

你知道Vue响应式数据原理吗

时间:2022-11-05 11:01:01浏览次数:84  
标签:Vue watcher 响应 getter 组件 原理 data 属性

1. Vue2的响应式式原理主要是通过Object.defineProperty的方法里面的setter和getter方法的观察者模式来实现。也就是在组件的初始话阶段给每一个data属性都注册一个setter和getter,然后再new一个watcher对象,这个时候会立即调用组件里面的render函数去生成一个虚拟的DOM,然后再调用render的时候,就会需要用的data的属性值,此时就会触发getter函数,把当前的watcher函数注册到sub里面。当data属性发生了改变后,就会立即遍历sub里面的每个watcher对象,通知他们重新渲染组件

2. Vue3的响应式原理主要是通过Proxy(代理)+Reflect(反射)来实现的

  通过 Proxy(代理) : 拦截对data任意属性的任意(13种)操作, 包括属性值的增删改查

 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

 

标签:Vue,watcher,响应,getter,组件,原理,data,属性
From: https://www.cnblogs.com/ltwlh/p/16859791.html

相关文章

  • Vue + Vite + Ts 学习笔记
    1、环境安装#创建项目$npminitvitevue-vite-tsNeedtoinstallthefollowingpackages:[email protected]?(y)y√Selectaframework:»V......
  • day26 Vue相关内容浅拷贝和深拷贝
    概述:Vue是前端的一个js库(诞生于2015年兴起于2016年尤雨溪(阿里巴巴)),vue是一个MVVM模式的框架。MVVM概述model数据view视图viewmodel视图模型(管理数据驱动视......
  • store文件夹的处理,vuex模块化modules
      index文件代码:importVuefrom"vue";importVuexfrom"vuex";//导入根gettersimportgettersfrom"./getters";//导入三个模块importappfrom"./modul......
  • DataV兼容vue3的方法
    发现问题在使用vue开发大屏时,发现了一个很好用的可视化组件库DataV,不是阿里那个DataV哈,用vue2开发时都一切顺利,直到有一天升级项目到vue3时,发现一堆报错,后面查了下,好像是D......
  • vue项目屏幕适配【帮我们自动将px单位转换成rem单位】
    ......
  • ThreadLocal的使用及原理解析
    #基本使用JDK的lang包下提供了ThreadLocal类,我们可以使用它创建一个线程变量,线程变量的作用域仅在于此线程内。<br/>用2个示例来展示一下ThreadLocal的用法。**示例一:*......
  • 文件操作以及IO流原理及流的分类
    文件1、什么是文件?文件是我们保存数据的地方。2、文件流文件在程序中是以流的形式来操作的。流:数据在数据源(文件)和程序(内存)之间经历的路径输入流:数据从数据源(文件)到......
  • 有没有开发过⼀些vue插件?举例说说 - 批量引入插件
    有过,项⽬开发的时间⻓了,沉淀了不少业务通⽤全局组件,想把他们统⼀进⾏注册,就封装了⼀个⼩插件当时其实⼀开始也没有什么思路,后来扒了⼀下elementUI的源码,仿了⼀下它的写......
  • Andorid view 绘制原理
    承接上一篇:​​AndroidView绘制原理​​blog新地址:进入​​newbie’shome​​1.Onlayout()对于自定义View,分为两种:1.是自定义控件(继承View类).2.是自定义布局容器(继......
  • vue-promise的概念
    Promise概述: Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息。 Promise是一个构造函数,所以可以new出一个Promise的实......