快捷導(dǎo)航

你準(zhǔn)備好迎接vue3.0了嗎

更新時間：2020年04月28日 16:00:26 作者：饅頭老爸

這篇文章主要介紹了你準(zhǔn)備好迎接vue3.0了嗎,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

本月21號晚上看了尤大大的直播，感覺vue3.0離我們越來越近了，預(yù)計(jì)年中正式發(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返回即可。

計(jì)算屬性

引入computed方法，返回計(jì)算后的值，這里接著使用上面的例子，用total計(jì)算上面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ā)計(jì)算屬性方法。

數(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.router、this.router、this.router、this.commit、this.emit等方法進(jìn)行路由的跳轉(zhuǎn)等操作。而在3.0中不能直接訪問到this，如果你嘗試輸出this，你回看到它的值是undefined。但可以通過ctx.root.emit等方法進(jìn)行路由的跳轉(zhuǎn)等操作。而在3.0中不能直接訪問到this，如果你嘗試輸出this，你回看到它的值是undefined。但可以通過ctx.root.emit等方法進(jìn)行路由的跳轉(zhuǎn)等操作。而在3.0中不能直接訪問到this，如果你嘗試輸出this，你回看到它的值是undefined。但可以通過ctx.root.root.$emit將內(nèi)容掛在到 $root 上，以使得任何地方都可以訪問到。

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: