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