vue2/3区别

149 阅读2分钟

全局api应用实例

vue2使用的是new Vue(),创建vue根实例
一些全局配置 Vue.compoment=>注册全局组件,vue.Direction=>注册全局指令
vue3调用createApp方法来创建应用实例 
注册全局方法 vue3 app.config.globelproperty  , 组件上使用appcontext上下文获取
             vue2    使用vue.propetity注册,组件中直接在this中可以使用
componnets组件引入异步组件 vue3使用        iterator.outComponent = defineAsyncComponent(() => import(comP))  vue2直接使用importdefault属性值即可          
             

模板指令

v-for和v-if优先级 vue2中v-for优先级高,vue3中v-if优先级高 
// vue中需要一起用的话  在外层在写一个template标签 ,写上v-if,或者先用计算属性过滤掉(不用v-if)
v-model   vue2 一个组件只能用一个v-model,可以使用多个.sync  .sync与v-model作用是一样的
          vue3  一个组件可以使用多个v-model,取消了,sync用法  取而代之用 v-model:title="pageTitle",与.sync作用一样
v-bind合并行为 2x中独立属性总是合并掉 v-bind绑定的相同属性   3x中是按照先后顺序进行合并,后面的总是合并前面的          

移除了一些api

`$on``$off`被移除,vue3要实现事件总线可以使用mitt的库
过滤器被移除,3x组件内使用计算属性,全局使用app.globalProperties
$children被移除(3x推荐使用组件ref应用,如果父组件需要使用子组件的任何东西,子组件需要defineExpose)

其它一些小的变化

自定义指令的生命周期发生变化 3x选项式api中mixin合并行为中合并行为只做浅层次地执行,同名属性还是以组件为主

watch的一些变化

当使用 [`watch` 选项](https://cn.vuejs.org/api/options-state.html#watch)侦听数组时,只有在数组被替换时才会触发回调。换句话说,在数组被改变时侦听回调将不再被触发。要想在数组被改变时触发侦听回调,必须指定 `deep` 选项。

生命周期的一些不同

vue3的卸载阶段,是beforeunmount vue2是beforeDestory  desrory和unmount

Teleport