（一）版本常用差异对比

前言：尤大大发布Vue3.x已经快1个月时间，经过自己不断的摸索，尝试，调试，现将己之拙见与君共勉，欢迎留言纠正。

本篇主要从不同角度对两个版本的差异性进行对比，比较。

一、全局API

1、新增全局API：createApp()
// Vue2.x中我们采用的是new Vue(...),Vue3.x中我们将使用如下方式来创建我们的应用实例
import { createApp } from 'vue';
const app = createApp({});
2、应用配置（Vue2.x > Vue3.x）
  • Vue.config         > app.config
  • Vue.config.production    > 删除
  • Vue.config.ignoredElements > app.config.isCustomElement
  • Vue.component        > app.component
  • Vue.directive          > app.directive
  • Vue.mixin         > app.mixin
  • Vue.use            > app.use
3、应用程序挂载
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
4、新增全局注入/提取：provide/inject
// root component
app.provide('title', 'Hello Vue3.x!');

// children component
export default {
    ...
    const data = inject('title');
    ...
}
5、全局方法

例如：nextTick

// Vue2.x
import Vue from 'vue';
Vue.nextTick(() => { // ... do something }));
// 或者
export default {
    ...
    this.$nextTick(() => { // ... do something}]);
    ...
};

// Vue3.x
import { nextTick } from 'vue';
export default {
    ...
    nextTick(() => { // ... do something}]);
    ...
};

二、自定义指令：directive

Vue3.x中对自定义指令的创建提供了更加细致的API（类似于组件的声明周期）

1、bind         >  deforeMount（挂载前）
2、inserted        >  mounted（挂载后）
3、          >  beforeUpdate（新增，更新前）
4、update       >  删除
5、componentUpdated  >  updated（更新后）
6、          >  beforeUnmount（新增，卸载前）
7、unbind       >  unmounted（卸载后）

三、自定义元素

元素/组件
// 例有如下自定义元素（非组件），若不将其定义为元素白名单，则在编译过程中就会出错。
<user-check></user-check>

// Vue2.x
Vue.config.ignoredElements = ['user-check'];

// Vue3.x
// 方式一  webpack中的vue-loader中配置选项
rules: [
    {
        text: /\.vue$/,
        use: 'vue-loader',
        options: {
            compilerOptions: {
                isCustomElement: tag => tag === 'user-check'
            }
        }
    }
]
// 方式二  实例化vue中的自定义配置元素白名单
import { createApp } from 'vue';
const app = createApp({}).config.isCustomElement = tag => tag === 'user-check';

四、Events API（全局事件总成）

Vue2.x中借助一个新的Vue实例来实现全局的事件发布、订阅和注销
// events.js
const eventHub = new Vue();
export default eventHub ;

// childrenComponent.vue
import eventHub from './events.js';
export default {
    mounted(){
        eventHub.$on('change-event', () => {...})
    },
    beforedestroy() {
        eventHub.$off('change-event');
    }
};

//parentComponent.vue
import eventHub from './events.js';
export default {
    methods: {
        changeHandler() {
            eventHub.$emit('change-event', ...);
        }
    }
};
但是在Vue3.x中，已删除：on，off，$once。
Vue3.x中全局事件总成将使用mitt来实现跨组件通讯。

五、过滤器：Filters

Vue3.x中已将Filters删除，建议使用处理函数或者计算属性来处理数据

六、多根节点组件

// Vue2.x
<template>
    <div>....</div>
</template>

// Vue3.x中可以使用多个跟节点
<template>
    <div>....</div>
    <div>....</div>
    ...
</template>

七、按键修饰符

// Vue2.x
<input v-on:keyup.13="submit" />
<input v-on:keyup.enter="submit" />
Vue.config.keyCodes = { f1:112 };

// Vue3.x 别名支持任意键
<input v-on:keyup.delete="cancel" />

八、渲染功能

// Vue2.x
export default {
  render(h) {
    return h('div')
  }
}

// Vue3.x
import { h } from 'vue'

export default {
  render() {
    return h('div', {class: 'red'}, 'Hello, Vue3.x!');
  }
}

九、v-model

// Vue2.x  v-model实现原理
<user-check v-model="msg"></user-check>
<user-check :value="msg" @input="tag=$event"></user-check>

// Vue3.x  修改了v-model的实现方法，可以同时绑定多个

// 单个v-model绑定
<user-check v-model="msg"></user-check>
<user-check :modelValue="msg" @update:modelValue="tag=$event"></user-check>
// 子组件中使用props: {modelValue: String}接收值

// 多个v-model绑定
<user-check v-model:name="name" v-model:age="age"></user-check>
<user-check :name="name" @update:name="tag=$event" :age="age" @update:age="tag=$event"></user-check>
// 子组件中使用props: {name: String, age: Number}接收值

十、v-is

// vue的动态组件中使用is
<component is="foo"></component>
// Vue2.x --->  is的值指的是要渲染的组件的名称；渲染foo组件
// Vue3.x --->  is的值指的是要渲染的组件的名称；渲染foo组件

// 一般组件中使用is
<user-edit is="foo"></tr>
// Vue2.x --->  is的值指的是要渲染的组件的名称；渲染foo组件
// Vue3.x --->  is的值为any；渲染user-edit组件；is将作为组件的prop进行值的传递

// 一般元素上使用is
<tr is="val">...</tr>
// vue2.x --->  is的值会被编译为boolean；且元素会被动态加载或销毁（会触发transition效果）
// vue3.x --->  is的值为any；值的变化不会造成元素任何变化(丢失了vue2中元素上使用的is的功能，因此vue3中引入了新的指令v-is)

// Vue3.x的新指令：v-is
// 一般元素上使用v-is
<tr v-is="val"></tr>  // 与vue2.x中一般元素上使用is的效果一致

十一、v-for中使用ref

// vue2.x
<p v-for="item in renderData" :key="item.name" ref="nodes">{{item.name}}</p>

console.log(this.$refs.nodes) // 返回所有循环的p元素节点

// vue3.x
// 如果还是按照Vue2.x的方式
<p v-for="item in renderData" :key="item.name" ref="nodes"></p>

console.log(this.$refs.nodes) // 此时只能得到循环后最后一个P元素节点

// Vue3.x中，使用函数处理v-for中的ref，且用变量单独存储。
<p v-for="item in renderData" :key="item.name" ref="handleNodes"></p>

setup() {
    const data = reactive({
        nodes: []
    });
    const handleNodes = nodeItem => {
        data.nodes.push(nodeItem);
    }
    return {
        ...toRefs(data)
    }
}

十二、mixins的合并行为更改

// mixin
export default {
    data() {
        return { name: 'zhang_san', age: 20 };
    }
};

// Vue2.x
export default {
    data() {
        return { age: 30 };
    },
    mounted() {
        console.log(this.$data); // {name: 'zhang_san', age: 30}
        console.log(this.name); // 'zhang_san'
        console.log(this.age); // 30
    }
};

// Vue3.x
export default {
    data() {
        return { age: 30 };
    },
    mounted() {
        console.log(this.$data); // { age: 30 }
        console.log(this.name); // 'zhang_san'
        console.log(this.age); // 30
    }
};
// 得出结论：1、与Vue2.x一样会覆盖掉mixins中相同的响应属性；2、Vue3.x中当前实例的$data是不会包含mixins中定义定响应属性。

十三、template公共组件使用key

Vue2.x中的template标签在v-for使用key属性时会报语法错误

template(v-for="(layerItem,index) in layerList" :key="index")

Vue3.x中则推荐使用key属性以提高模板渲染效率；

十四、过度动画类命名

// Vue2.x
.v-enter,
.v-leave-to {
  opacity: 0;
}

.v-leave,
.v-enter-to {
  opacity: 1;
}

// Vue3.x，更加容易理解
.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}

十五、v-if和v-for优先级

当v-if和v-for同时作用于一个元素上时:
Vue2.x中v-for的优先级会高于v-if；
Vue3.x中v-if的优先级会高于v-for；
使用禁忌：Vue3.x中不能将v-for和v-if放在同一个元素上。只能使用v-for嵌套v-if使用
使用建议：官方建议使用计算属性来处理，即提高性能，又能兼容Vue3.x。

十六、新增v-slot指令

在vue3中，新增了v-slot指令来区别于之前的slot
插槽的定义方式与之前vue2中的定义方式基本一致。
插槽的使用推荐使用：

// 默认插槽（匿名插槽）的使用
template(#)  // 等价于 template(v-slot)
  div...
// 具名插槽的使用
template(#)  // 等价于 template(v-slot:name)
  div...

使用默认插槽（匿名插槽）时，可以和之前使用匿名插槽的方式一致，也能使用vue3中推荐的template方式。
具名插槽的使用是能是使用template方式去插入到指定的位置。

十七、$attrs 和 $listenner 的融合

我们知道，在vue2中我们使用v-bind="$attrs"，v-on="$listenner"来将数据和事件做一个承上启下的作用，但是在vue3中，首先是删除了v-on指令，其次是发现这两个组件的属性过于累赘，所以在当前版本中将 $attrs 和 $listenner 他们的功能进行了融合，$listenner 现在已作为 $attrs 的其中一部分进行传递，所以只需要在组建上指定 v-bind="$attrs" ，那么将同时拥有传值和传递事件的功能。

下一章：（二）Vue3.x应用程序API

ps：当你的实力和才华还不够实现你的野心，那么静下心来，埋头苦干！致敬自己，不负韶华。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335