vue2和vue3区别大吗(vue2开发好还是vue3开发好)
Vue3相比Vue2在性能、开发体验和组件化方面都有所提升。以下是Vue3相对于Vue2的一些重要改进和新增功能以及它们的区别:
1、创建方式不同
vue2 是一个构造函数,通过new创建一个Vue实例
new Vue({})
vue3是一个对象。通过对象Vue的createApp()方法创建一个vue实例
Vue.createApp({})
2、挂载容器的方式不同
vue2
new Vue({el: '#app'}) new Vue({}).$mount('#app')
vue3
Vue.createApp({}).mount('#app')
3、template模板
标签模版这块,Vue2和Vue3区别不大,Vue3支持碎片(Fragments),就是说template下可以有多个根节点。
Vue2
Vue2 template下只能包含一个根节点。
<template> <div> 显示区域 </div> </template>
Vue3
Vue3 template下可以包含多个根节点。
<template> <div>显示区域</div> <div>显示区域</div> <div>显示区域</div> </template>
4、data选项不同
vue2 可以是一个对象或者由方法返回一个对象
new Vue({ el: '#app', data: {} }
//或者
new Vue({ el:'#app', data(){ return{} } })
vue3只能由方法返回一个对象
Vue.createApp({ data(){ return {} } })
5、响应式的不同
vue2的属性不具备相应式,要实现响应式有两种方法
(1). forceUpdate()强制刷新页面,比较损耗性能
(2). set()方法给对象添加新属性,针对性强制刷新,性能消耗低
(3). push 、pop、 unshift、 shift、sort、reverse、splice
this.$forceUpdate()
或
this.$set(this.star,'sex','男')
vue3 实现响应式数据
6、vue2和vue3双向数据绑定原理发生了改变
vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。
相比与vue2,使用proxy API 优势有:defineProperty只能监听某个属性,不能对全对象进行监听;可以省去for in 、闭包等内容来提升效率(直接绑定整个对象即可);可以监听数组,不用再去单独的对数组做特异性操作,vue3可以检测到数组内部数据的变化。
7、vue3推出组合式API, vue2采用选项式API
Vue2 与vue3 最大的区别是vue2使用选项类型api,对比vue3合成型api。旧得选项型api在代码里分割了不同得属性:data,computed,methods等;新得合成型api能让我们使用方法来分割,相比于旧的API使用属性来分组,这样代码会更加简便和整洁。
8、生命周期
vue2 --------------- vue3
beforeCreate -> setup() Created -> setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroyed -> onBeforeUnmount destroyed -> onUnmounted activated -> onActivated deactivated -> onDeactivated
9、父子传参不同,setup()函数特性
setup()函数接收两个参数:props、context(包含attrs、slots、emit)
setup函数是处于生命周期beforeCreated和created俩个钩子函数之前
执行setup时,组件实例尚未被创建(在setup()内部,this不会是该活跃实例得引用,即不指向vue实例,Vue为了避免我们错误得使用,直接将setup函数中得this修改成了undefined)
与模板一起使用时,需要返回一个对象
因为setup函数中,props是响应式得,当传入新的prop时,它将会被更新,所以不能使用es6解构,因为它会消除prop得响应性,如需解构prop,可以通过使用setup函数中得toRefs来完成此操作。
父传子,用props,子传父用事件 Emitting Events。在vue2中,会调用this$emit然后传入事件名和对象;在vue3中得setup()中得第二个参数content对象中就有emit,那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。
在setup()内使用响应式数据时,需要通过 .value 获取
import { ref } from 'vue' const count = ref(0) console.log(count.value)
从setup() 中返回得对象上得property 返回并可以在模板中被访问时,它将自动展开为内部值。不需要在模板中追加.value。
setup函数只能是同步的不能是异步的。
最后:
Vue3还新增了一些方便开发的功能,比如Suspense组件用于异步组件加载、多个v-model绑定、多个插槽别名、动态组件和全局API的改变等等。
总的来说,Vue3相比Vue2在性能和开发体验方面都有所提升,同时还引入了一些新的功能和优化,使得Vue更加强大和易用。
原文地址:https://tangjiusheng.com/vue/4430.html
- vue中v-for key的作用(v-for循环为什么要加key)
- vue中checkbox勾选触发事件的使用(click事件和change事件方法对比)
- Vue双向绑定的原理(前端面试时这样回答就ok)
- vue2和vue3区别大吗(vue2开发好还是vue3开发好)
- vue跨域前端怎么解决(vue项目中如何实现跨域)
- vue3中ref使用方法(操作ref的4种使用方式)
- vue3生命周期详解(vue3和vue2命周期的区别)
- Vue 3Pre-Alpha版来了,GitHub上有源码
- vue v-model和v-bind有啥区别(了解下v-model和v-bind)
- vue3生命周期和vue2的区别