15分鐘上手vue3.0(小結(jié))
Vue 3 還沒有正式發(fā)布，但是 Alpha 版本已經(jīng)發(fā)布了。
雖然官方還不推薦在生產(chǎn)環(huán)境中直接使用 Vue 3 ，但是提前學習總歸是有好處的。
嘴上喊著老子學不動了，雙手還是很誠實的打開了 Vue 3 文檔
創(chuàng)建項目
Vue 官方很貼心的提供了一個 github 倉庫，讓我們能快速體驗Vue 3的新特性:
git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-start cd vue3-start
npm install or yarn intall
開發(fā)環(huán)境準備就緒后，啟動命令：
npm run dev
在瀏覽器中打開 http://127.0.0.1:8080 ，您可以看到一個簡單的計數(shù)器頁面：
打開 package.json，當前使用的 vue 版本是：3.0.0-beta.2
Vue 3 新特性
Vue 3 的設(shè)計目標是更快，更小，并更好的支持 TypeScript 。
一些新特性包括:
1、Composition API
2、Multiple root elements
3、Suspense
4、Multiple V-models
5、Reactivity
6、Teleport
7、Transition
8、Remove Filter
9、App configuration
1、Composition API
Vue 官方發(fā)布了 Composition API 的官方插件，使廣大用戶可以在 Vue2.x 中享受 Function Base 帶來的新體驗。
而在 vue 3 中無需單獨安裝插件，開箱即用。
打開 App.vue，你會看到 setup()方法:
<template>
<img src="./logo.png">
<h1>Hello Vue 3!</h1>
<button @click="inc">Clicked {{ count }} times.</button>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
const inc = () => {
count.value++
}
return {
count,
inc
}
}
}
</script>
<style scoped>
img {
width: 200px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
}
</style>
Composition API 主要提供兩大好處：
1、清晰的代碼結(jié)構(gòu)
2、消除重復邏輯
<template>
<div class="counter">
<p>count: {{ count }}</p>
<p>NewVal (count + 2): {{ countDouble }}</p>
<button @click="inc">Increment</button>
<button @click="dec">Decrement</button>
<p> Message: {{ msg }} </p>
<button @click="changeMessage()">Change Message</button>
</div>
</template>
<script>
import { ref, computed, watch } from 'vue'
export default {
setup() {
/* ---------------------------------------------------- */
let count = ref(0)
const countDouble = computed(() => count.value * 2)
watch(count, newVal => {
console.log('count changed', newVal)
})
const inc = () => {
count.value += 1
}
const dec = () => {
if (count.value !== 0) {
count.value -= 1
}
}
/* ---------------------------------------------------- */
let msg= ref('some text')
watch(msg, newVal => {
console.log('msg changed', newVal)
})
const changeMessage = () => {
msg.value = "new Message"
}
/* ---------------------------------------------------- */
return {
count,
inc,
dec,
countDouble,
msg,
changeMessage
}
}
}
</script>
如果你不喜歡使用 Composition API, 也可以繼續(xù)使用 2.x 的傳統(tǒng)方法：
<template>
<div class="counter">
<p>count: {{ count }}</p>
<p>NewVal (count + 2): {{ countDouble }}</p>
<button @click="inc">Increment</button>
<button @click="dec">Decrement</button>
<p> Message: {{ msg }} </p>
<button @click="changeMessage()">Change Message</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
msg: 'some message'
}
},
computed: {
countDouble() {
return this.count*2
}
},
watch: {
count(newVal) {
console.log('count changed', newVal)
},
msg(newVal) {
console.log('msg changed', newVal)
}
},
methods: {
inc() {
this.count += 1
},
dec() {
if (this.count !== 0) {
this.count -= 1
}
},
changeMessage() {
msg = "new Message"
}
}
}
</script>
上面兩段代碼在效果上市完全等價的
使用 Composition API 的好處：可以讓我們更好地組織代碼(state, methods, computed properties, watcher 等)。
隨著組件規(guī)模的增長，如何組織我們的業(yè)務(wù)代碼逐漸變成一個重要的問題，確保新進的開發(fā)人員都可以輕松地理解代碼，而不需要花太多時間。
以前我們會使用 mixin 來復用代碼。然而，mixin 最大的痛點是，需要我們跟蹤不同組件中的狀態(tài)和方法，這往往會給開發(fā)帶來一定的心智負擔，一不小心，mixin 可能會覆蓋組件中的現(xiàn)有狀態(tài)或方法。
使用 Composition API 讓代碼復用更加容易。
我們同樣可以抽取出重復功能的代碼:
// message.js
import { ref, watch } from "vue";
export function message() {
let msg = ref(123);
watch(msg, (newVal) => {
console.log("msg changed", newVal);
});
const changeMessage = () => {
msg.value = "new Message";
};
return { msg, changeMessage };
}
在其他組件中使用上面組件:
<template>
<div class="counter">
<p>count: {{ count }}</p>
<p>NewVal (count + 2): {{ countDouble }}</p>
<button @click="inc">Increment</button>
<button @click="dec">Decrement</button>
<p>Message: {{ msg }}</p>
<button @click="changeMessage()">change message</button>
</div>
</template>
<script>
import { ref, computed, watch } from 'vue'
import { message } from './common/message'
export default {
setup() {
let count = ref(0)
const countDouble = computed(() => count.value * 2)
watch(count, newVal => {
console.log('count changed', newVal)
})
const inc = () => {
count.value += 1
}
const dec = () => {
if (count.value !== 0) {
count.value -= 1
}
}
let { msg, changeMessage } = message()
return {
count,
msg,
changeMessage,
inc,
dec,
countDouble
}
}
}
</script>
2、Multiple root elements
在 Vue 2 中，tempalte 只能取一個根元素。即使我們只有兩個 <p> 標記，我們也必須將它們包含在一個 <div> 標記中：
<template>
<div class="counter">
<p> Count: {{ count }} </p>
<button @click="increment"> Increment </button>
<button @click="decrement"> Decrement</button>
</div>
</template>
為了能編譯通過，我們通常會增加一個根節(jié)點。
這個設(shè)計確實很糟糕，我曾經(jīng)無數(shù)次吐槽過這個設(shè)計。因為會帶來不必要的代碼嵌套和縮進。
幸好在 Vue 3 中取消了這一限制：
可以直接在<template></template>中使用任意數(shù)量的標簽:
<template>
<p> Count: {{ count }} </p>
<button @click="increment"> Increment </button>
<button @click="decrement"> Decrement </button>
</template>
用 VScode 打開模板時，看到一些 lint 錯誤，這是因為官方插件 eslint-plugin-vue 還沒有支持新的模板語法。
3、Suspense
Suspense 是一個 Vue 3 新特性。
通常前后端交互是一個異步的過程： 默認我們提供一個加載中的動畫，當數(shù)據(jù)返回時配合使用 v-if 來控制數(shù)據(jù)顯示。
Suspense 的出現(xiàn)大大簡化了這個過程：它提供了 default 和 fallback 兩種狀態(tài)：
<template>
<Suspense>
<template #default>
<div v-for="item in articleList" :key="item.id">
<article>
<h2>{{ item.title }}</h2>
<p>{{ item.body }}</p>
</article>
</div>
</template>
<template #fallback>
Articles loading...
</template>
</Suspense>
</template>
<script>
import axios from 'axios'
export default {
async setup() {
let articleList = await axios
.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log(response)
return response.data
})
return {
articleList
}
}
}
</script>
4、Multiple v-models
我們都知道 v-models 用于雙向數(shù)據(jù)綁定。一般用于與表單元素一起使用。有時我們會在自定義組件中使用它。
Vue 2 只允許在一個組件上使用一個 v-models。在 Vue 3 中，我們可以將任意數(shù)量的 v-model 綁定到我們的定制組件上:
<template>
<survey-form v-model:name="name" v-model:age="age">
{" "}
</survey-form>
</template>
SurveyForm.vue:
<template>
<div>
<label>Name: </label>
<input :value="name" @input="updateName($event.target.value)" />
<label>Age: </label>
<input :value="age" @input="updateAge($event.target.value)" />
</div>
</template>
<script>
export default {
props: {
name: String,
age: Number
},
setup(props, { emit }) {
const updateName = value => {
emit('update:name', value)
}
const updateAge = value => {
emit('update:age', +value)
}
return { updateName, updateAge }
}
}
</script>
5、Reactivity
Vue 2 的響應(yīng)式已經(jīng)非常棒了，但在少數(shù)情況下會存在一些問題：
<template>
<div class="hello" @click="test">test {{list }} {{ myObj }}</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
list: [1, 2],
myObj: { name: "Preetish" }
};
},
watch: {
list: {
handler: () => {
console.log("watcher triggered");
},
deep: true
}
},
methods: {
test() {
this.list[2] = 4;
this.myObj.last = "HS";
delete this.myObj.name;
}
}
};
</script>
我們發(fā)現(xiàn)通過this.list下標來修改元素，并不會觸發(fā) wacher 監(jiān)聽函數(shù)，為了達到目的，我們不得不使用 vue.set() 或 vue.delete() 這些方法。
而在 vue 3 中，我們不需要借助其他 API：
export default {
setup() {
let list = ref([1, 2]);
let myObj = ref({ name: "Preetish" });
function myFun() {
list.value[3] = 3;
myObj.value.last = "HS";
delete myObj.value.name;
}
return { myFun, list, myObj };
},
};
6、Portals
Portals 提供了一種將組件中渲染到頁面任意一個 DOM 節(jié)點中的能力。在 Vue 2 中，利用一個 portal-vue 的第三方插件來做到這一點。
在 vue 3 中直接使用：
<Teleport to="#modal-layer"> <div class="modal">hello</div> </Teleport> <Teleport> 是 vue3 中提供特定的標簽用于創(chuàng)建一個 Portals。 <Teleport> </Teleport>中間出現(xiàn)的內(nèi)容會出現(xiàn)在 to 指定的節(jié)點中： <div id="modal-target"></div>
目前為止，<Teleport>在 Alpha 版本中并不能使用
7、Transition
之前我在使用 v-enter-active, v-enter, v-enter-to 這些個狀態(tài)時搞的暈頭轉(zhuǎn)向。
現(xiàn)在 Vue 3 從命名上更直觀了: v-enter 變成了 v-enter-from，v-leave 變成 v-leave-from。
8、Remove Filter
Vue 3 拋棄了 Filter 的用法，更推薦使用計算屬性或方法來實現(xiàn)：
<!-- vue 2.x -->
{{ date | format }}
<!-- vue 3.0 -->
{{ format(date) }}
9、App configration
在 Vue 2 中，如果想使用 use(), mixin() , directive() 等方法需要配合全局 Vue 對象:
import Vue from "vue";
import App from "./App";
Vue.use(/* ... */);
Vue.mixin(/* ... */);
Vue.component(/* ... */);
Vue.directive(/* ... */);
new Vue({
el: "#app",
template: "<App/>",
components: {
App,
},
});
在 Vue 3 中， 改成了 createApp 返回的 Vue 實例：
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.use(/* ... */);
app.mixin(/* ... */);
app.component(/* ... */);
app.directive(/* ... */);
app.mount("#app");
結(jié)束語
總之Vue 3 通過提供一種簡單的方式來組織和共享代碼，并提供強大的 TypeScript 支持，新的代碼組織方式會對未來的應(yīng)用開發(fā)產(chǎn)生重大影響。
同時一些其它的特性，如 Suspense，多個 v-models 等也會給開發(fā)帶來巨大的便利。
同時性能更快，體積更小。它是如何做到的請參考我寫的另一篇文章：Vue.js 作者：關(guān)于 Vue3.0 背后的故事
到此這篇關(guān)于15分鐘上手vue3.0(小結(jié))的文章就介紹到這了,更多相關(guān)vue3.0入門內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家分享一篇vue.js,ajax渲染頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
在Vue應(yīng)用中，有時我們需要實現(xiàn)文件預(yù)覽和打印的功能，比如，我們可能需要預(yù)覽并打印PDF文件、圖片文件等，本文將介紹如何在Vue中實現(xiàn)文件預(yù)覽和打印的功能，并提供相應(yīng)的代碼示例2023-06-06
這篇文章主要為大家詳細介紹了vue3.0翻牌數(shù)字組件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
給大家分享了關(guān)于Vue.js想成為高手的5個總要知識點，需要的朋友可以學習下。2018-04-04
今天小編就為大家分享一篇關(guān)于Vue核心概念Getter的使用方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
ref和reactive一樣,也是用來實現(xiàn)響應(yīng)式數(shù)據(jù)的方法,下面這篇文章主要給大家介紹了關(guān)于vue3給動態(tài)渲染的組件添加ref的解決方案,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
vue-infinite-loading2.0 中文文檔詳解
本篇文章主要介紹了vue-infinite-loading2.0 中文文檔詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
ref在我們開發(fā)項目當中很重要的,在?Vue?中使用?ref?可以提高代碼的可讀性和維護性,因為它直接標識出了組件中需要操作的具體元素或組件實例,本文我將給大家?guī)淼氖莢ue3中用ref獲取dom的操作,文中有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了使用element upload上傳組件如何去掉刪除按鈕2023-07-07
這篇文章主要介紹了vue中實現(xiàn)回車鍵登錄功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02