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