你準(zhǔn)備好迎接vue3.0了嗎
前言
本月21號晚上看了尤大大的直播，感覺vue3.0離我們越來越近了，預(yù)計年中正式發(fā)布，3.0的改變的確很大，性能提升了很多，很多東西也在靠向react。為了到時可以很快的轉(zhuǎn)入vue3.0的陣營，從現(xiàn)在開始熟悉新的特性是很有必要的。
如果你想在v2.x中使用3.0的內(nèi)容，可通過以下方式
npm install '@vue/composition-api'
在main.js中引入
import VueCompositionApi from '@vue/composition-api'; Vue.use(VueCompositionApi);
數(shù)據(jù)的雙向綁定
V2.x中的數(shù)據(jù)雙向綁定是通過object的defineProperty方法實(shí)現(xiàn)的，通過屬性中的get和set方法中進(jìn)行攔截操作。但是它無法監(jiān)聽數(shù)組的改變，除了使用以下幾種方法可以：push()、pop()、shift()、unshift()、splice()、sort()、reverse()，如果直接使用index設(shè)置數(shù)組的某一項(xiàng)時是無法改變的。
V3.x中改用了proxy和Reflect實(shí)現(xiàn)雙向綁定，它可以從更多方面對對象的變化進(jìn)行監(jiān)聽，除了set 和 get 外，還提供了apply、setPrototypeOf、getPrototypeOf、deletePrototype、isExtensible、preventExtensions、getOwnPropertyDescriptor 、defineProperty、has、ownKeys、construct方法的監(jiān)聽。
對于proxy的實(shí)際應(yīng)用我將在后期專門來講解，本期以VU3.0的實(shí)踐為主
直接上一斤的例子
<template>
<div>
<h3>數(shù)據(jù)綁定</h3>
<div>
<el-button @click="clicksingleVal">
單向綁定 {{singleVal}}
</el-button>
<el-button @click="clickdoubleVal">
雙向綁定 {{doubleVal}}
</el-button>
<el-button @click="clickstateVal">
狀態(tài)綁定 {{stateVal}}
</el-button>
</div>
</div>
</template>
<script>
import {ref, reactive, toRefs} from '@vue/composition-api'
export default {
setup(){
let singleVal = 1
const doubleVal = ref(1)
const state = reactive({
stateVal: 1
})
const methods = {
clicksingleVal(){
singleVal++
console.log(singleVal);
},
clickdoubleVal(){
doubleVal.value++
},
clickstateVal(){
state.stateVal++
},
}
return{
singleVal,
doubleVal,
...toRefs(state),
...methods
}
}
}
</script>
<style>
</style>
如果你是第一次看到上面的寫法可能會有點(diǎn)陌生，這就是在vue3.x中的寫法。在v2.x中的data、methods、computed、watch等內(nèi)容，在v3.x中全部都寫在一個叫 setup 的函數(shù)中。在里面我們可以任意的定義變量、函數(shù)等，最后通過return返回，返回的內(nèi)容可以在模板中進(jìn)行使用。
對于綁定的數(shù)據(jù)在v3.x中進(jìn)行了更加詳細(xì)的分類，可以分為以下三種：
- 單向綁定：var singleVal = 1，數(shù)據(jù)會變化，但是視圖不會更新
- 單個雙向綁定：const doubleVal = ref(1)，使用 doubleVal.value 改變
- 雙向綁定：需要使用 reactive ，使用 state.stateVal 改變值
我們來逐個的進(jìn)行講解：
- 單向綁定，聽名字就可以知道它并不具有雙向綁定的特性或功能，它只會在視圖初始化時綁定一次，這個變量即使后面發(fā)生了改變，視圖也不會更新?？梢詮目刂婆_看到singleVal 的值的確發(fā)生了變化，但界面中始終顯示的為1。變量聲明的方法和我們平時聲明一個變量一樣，如：let singleVal = 1，最后在return中返回。
- 單個雙向綁定，每次只能聲明一個雙向綁定的變量，通過ref函數(shù)創(chuàng)建一個包裝對象，使它包含一個響應(yīng)式的屬性value。例如上面的const doubleVal = ref(1)。如果要改變它的值，需要改變的是它的屬性value上的值，像這樣一樣doubleVal.value++。
- 雙向綁定，通過reactive創(chuàng)建一個響應(yīng)式的對象，這樣創(chuàng)建的對象并不是一個包裝對象，因此不需要使用.value來取值，它等價于 Vue 2.x 的Vue.observable。
const state = reactive({
stateVal: 1
})
return {
...state
}
對reactive的內(nèi)容直接進(jìn)行解構(gòu)后返回，會導(dǎo)致響應(yīng)式丟失，需要使用toRefs將reactive對象轉(zhuǎn)為普通對象，這樣結(jié)果對象上的每個屬性都指向原始對象中對應(yīng)屬性的ref引用對象，保證了在使用對象解構(gòu)或拓展運(yùn)算符時響應(yīng)式不會丟失。
對于事件方法，就和聲明一個變量一樣，在setup中聲明，在return返回即可。
計算屬性
引入computed方法，返回計算后的值，這里接著使用上面的例子，用total計算上面3個數(shù)的總和。
import {computed, ref, reactive, toRefs} from '@vue/composition-api'
export default {
setup(){
...
const total = computed(() =>{
return singleVal + doubleVal.value + state.stateVal
})
...
return{
...,
total
}
}
}
從演示效果中我們還可以看出一點(diǎn)，單向綁定的數(shù)據(jù)改變不會觸發(fā)計算屬性方法。
數(shù)據(jù)監(jiān)聽
同樣還是寫在setup中，也比較簡單，沒有什么可講解的
import {computed, ref, reactive, toRefs, watch} from '@vue/composition-api'
...
watch(() => state.stateVal, (newVal, oldVal ) =>{
console.log(newVal, oldVal);
})
...
生命周期
vue3.0中取消了 beforeCreate 和 created 兩個周期，因?yàn)閟etup會在這個這個周期前執(zhí)行，因此你可以在setup中進(jìn)行你需要的處理。其他的生命周期全部以on開頭。
import {
onBeforeMount,
onMounted,
onBeforeUnmount,
onBeforeUpdate,
onDeactivated,
onUnmounted,
onUpdated
} from '@vue/composition-api'
export default {
setup(){
onBeforeMount(() =>{
console.log('onBeforeMount');
})
onMounted(() =>{
console.log('onMounted');
})
onBeforeUnmount(() =>{
console.log('onBeforeUnmount');
})
onBeforeUpdate(() =>{
console.log('onBeforeUpdate');
})
onDeactivated(() =>{
console.log('onDeactivated');
})
onUnmounted(() =>{
console.log('onUnmounted');
})
onUpdated(() =>{
console.log('onUpdated');
})
}
}
Mixin
vue3.0中使用函數(shù)式的API代替原有的mixin，mixin很容易引起命名重合和覆蓋引入mixin的頁面屬性。
在vue3.0中以一個API的形式存在，當(dāng)你需要時，將其引入。直接看例子
mixin.vue
<template>
<div>
<h3>mixins</h3>
<div>
<el-input v-model="searchValue" type="text" @change="onSearch"/>
<div>
<ul>
<li v-for="name in names" :key="name.id" v-show="name.show">
{{name.value}}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import searchName from './searchName.js'
export default {
setup(){
let list = [
{id: 1, value: 'vue', show: true},
{id: 2, value: 'react', show: true},
{id: 3, value: 'angular', show: true},
{id: 4, value: 'elementui', show: true},
{id: 5, value: 'ant', show: true},
{id: 6, value: 'javascript', show: true},
{id: 7, value: 'css', show: true},
]
var {onSearch, names, searchValue} = searchName(list)
return {
onSearch,
names,
searchValue
}
}
}
</script>
<style>
</style>
searchName.js
import {reactive, toRefs} from '@vue/composition-api'
export default function searchName(names){
const state = reactive({
names: names,
searchValue: ''
})
const onSearch = () => {
state.names.forEach(name => {
name.show = name.value.includes(state.searchValue)
})
}
return {
...toRefs(state),
onSearch
}
}
上面我們將搜索功能獨(dú)立到一個js文件中。在 searchName.js 中定義了一些屬性和方法，這里的屬性也是具有響應(yīng)式的，最后返回這些內(nèi)容。在組件中，先引入這個js文件，調(diào)用searchName方法，傳入需要的參數(shù)。在該組件中的searchValue和names兩個響應(yīng)式數(shù)據(jù)并非自身的所有，而是來自searchName.js中，通過下面演示可以看到，他們的確也具有響應(yīng)式的特性。
EventBus
- setup接收兩個參數(shù)
- props：等同于V2.x中的 props：{}，用于接收父組件傳遞的參數(shù)
ctx：上下文環(huán)境。在2.x中的this指向的是全局VUE實(shí)例，可以使用this.
setup(props, ctx){
...
const total = computed(() =>{
let total = singleVal + doubleVal.value + state.stateVal
ctx.root.$root.$emit('handleClick', {number: total })
return total
})
...
}
...
ctx.root.$root.$on('handleClick', (val) =>{
console.log('我是通過ctx.root.$root.$on觸發(fā)的，接收的值為：' + val.number);
state.otherTotal = val.number
})
...
最后附上composition-api的github：https://github.com/vuejs/composition-api
到此這篇關(guān)于你準(zhǔn)備好迎接vue3.0了嗎的文章就介紹到這了,更多相關(guān)vue3.0內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue 實(shí)現(xiàn)從文件中獲取文本信息的方法詳解
這篇文章主要介紹了Vue 實(shí)現(xiàn)從文件中獲取文本信息的方法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js基于export導(dǎo)出的文件信息讀取相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
Vue聯(lián)動Echarts實(shí)現(xiàn)數(shù)據(jù)大屏展示
這篇文章主要為大家介紹了Vue聯(lián)動Echarts實(shí)現(xiàn)數(shù)據(jù)大屏的展示示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
這篇文章主要介紹了Vue.js實(shí)現(xiàn)的購物車功能,結(jié)合實(shí)例形式分析了vue.js購物車的原理、數(shù)值計算及頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
關(guān)于vue-admin-template模板連接后端改造登錄功能
這篇文章主要介紹了關(guān)于vue-admin-template模板連接后端改造登錄功能,登陸方法根據(jù)賬號密碼查出用戶信息，根據(jù)用戶id與name生成token并返回，userinfo則是對token進(jìn)行獲取，在查出對應(yīng)值進(jìn)行返回，感興趣的朋友一起看看吧2022-05-05
深入探索Vue中樣式綁定的七種實(shí)現(xiàn)方法
在?Vue.js?開發(fā)中,合理地控制元素的樣式對于構(gòu)建高質(zhì)量的用戶界面至關(guān)重要,Vue?提供了靈活的方式來綁定樣式,這篇文章將探索?Vue?中設(shè)置樣式的七種做法,并結(jié)合代碼,逐步說明每種方法的實(shí)現(xiàn),需要的朋友可以參考下2024-03-03
vue前端實(shí)現(xiàn)login頁登陸驗(yàn)證碼代碼示例
現(xiàn)在我們管理后臺有個需求,就是登錄頁面需要獲取驗(yàn)證碼,用戶可以輸入驗(yàn)證碼后進(jìn)行登錄,這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)login頁登陸驗(yàn)證碼的相關(guān)資料,需要的朋友可以參考下2024-05-05
vue路由跳轉(zhuǎn)時判斷用戶是否登錄功能的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄獀ue路由跳轉(zhuǎn)時判斷用戶是否登錄功能的實(shí)現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vue3的ref,computed,reactive和toRefs你都了解嗎
這篇文章主要為大家詳細(xì)介紹了vue3的ref,computed,reactive和toRefs，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了vue 父組件調(diào)用子組件方法及事件的相關(guān)資料，父組件傳入數(shù)組子組件循環(huán)來創(chuàng)建不同的組件模塊,所有事件都在子組件內(nèi)部.怎么實(shí)現(xiàn)這樣一個功能呢？接下來跟隨腳本之家小編一起看看吧2018-03-03
Vue?是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，Vue?的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合，這篇文章主要介紹了vue的指令和插值總結(jié),需要的朋友可以參考下2022-10-10