Vue2和Vue3的区别,Vue3有哪些新特性?
自Vue3发布已经有了一段时间,Vue3的生态环境也慢慢得到了完善,个
人认为Vue3将在近期替代Vue2成为Vue.js的主流写法,所以有了这次博客。
文章目录
前言
随着前端架构的不断发展,Vue.js这门技术也越来越重要,很多人都开启Vue之旅,本文就介绍了Vue2迁移到Vue3有了那些变化。一、Vue.js是什么?
Vue 是一套用于构建用户界面的渐进式框架, 自Vue.js问世以来所受关注度不断提高,在现在的市场上,Vue.js 是非常流行的 JavaScript 技术开发框架之一。
二、Vue2到Vue3最根本的变化是什么?
1.从选项式(options API)写法转换成函数式(composition API)写法
Vue2.x使用的是选项式接口(options API),即添加一个个属性来完成操作。但是选项式在搭建复杂的应用的时候会面临一个复用代码困难的问题,而vue3.x的组合式接口(composition API)则是为了解决这个问题而生,同时vue3.x为了兼容旧版的vue2.x,保留了选项式的写法。
2.双向数据绑定
vue2使用的是Object.defineProperty数据劫持,而vue3是使用proxy代理实现。
Object.defineProperty只能劫持对象里面的单个属性,如果要同时劫持多个属性,需要进行递归,造成速度的缓慢。
而proxy可以直接代理整个对象,不需要进行递归,所以速度会快很多。
Object.defineProperty底层原理代码如下(示例):
let data = {
name:"小明",age:18,hobby:{
names:"打游戏"}}
function ob(data){
if(!data || typeof data !== "object"){
return
}
Object.keys(data).forEach((key)=>{
definedReactive(data,key,data[key])
})
}
function