【要点】Vue2和Vue3的主要区别

1.template标签模板，Vue2和Vue3区别不大。Vue3支持片段（Fragments），也就是说模板下可以有多个根节点。Vue2Vue2模板下只能有一个根节点。Vue3Vue3模板可以包含多个根节点。2.dataVue2和Vue3区别比较大，我们来看一下代码。Vue2Vue2是一个选项类型API（OptionsAPI），在代码中划分了不同的属性（properties）：数据、计算属性、方法等。exportdefault{data(){return{userName:'',password:''}}}Vue3Vue3合成API（CompositionAPI），需要使用一个新的setup()方法，在组件初始化时触发，建。import{reactive}from'vue'exportdefault{setup(){constdata=reactive({userName:'',password:''})return{data}}}3.方式也有很大区别写作方法。Vue2Vue2将方法拆分为单独的属性区域。exportdefault{data(){return{}},methods:{//methodlogin(){}}}Vue3Vue3不需要把方法写在methods中，在setup()方法中声明，最后return(return)import{reactive}from'vue'exportdefault{setup(){constdata=reactive({userName:'',password:''})//登录方法constlogin=()=>{}return{login,data}}}4.LifecyleHooks也有很大的不同。Vue2Vue2可以直接在组件属性中调用Vue的生命周期钩子。exportdefault{data(){return{username:'',password:''}},beforeCreate(){},created(){},beforeMount(){},mounted(){},beforeUpdate(){},updated(){},beforeDestroy(){},destroyed(){}}Vue3Vue3的合成API中的setup()方法基本上可以包含一切。生命周期钩子就是其中之一。import{reactive,onMounted}from'vue'exportdefault{setup(){//..onMounted(()=>{})//...}}对应2.x版本生命周期的复合API。1.beforeCreate->usesetup()2.created->usesetup()3.beforeMount->onBeforeMount4.mounted->onMounted5.beforeUpdate->onBeforeUpdate6.updated->onUpdated7.beforeDestroy->onBeforeUnmount8.destroyed->onUnmounted9，errorCaptured->onErrorCaptured