vue2和vue3的区别

1.了解 defineComponent

这是 Vue 3.x 推出的一个全新 API ,defineComponent 可以用于 TypeScript 的类型推导,帮你简化掉很多编写过程中的类型定义。

2.组件的生命周期

在这里插入图片描述

3.响应式数据的变化

2.0:vue2利用Object.defineProperty来劫持data数据的getter和setter操作
无法监听新增属性、删除属性, 界面不会更新。
直接通过下标修改数组, 界面不会自动更新。

Vue 3 是使用了 Proxy 的 getter/setter 来实现数据的响应性
相对于 2.x 在 data 里定义后即可通过 this.xxx 来调用响应式数据,
3.x 的生命周期里取消了 Vue 实例的 this,你要用到的比如 ref 
、reactive 等响应式 API ,都必须通过导入才能使用,然后在 setup 里定义。

无法监听数组下标的变化,通过 arr[i] = newValue 这样的操作无法实时响应
无法监听数组长度的变化,例如通过 arr.length = 10 去修改数组长度,无法响应
只能监听对象的属性,对于整个对象需要遍历,特别是多级对象更是要通过嵌套来深度监听
使用 Object.assign() 等方法给对象添加新属性时,也不会触发更新

4.数据的监听与计算

新版的 watch 需要在 setup 里使用,在使用之前,还需要先导入该组件。
需要注意的是,你只能监听响应式数据,如果通过 let 定义一个普通的字符串变量,然后去改变字符串内容,这样是无法监听的。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2和Vue3之间有一些重要的区别。首先,Vue3的脚手架命令式可视化创建脚手架更加方便。其次,Vue3引入了Composition API,允许开发者更灵活地组织和重用代码。相比之下,Vue2使用的是选项式API。第三,数据监听方面,Vue2使用的是watch和computed来实现数据监听,而Vue3引入了watchEffect和computed来实现更高效的数据监听。此外,双向绑定方面,Vue2使用Object.defineProperty,而Vue3使用了更先进的Proxy API。另外,Vue3还支持碎片(Fragments),即可以拥有多个根节点。总之,Vue3相比Vue2在性能、轻量化、协作等方面都有所优化,同时引入了更多的新特性和语法糖,提供了更好的开发体验和维护成本。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue2和vue3的区别(由浅入深)](https://blog.csdn.net/weixin_42974827/article/details/126560362)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue2和vue3区别](https://blog.csdn.net/weixin_54722719/article/details/123069837)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值