欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

你準備好迎接vue3.0了嗎

 更新時間:2020年04月28日 16:00:26   作者:饅頭老爸  
這篇文章主要介紹了你準備好迎接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.router、this.router、this.router、this.commit、this.emit轉(zhuǎn)3.0this,thisundefined。ctx.root.emit等方法進行路由的跳轉(zhuǎn)等操作。而在3.0中不能直接訪問到this,如果你嘗試輸出this,你回看到它的值是undefined。但可以通過ctx.root.emit等方法進行路由的跳轉(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)于你準備好迎接vue3.0了嗎的文章就介紹到這了,更多相關(guān)vue3.0內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • VUE axios發(fā)送跨域請求需要注意的問題

    VUE axios發(fā)送跨域請求需要注意的問題

    本篇文章主要介紹了VUE axios發(fā)送跨域請求需要注意的問題,在實際項目中前端使用到vue,后端使用php進行開發(fā)。前端使用axios請求請求遇到的問題,有興趣的可以了解一下
    2017-07-07
  • vue-router清除url地址欄路由參數(shù)的操作代碼

    vue-router清除url地址欄路由參數(shù)的操作代碼

    這篇文章主要介紹了vue-router清除url地址欄路由參數(shù),本文給大家介紹的非常詳細,需要的朋友可以參考下
    2015-11-11
  • vue3+vue-router+vite實現(xiàn)動態(tài)路由的全過程

    vue3+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-10
  • Vue路由守衛(wèi)案例代碼

    Vue路由守衛(wèi)案例代碼

    在Vue中,路由守衛(wèi)分為三種:全局路由守衛(wèi)、獨享路由守衛(wèi)以及組件內(nèi)路由守衛(wèi),本文重點介紹Vue路由守衛(wèi)案例代碼,需要的朋友可以參考下
    2023-02-02
  • vue使用js-audio-recorder實現(xiàn)錄音功能

    vue使用js-audio-recorder實現(xiàn)錄音功能

    這篇文章主要為大家詳細介紹了vue如何使用js-audio-recorder實現(xiàn)錄音功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
    2023-12-12
  • Vue使用ElemenUI對table的指定列進行合算的方法

    Vue使用ElemenUI對table的指定列進行合算的方法

    這篇文章主要介紹了Vue使用ElemenUI對table的指定列進行合算的方法,本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2023-03-03
  • vue3選項式api如何監(jiān)控數(shù)組變化

    vue3選項式api如何監(jiān)控數(shù)組變化

    這篇文章主要介紹了vue3選項式api如何監(jiān)控數(shù)組變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • 實現(xiàn)一個Vue自定義指令懶加載的方法示例

    實現(xiàn)一個Vue自定義指令懶加載的方法示例

    這篇文章主要介紹了實現(xiàn)一個Vue自定義指令懶加載的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-06-06
  • vue 本地服務(wù)不能被外部IP訪問的完美解決方法

    vue 本地服務(wù)不能被外部IP訪問的完美解決方法

    這篇文章主要介紹了vue 本地服務(wù)不能被外部IP訪問的解決方法,本文通過代碼講解的非常詳細,需要的朋友可以參考下
    2018-10-10
  • Vue修改mint-ui默認樣式的方法

    Vue修改mint-ui默認樣式的方法

    下面小編就為大家分享一篇Vue修改mint-ui默認樣式的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02

最新評論