关于前端:主要要点Vue2和Vue3主要区别

46次阅读

共计 1466 个字符,预计需要花费 4 分钟才能阅读完成。

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





正文完
 0