(一)版本常用差異對比

前言:尤大大發布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、新增全局注入/提?。簆rovide/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:當你的實力和才華還不夠實現你的野心,那么靜下心來,埋頭苦干!致敬自己,不負韶華。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。