区别:

vue2.x:

实现原理:

  对象类型:Object.defineProperty()对属性的读取,修改进行拦截(数据劫持);

  数组类型:通过重写更新数组的一系列方法来进行拦截(对数组的变更方法进行了包裹)

    Object.defineProperty(data,"count",{
              get(){},
              set(){}
          })
 
vue3.0:
 实现原理:
  不管你是使用的ref还是reactive,底层都是使用proxy实现响应式
  通过proxy(代理):拦截对象中任意属性的变化,包括属性的添加,删除,改写等等;
  let person = {name:'小卢',age:18}

   const p = new Proxy(person,{
            // 查
            get(target,propName){
                // target:原来的对象
                // propName:当你读取对象中的哪个数据时,propName就是哪个,例如,你读取person中的name,propName在这里就代表name(对象里面对应的键)
                console.log(target,propName)
                return target[propName]   //因为是变量所有用[]
            },
            // 增,改
            set(target,propName,value){
                console.log(target,propName)
                // value:你修改的那个新的值
                target.propName = value
            },
            // 删
            deleteProperty(target,propName){
                return delete target[propName]    //删除propName这个属性
            }
        })
  reflect:对源对象进行操作(不详细介绍了,需要的自己可以百度,原理主要是上面那个)
vue2存在常见的问题:
1:新增属性,删除属性,页面不会进行更新,2:直接通过下标修改数组,界面不会自动更新
  vue3中则解决了vue2中上述提到的一些问题
 

vue2与vue3实现响应式的原理区别和提升的更多相关文章

  1. Vue3.0工程创建 && setup、ref、reactive函数 && Vue3.0响应式实现原理

    1 # 一.创建Vue3.0工程 2 # 1.使用vue-cli创建 3 # 官方文档: https://cli.vuejs.org/zh/guide/creating-a-project.html# ...

  2. Vue3.0 响应式数据原理:ES6 Proxy

    Vue3.0 开始用 Proxy 代替 Object.defineProperty了,这篇文章结合实例教你如何使用Proxy 本篇文章同时收录[前端知识点]中,链接直达 阅读本文您将收获 JavaSc ...

  3. 简单对比vue2.x与vue3.x响应式及新功能

    简单对比vue2.x与vue3.x响应式 对响应方式来讲:Vue3.x 将使用Proxy ,取代Vue2.x 版本的 Object.defineProperty. 为何要将Object.defineP ...

  4. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  5. Vue3.0响应式原理

    Vue3.0的响应式基于Proxy实现.具体代码如下: 1 let targetMap = new WeakMap() 2 let effectStack = [] //存储副作用 3 4 const ...

  6. Vue2源码解读 - 响应式原理及简单实现

    直接进入主题了,想必大家都知道实现vue响应式核心方法就是 Object.defineProperty,那就从它开始说 Object.defineProperty 缺点: 深度监听,需要递归到底,一次 ...

  7. vue2.0 之 深入响应式原理

    实例demo<div id="app"> <span>{{a}}</span> <input type="text" ...

  8. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  9. Bootstrap学习笔记-响应式布局原理

    响应式布局的原理就是利用css3中@media媒体来实现的 <html> <head> <meta charset="utf-8"> <t ...

随机推荐

  1. 138_Power BI&Power Pivot特殊半累加度量

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 半累加度量(semi-additive measure),在DAX建模分析的时候经常遇见:应用场景诸如银行存款. ...

  2. Full卷积、Same卷积、Valid卷积、带深度的一维卷积

    转载和参考以下几个链接:https://www.cnblogs.com/itmorn/p/11177439.html; https://blog.csdn.net/jack__linux/articl ...

  3. 我的 Java 学习&面试网站又又又升级了!

    晚上好,我是 Guide. 距离上次介绍 JavaGuide 新版在线阅读网站已经过去 7 个多月了(相关阅读:官宣!我升级了!!!),这 7 个多月里不论是 JavaGuide 的内容,还是 Jav ...

  4. 【SpringBoot】快速入门

    博客主页:准Java全栈开发工程师 00年出生,即将进入职场闯荡,目标赚钱,可能会有人觉得我格局小.觉得俗,但不得不承认这个世界已经不再是以一条线来分割的平面,而是围绕财富旋转的球面,成为有钱人不是为 ...

  5. BUUCTF-另一个世界

    另一个世界 010editor 打开最下方发现011开头字符串,应该是二进制 得到flag 看也有师傅写的是说八个一组转ascii码,现在也不是很理解啥意思.贴一下其他师傅的python脚本,算出的结 ...

  6. Python爬虫+数据可视化教学:分析猫咪交易数据

    猫猫这么可爱 不会有人不喜欢吧: 猫猫真的很可爱,和我女朋友一样可爱~你们可以和女朋友一起养一只可爱猫猫女朋友都有的吧?啊没有的话当我没说-咳咳网上的数据太多.太杂,而且我也不知道哪个网站的数据比较好 ...

  7. TCP和UDP协议的区别以及原理

    参考文章https://blog.csdn.net/weixin_38483133/article/details/123864253

  8. MongoDB 的安装和基本操作

    MongoDB 的安装 使用 docker 安装 下载镜像: docker pull mongo:4.4.8(推荐,下载指定版本) docker pull mongo:latest (默认下载最新版本 ...

  9. 异构图神经网络笔记-Heterogeneous Graph Neural Network(KDD19)

    自己讲论文做的异构图神经网络的ppt.再转变成博客有点麻烦,所以做成图片笔记. 论文链接:https://arxiv.org/abs/1903.07293

  10. java,接口

    package Demo.oop.APP.Demo07; //interface 定义接口的关键字:接口都需要实现类 public interface UserService { //接口中的所有的定 ...