一.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. go语言学习代码

    1.day01 package main //声明文件所在的包,每个go文件必须有归属包 import "fmt" //引入程序中需要用的包,为了使用包下的函数 比如函数:Prin ...

  2. layui的CRUD案列

    用layui来实现一个简单的二级权限和增删改查案列 利用layui提供的组件(table , layer , form,tree)来进行开发 写一个简单的登录界面   根据用户的ID来 获取用户所对应 ...

  3. 20210714 noip15

    考前 mtr 中午拿着笔记本改题(Orz),一点多发现 13.50 有比赛(截止 12 点都没放出来),赶紧睡.13.40 到了学校,巨瞌睡,洗了把脸到机房发现推迟到 14.30 了,wcnm 趴在桌 ...

  4. Python - 文件模式a+读取不了文件

    代码 f = open('test/gbk.txt', 'a+', encoding='utf-8') print(f.readline()) 最终的执行结果是输出空,为什么呢? a+模式打开文件指针 ...

  5. Robot Framework(6)- BuiltIn 测试库常用的关键字列表

    如果你还想从头学起Robot Framework,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1770899.html 前言 所有关键字 ...

  6. ORACLE 12C Identity Column(身份列) 实现自增长字段

    Oracle 12c提供的Identity Column特性简化了自增字段的定义. 声明自增字段通常有3种常见的用法,以下三种方式都支持INSERT语句中省略自增字段的插入,但有些许差别. 1. GE ...

  7. CodeForce-799C Fountains (记忆化DP)

    Fountains CodeForces - 799C 某土豪想要造两座喷泉.现在有 n 个造喷泉的方案,我们已知每个方案的价格以及美观度.有两种合法的货币:金币和钻石.这两种货币之间不能以任何方式转 ...

  8. 利用滴答定时器(SysTick)实现简单的延时函数

    预备知识: 对标准库来说,如果定义了时钟频率,则系统会默认初始化该时钟频率. SysTick是CM4的内核外设,是一个24位的向下递减计数器,每次计数时间是1/SYSCLK,即1/168000000. ...

  9. git撤销文件的修改

    git撤销某个文件的修改,分为两种情况:1.在工作区修改,但并未提交到暂存区(即并没有add).对于单个文件的撤销修改而言,使用下面方法. git checkout -- 文件名 若想撤销工作区中所有 ...

  10. Elasticsearch2.4.6版本 在linux 命令行 对数据的增删改操作

    一._cluster系列:查询设置集群状态 1.设置集群状态 curl -XGET 10.68.120.167:9204/_cluster/health?pretty=true pretty=true ...