vue2和vue3的5大不同点介绍

vue2和vue3有哪些不同之处，下面web建站小编给大家简单介绍一下！

创建方式不同

vue2是一个构造函数，通过new创建一个Vue实例

new Vue({})

vue3是一个对象。通过对象Vue的createApp()方法创建一个vue实例

Vue.createApp({})

挂载容器的方式不同

//vue2
new Vue({el: '#app'})
new Vue({}).$mount('#app')

//vue3
Vue.createApp({}).mount('#app')

template模板不同

Vue2
<template>
//template下只能包含一个根节点。
<div>
//内容
</div>
</template>
Vue3
<template>
//template下可以包含多个根节点。
<div>//内容1</div>
<div>//内容2</div>
<div>//内容3</div>
</template>

data选项不同

//vue2
new Vue({
el:'#app',
  data(){
    return{}
  }
})

//vue3
Vue.createApp({
  data(){
    return {}
  }
})

生命周期

//左边是vue2 -> 右边是vue3
beforeCreate -> setup()
Created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroyed -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated