带你体验Vue2和Vue3开发组件的区别(一)

历经 13 个 RC 版本之后，Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本，等待了两年多的Vue 终于正式发布了 3.0 正式版本了！

现在的vue版本已经可以满足我们大部分开发场景，虽然Vue3正式版发布不久，可能存在某些问题，但是提前学习了解总归是有好处的。可能有些已经开始抓狂了，学不动了。

所以这里我们通过用脚手架创建的项目，对比这两个版本在开发组件上的区别。如果还不会创建Vue3项目，请移步记录使用@vue/cli搭建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

这个写法上也有很大区别。

Vue2

Vue2把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
   
  

   
  
  

暂时先写到这，后期在介绍其他区别。有问题可以下方留言。