关于前端:主要要点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

这个写法上也有很大区别。
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