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

1.template

标签模版这块，Vue2和Vue3区别不大，Vue3支持碎片(Fragments)，就是说template下可以有多个根节点。

Vue2

Vue2 template下只能包含一个根节点。

   <template>
     <div>
       显示区域
     </div>
   </template>

Vue3

Vue3 template下可以包含多个根节点。

   <template>
     <div>显示区域</div>
     <div>显示区域</div>
     <div>显示区域</div>
   </template>

2.data

Vue2和Vue3区别很大，我们代码看。

Vue2

Vue2是选项类型API（Options API），在代码里分割了不同的属性（properties）：data，computed属性，methods，等等。

   export default {
     data () {
       return {
         userName: '',
         password: ''
       }
     }
   }

Vue3

Vue3合成型API（Composition API），需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。

   import { reactive } from 'vue'
   export default {
     setup () {
       const data = reactive({
         userName: '',
         password: ''
       })
       return { data }
     }
   }

3.methods

这个写法上也有很大区别。Vue2Vue2把methods分割到独立的属性区域。

   export default {
     data () {
       return {}
     },
     methods: {
       // 方法
       login () {}
     }
   }

Vue3

Vue3不需要把方法写在methods内，在setup()方法中声明，最后返回(return)

   import { reactive } from 'vue'
   export default {
     setup () {
       const data = reactive({
         userName: '',
         password: ''
       })
       // 登陆方法
       const login = () => {}
       return {
         login,
         data
       }
     }
   }

4.Lifecyle Hooks

这个区别也很大。

Vue2

Vue2可以直接在组件属性中调用Vue的生命周期的钩子。

   export default {
     data () {
       return {
         userame: '',
         password: ''
       }
     },
     beforeCreate() {},
     created() {},
     beforeMount() {},
     mounted() {},
     beforeUpdate() {},
     updated() {},
     beforeDestroy() {},
     destroyed() {}
   }

Vue3

Vue3 的合成型API里面的setup()方法可以包含了基本所有东西。生命周期的钩子就是其中之一。

   import { reactive, onMounted } from 'vue'
   export default {
     setup () {
       // ..
       onMounted(() => {})
       // ...
     }
   }

与 2.x 版本生命周期相对应的组合式 API。

   1、beforeCreate -> 使用 setup()
   2、created -> 使用 setup()
   3、beforeMount -> onBeforeMount
   4、mounted -> onMounted
   5、beforeUpdate -> onBeforeUpdate
   6、updated -> onUpdated
   7、beforeDestroy -> onBeforeUnmount
   8、destroyed -> onUnmounted
   9、errorCaptured -> onErrorCaptured