一.vue3新特性:

  1.数据响应重新实现(ES6的proxy代替Es5的Object.defineProperty)

  2.源码使用ts重写,更好的类型推导

  3.虚拟DOM新算法(更快,更小)

  4.提供了composition api,为更好的逻辑复用与代码组织

  5.自定义渲染器(app、小程序、游戏开发)

  6.Fragment,模板可以有多个根元素

二.vue2 vue3响应原理对比

  1.vue2使用Object.defineProperty方法实现响应式数据

  2.缺点:

    无法检测到对象属性的动态添加和删除

    无法检测到数组的下标和length属性的变更

  3.解决方案:

    vue2提供Vue.$set动态给对象添加属性

    Vue.$delete动态删除对象属性

    重写数组的方法,检测数组变更

------------------------------------------------------------------------------------

  1.vue3使用proxy实现响应式数据

  2.优点:

    可以检测到代理对象属性的动态新增和删除

    可以见到测数组的下标和length属性的变化

  3.缺点:

    es6的proxy不支持低版本浏览器 IE11

    回针对IE11出一个特殊版本进行支持

 

vue2和vue3比较的更多相关文章

  1. Vue2和Vue3技术整理1 - 入门篇 - 更新完毕

    Vue2 0.前言 首先说明:要直接上手简单得很,看官网熟悉大概有哪些东西.怎么用的,然后简单练一下就可以做出程序来了,最多两天,无论Vue2还是Vue3,就都完全可以了,Vue3就是比Vue2多了一 ...

  2. vue2升级vue3:vue2 vue-i18n 升级到vue3搭配VueI18n v9

    项目从vue2 升级vue3,VueI18n需要做适当的调整.主要是Vue I18n v8.x 到Vue I18n v9 or later 的变化,其中初始化: 具体可以参看:https://vue- ...

  3. vue2和vue3生命周期的区别

    概念 首先,我们了解一下"生命周期"这个词.通俗的来说,生命周期就是一个事务从出生到消失的过程.例如,一个人从出生到去世.在vue中,vue的生命周期是指,从创建vue对象到销毁v ...

  4. vue2升级vue3指南(二)—— 语法warning&error篇

    本文总结了vue2升级vue3可能会遇到的语法警告和错误,如果想知道怎样升级,可以查看我的上一篇文章:vue2升级vue3指南(一)-- 环境准备和构建篇 Warning 1.deep /deep/和 ...

  5. vue2升级vue3:Vue Demij打通vue2与vue3壁垒,构建通用组件

    如果你的vue2代码之前是使用vue-class-component 类组件模式写的.选择可以使用 https://github.com/facing-dev/vue-facing-decorator ...

  6. 盘点Vue2和Vue3的10种组件通信方式(值得收藏)

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异:本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式.其中将要实现的通信 ...

  7. vue2和vue3的区别?

    vue2和vue3的主要区别在于以下几点: 1.生命周期函数钩子不同 2.数据双向绑定原理不同 3.定义变量和方法不同 4.指令和插槽的使用不同 5.API类型不同 6.是否支持碎片 7.父子组件之间 ...

  8. vue2与vue3的差异(总结)?

    vue作者尤雨溪在开发 vue3.0 的时候开发的一个基于浏览器原生 ES imports 的开发服务器(开发构建工具).那么我们先来了解一下vite Vite Vite,一个基于浏览器原生 ES i ...

  9. Vue2与Vue3的组件通讯对比

    Vue2 父传子 父传子比较简单, 主要通过以下步骤实现 父在template中为子绑定属性 <Child :childData='pMsg'/> <!-- 也可以写死 --> ...

随机推荐

  1. Android手机 自动批量发朋友圈

    做了各种对比之后,还是这个微商工具最好用

  2. Gram-Schmidt图像融合

    遥感图像融合的定义是通过将多光谱低分辨率的图像和高分辨率的全色波段进行融合从而得到信息量更丰富的遥感图像.常用的遥感图像融合方法有Brovey\PCA\Gram-Schmidt方法.其中Gram-Sc ...

  3. Jest中Mock网络请求

    Jest中Mock网络请求 最近需要将一个比较老的库修改为TS并进行单元测试,修改为TS还能会一点,单元测试纯粹是现学现卖了,初学Jest框架,觉得在单元测试中比较麻烦的就是测试网络请求,所以记录一下 ...

  4. golang指针接收者和值接收者方法调用笔记

    初学go时很多同学会把 值接收者 和 指针接收者 的方法相互调用搞混淆,好多同学都只记得指针类型可以调用值接收者方法和指针接收者方法,而值类型只能调用值接收者方法,其实不然,在某些情况下,值类型也是可 ...

  5. 基于python2.7 Tkinter 做一个小工具

    1.源码:先写一个界面出来,放需要放入的点击事件的函数 # -*- coding:utf-8 -*- import Tkinter from Tkinter import * import Excle ...

  6. Consul+Ocelot+Polly在.NetCore中使用(.NET5)-Consul服务注册,服务发现

    环境 .NET5,Consul_v1.10.2 一.简介 在微服务中利用Consul可以实现服务的注册,服务发现,治理,健康检查等. Web调站点需要调用多个服务,如果没有Consul,可能就是Web ...

  7. Android系统编程入门系列之应用数据文件化保存

    应用中关于数据的持久化保存,不管是简单的SharedPreferences还是数据库SQLiteDatabase,本质上都是将数据保存到系统的某种类型的文件中.因此可以直接使用java.io.File ...

  8. python中模块与包

    #模块与包#在实际项目中,代码的行数可能上万,甚至上几十万,不可能在一个页面内完成,需要多个程序员通力写作#张三,李四,王五......每天收集大家的代码做一个版本,类似乐高积木一样,每个人负责一部分 ...

  9. 【OI】C++STL 不定长数组 vector

    Vector 本来是向量的意思,只不过在用法上类似于一个不限长度的数组. 定义语法:vector<数据类型> 名称; 一.头文件:<vector> (bits/stdc++请忽 ...

  10. CORS跨域请求规则以及在Spring中的实现

    CORS: 通常情况下浏览器禁止AJAX从外部获取资源,因此就衍生了CORS这一标准体系,来实现跨域请求. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origi ...