你準備好迎接vue3.0了嗎
前言
本月21號晚上看了尤大大的直播,感覺vue3.0離我們越來越近了,預計年中正式發(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方法實現(xiàn)的,通過屬性中的get和set方法中進行攔截操作。但是它無法監(jiān)聽數(shù)組的改變,除了使用以下幾種方法可以:push()、pop()、shift()、unshift()、splice()、sort()、reverse(),如果直接使用index設(shè)置數(shù)組的某一項時是無法改變的。
V3.x中改用了proxy和Reflect實現(xiàn)雙向綁定,它可以從更多方面對對象的變化進行監(jiān)聽,除了set 和 get 外,還提供了apply、setPrototypeOf、getPrototypeOf、deletePrototype、isExtensible、preventExtensions、getOwnPropertyDescriptor 、defineProperty、has、ownKeys、construct方法的監(jiān)聽。
對于proxy的實際應(yīng)用我將在后期專門來講解,本期以VU3.0的實踐為主
直接上一斤的例子
<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>
如果你是第一次看到上面的寫法可能會有點陌生,這就是在vue3.x中的寫法。在v2.x中的data、methods、computed、watch等內(nèi)容,在v3.x中全部都寫在一個叫 setup 的函數(shù)中。在里面我們可以任意的定義變量、函數(shù)等,最后通過return返回,返回的內(nèi)容可以在模板中進行使用。
對于綁定的數(shù)據(jù)在v3.x中進行了更加詳細的分類,可以分為以下三種:
- 單向綁定:var singleVal = 1,數(shù)據(jù)會變化,但是視圖不會更新
- 單個雙向綁定:const doubleVal = ref(1),使用 doubleVal.value 改變
- 雙向綁定:需要使用 reactive ,使用 state.stateVal 改變值
我們來逐個的進行講解:
- 單向綁定,聽名字就可以知道它并不具有雙向綁定的特性或功能,它只會在視圖初始化時綁定一次,這個變量即使后面發(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)容直接進行解構(gòu)后返回,會導致響應(yīng)式丟失,需要使用toRefs將reactive對象轉(zhuǎn)為普通對象,這樣結(jié)果對象上的每個屬性都指向原始對象中對應(yīng)屬性的ref引用對象,保證了在使用對象解構(gòu)或拓展運算符時響應(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 } } }
從演示效果中我們還可以看出一點,單向綁定的數(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 兩個周期,因為setup會在這個這個周期前執(zhí)行,因此你可以在setup中進行你需要的處理。其他的生命周期全部以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的形式存在,當你需要時,將其引入。直接看例子
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 } }
上面我們將搜索功能獨立到一個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實例,可以使用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)于你準備好迎接vue3.0了嗎的文章就介紹到這了,更多相關(guān)vue3.0內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue-router清除url地址欄路由參數(shù)的操作代碼
這篇文章主要介紹了vue-router清除url地址欄路由參數(shù),本文給大家介紹的非常詳細,需要的朋友可以參考下2015-11-11vue3+vue-router+vite實現(xiàn)動態(tài)路由的全過程
動態(tài)路由是根據(jù)不同情況實時變化的路由,在權(quán)限管理系統(tǒng)中,動態(tài)路由常用于根據(jù)用戶角色分配不同的菜單和功能,這篇文章主要介紹了vue3+vue-router+vite實現(xiàn)動態(tài)路由的相關(guān)資料,需要的朋友可以參考下2024-10-10vue使用js-audio-recorder實現(xiàn)錄音功能
這篇文章主要為大家詳細介紹了vue如何使用js-audio-recorder實現(xiàn)錄音功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12Vue使用ElemenUI對table的指定列進行合算的方法
這篇文章主要介紹了Vue使用ElemenUI對table的指定列進行合算的方法,本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-03-03