3分鐘帶你體驗Vue3.0

時間 2019-11-06

標籤 3分體驗 vue3.0 vue 简体版

原文原文鏈接

最近，Vue官方發佈了 Composition API RFC。有關於Vue3.0 Function Base組件相關討論正如火如荼。雖然Vue3.0還未發佈，可是 Vue官方發佈了關於 Composition API的官方插件，使廣大用戶能夠在Vue2.x中享受 Function Base 帶來的新體驗。下面我會在一個簡單的demo中介紹Composition API使用方法。vue

安裝和使用

yarn add @vue/composition-api
複製代碼

等待composition-api包安裝完成後，咱們在項目入口文件中加入Composition API。react

import Vue from "vue"
import CompositionApi from "@vue/composition-api"
Vue.use(CompositionApi)
複製代碼

setup函數

按照官方給出的說法，setup函數是一個新的Vue組件選項，是用於在組件中使用Composition API的入口。api

setup函數在組件初始化了props以後，created以前調用，這時候咱們才能經過setup來傳遞props。dom

綁定數據(data)

reactive函數接受一個對象，並返回該對象的代理，經過reactive這種方式咱們能夠綁定代理對象。函數

import {reactive} from "@vue/composition-api"
export default {
    setup(props) {
        let vue = react({version:'2.x'})
        vue.version = '3.x'
    }
    return {
        vue
    }
}
複製代碼

ref是CompositionAPI引入的新概念。做用是使訪問響應式的變量不依賴於實例的this。若是使用了ref，咱們訪問響應式的變量時使用.value而不是從this中獲取,其底層是採用reactive方法實現。性能

import {ref} from "@vue/composition-api"
export default {
    setup() {
        const count = ref(0)//count初始值爲0，會相應變化
        count.value = 10;//設置count值爲10，使用.value形式
        return {
            count//必須將count return 回去
        }
    }
}
複製代碼

綁定生命週期函數

可使用導入的onXXX的形式註冊生命週期函數，舉個例子：學習

import {onCreated,onMounted} from "@vue/composition-apai"
export default {
    setup() {
        onMounted(()=>{
            console.log('mounted被觸發')
        })
        ///...其餘相似
    }
}
複製代碼

注意:如下生命週期函數用setup函數替代：ui

beforeCreated
created

綁定方法(methods)

在Composition API中，咱們使用普通的函數定義方法，這樣能夠最大程度的增長複用性。例如：this

<template>
<button @click="add">click me!</button>
</template>
<script>
export default {
    setup() {
        function add() {
            console.log('add被觸發')
        }
        return {
            add//必須將函數return
        }
    }
}
</script>
複製代碼

外部屬性(props)

定義props和原來的方式同樣，props會經過參數的形式傳入到setup函數中：spa

export default {
    props:{
        name:String
    },
    setup(props) {
        console.log(props.name)
    }
}
複製代碼

計算屬性(computed)

計算屬性可使用Composition API提供的computed函數進行定義：

import {computed,ref} from "@vue/composition-apai"
export default {
    setup() {
        const a = ref(0)
        const b = ref(1);
        const total = computed(()=>a.value+b.value)
        return {
            a,
            b,
            totla
        }
    }
}
複製代碼

這樣咱們就定義好了一個計算屬性total，total.value = a.value + b.value。

偵聽器(watch)

在組件中添加watch監聽咱們能夠採用Composition API提供的watch函數實現：

import {watch,ref} from "@vue/composition-apai"
export default {
    setup() {
        const count = ref(100);
        watch(()=>count.vlaue,()=>{
            console.log('count數值發生變化了')
        })
        const.value = 200;
        return {
            count
        }
    }
}
複製代碼

實例屬性($refs)

在Composition API中使用ref特性獲取組件實例或者dom節點，舉個例子說明：

<template>
<div>
    <hello-world ref="helloWold"></hello-world>
    <button ref="btn"></button>
</div>
</template>
import {ref} from "@vue/composition-api"
export default {
    setup() {
        const helloWorld = ref(null);//helloworld組件實例
        const btn = ref(null);//button dom節點對象
        return {
            btn,
            helloWorld
        }
    }
}
複製代碼

綜合例子

<template>
    <div>
        <button @click="increment" ref="btn">{{titleCount}}</button>
    </div>
</template>

<script>

import {onMounted,computed,ref,watch} from "@vue/composition-api"
export default {
  props:{
    prefix:String
  },
  setup(props) {
    const btn = ref(null);
    const count = ref(0);
    const title = ref(`${props.prefix},vue composition api`);
    const titleCount = computed(()=>title.value +':'+ count.value)
    onMounted(()=>{
      alert('mounted')
    })
    watch(()=>count.value,()=>alert('count改變了:'+count.value))
    function increment() {
      // eslint-disable-next-line no-console
      count.value++;
      // eslint-disable-next-line no-console
      console.log(btn.value);
    }

    return {
      btn,
      increment,
      title,
      count,
      titleCount
    }
  }
}
</script>
複製代碼

下圖是運行效果：