vue2与3的区别

1. vue2和vue3响应式原理发生了改变

vue2 的响应式原理是利⽤es5 的⼀个 API ,Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。

vue3 中使⽤了 es6 的 proxy API 对数据代理,通过 reactive() 函数给每⼀个对象都包⼀层 Proxy,通过 Proxy 监听属性的变化,从⽽ 实现对数据的监控。

这⾥是引相⽐于vue2版本,使⽤proxy的优势如下

1.defineProperty只能监听某个属性,不能对全对象监听

2.可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)

3.可以监听数组,不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作,完美⽀持对数组的监听。 (vue3.x可以检测到数组内部数据的变化)

2. Vue3支持碎片(Fragments)

就是说在组件可以拥有多个根节点。

3.数据和方法的定义

Vue2使⽤的是选项类型API(Options API),Vue3使⽤的是组合式API(Composition API)

旧的选项型API在代码里分割了不同的属性: data,computed属性,methods,等等。新的组合式API能让我们用方法(function)来分割,相比于旧的API使用属性来分组,这样代码会更加简便和整洁。

setup函数可以说是Vue3的属性和方法入口。在Vue2中,使用的是data、methods、computed。在Vue3中我们把属性和方法都放在setup函数中。setup函数中有以下几个特点:

1.setup(props,context):接收两个参数

(1) props :接收来自父组件传来的参数

(2) context :上下文,主要包含3个使用参数:attrs,emits,slots,相当于Vue2中this的 attrs,emits,slots

2.有返回值,返回值可以是两种:

(1) 返回 对象 ,返回的对象中的属性方法,可在模板中直接使用;

(2) 返回 渲染函数 ,可以自定义渲染的内容;

3.函数内部没有this;

4.当内部有异步函数,需要使用到await的时候,可以直接使用,不需要在setup前面加async

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 内部优化 1.vue2与vue3双向数据绑定原理不同 2.静态变量提升 3.pathFlag 标记 4.缓存事件处...
    zhao_madman阅读 1,252评论 0赞 0
  • 今天看了vue2升迁vue3相关知识,这里列举一部分比较常用的不同之处 v-for数组中的ref属性的使用(这个属...
    miao8862阅读 6,282评论 1赞 6
  • 1:vue2和vue3双向数据绑定原理发生了改变 vue2的双向数据绑定是利用ES5的一个APIObject.de...
    随笔记呀阅读 26,673评论 0赞 72
  • 一、vue3的理解和区别 1、性能优化 双向响应原理由Object.defineProperty改为基于ES6的P...
    哈哈哈wy阅读 1,249评论 0赞 0
  • 1 Vue3对比Vue2 1.1 生命周期的变化 整体来看,变化不大,只是名字大部分需要 + on,功能上类似。使...
    上善若泪阅读 1,118评论 0赞 1

友情链接更多精彩内容