技術文章 » 介紹Vue3中Composition API及其核心用法

介紹Vue3中Composition API及其核心用法

2021-12-10 16:00:34
Vue3中Composition API的核心用法

什麼是Composition API?

Composition API也叫組合式API，是Vue3.x中的新特性。通過建立Vue元件，我們可以將介面的可重複部分提取到可重用的程式碼段中，沒有Composition API之前Vue相關業務的程式碼需要設定到option的特定區域，如果在大型專案中這種方式會導致後期的維護性比較複雜，同時程式碼可複用性不高，Vue3的Composition API就是解決這個問題的。

在setup中使用ref和reactive定義響應式資料

使用ref和reactive定義資料前，需要從vue中進行解構。

import {ref,reactive} from 'vue';

ref和reactive均可以定義響應式資料，定義的資料在Vue模板中可以直接獲取，但是如果通過方法獲取的話，ref和reactive定義的資料在獲取上有一定的差異，ref定義的需要通過value屬性間接獲取，reactive定義的資料可以直接獲取，在修改這兩類資料也是如此。

export default {
  setup() {
    // 使用ref定義響應式資料
    const title = ref("這是一個標題");
    // 使用reactive定義響應式資料
    const userinfo = reactive({
      username: "張三",
      age: 20
    });
    // 獲取reactive中的屬性可以直接獲取
    const getUserName = () => {
      alert(userinfo.username)
    };
    // 獲取ref中的資料需要通過value屬性
    const getTitle = () => {
      alert(title.value)
    };
    const setUserName = () => {
      // 修改reactive中的屬性可以直接修改
      userinfo.username = "修改後的張三"
    };
    const setTitle = () => {
      // 修改ref中的屬性，需要通過value
      title.value = "這是修改後的標題"
    };
    return {
      title,
      userinfo,
      getUserName,
      getTitle,
      setTitle,
      setUserName
    }
  },
  data() {
    return {
      msg: "這是Home元件的msg"
    }
  },
  methods: {
    run() {
      alert('這是Home元件的run方法')
    }
  }
}

可以使用v-model直接進行雙向資料繫結。

<input type="text" v-model="title">
<input type="text" v-model="userinfo.username">

toRefs解構響應式物件資料

之所以需要toRefs是因為通過toRefs解構的資料還具有響應式的特性，通過傳統的拓展運運算元進行解構則不具備了響應式的特性，這就是為什麼需要toRefs的原因。

從vue中解構出toRefs

import {ref,reactive,toRefs} from 'vue';

setup的返回資料中進行如下的修改

return {
  title,
  userinfo,
  getUserName,
  getTitle,
  setTitle,
  setUserName,
  ...toRefs(article)
}

setup中的計算屬性

setup中的計算屬性和一般的計算屬性類似，區別在於無法讀取到this。

setup() {
    let userinfo = reactive({
      firstName: "",
      lastName: ""
    });
    let fullName = computed(() => {
      return userinfo.firstName + " " + userinfo.lastName
    })
    return {
      ...toRefs(userinfo),
      fullName
    }
  }

readonly:深層的唯讀代理

readonly存在的意義是能夠將響應式物件轉換為普通的原始物件。

引入readonly。

import {computed, reactive,toRefs,readonly} from 'vue'

給readonly傳入響應式物件。

let userinfo = reactive({
  firstName: "666",
  lastName: ""
});
userinfo = readonly(userinfo);

setup中的watchEffect

setup中的watchEffect具有以下幾個特點。

能夠監聽setup中的資料變化，資料一旦變化就會執行watchEffect中的回撥函數。

及時setup中的資料沒有變化，初始的時候也會執行一次。

setup() {
    let data = reactive({
      num: 1
    });
    watchEffect(() => {
      console.log(`num2=${data.num}`);
    });
    setInterval(() => {
      data.num++;
    },1000)
    return {
      ...toRefs(data)
    }
  }

setup中的watch

使用watch監控資料的基本方法。

setup() {
    let keyword = ref("111");
    watch(keyword,(newData,oldData) => {
      console.log("newData是：",newData);
      console.log("oldData是：",oldData);
    })
    return {
      keyword
    }
  }

watch與watchEffect的區別

watch在首次頁面渲染的時候不會執行，但是watchEffect會。

watch能夠獲取到資料狀態變化前後的值。

setup中的生命週期勾點函數

208783b4bcd7ac9d3daafd095ccd23d.png

在setup中生命週期勾點類似於直接呼叫一個函數。

  setup() {
    let keyword = ref("111");
    watch(keyword,(newData,oldData) => {
      console.log("newData是：",newData);
      console.log("oldData是：",oldData);
    })
    onMounted(() => {
      console.log('onMounted');
    })
    onUpdated(() => {
      console.log('onUpdated');
    })
    return {
      keyword
    }
  }

setup中的props

父元件進行傳值。

<Search :msg="msg" />

宣告接收

props: ['msg'],
  setup(props) {
    console.log(props);
  }

Provide與inject

有時，我們需要將資料從父元件傳遞到子元件，但是如果父元件到子元件是一個巢狀很深的關係，通過props進行傳遞將變得很麻煩，這種情況下，我們可以使用provide和inject來實現。

  • 一般用法

根元件通過provide傳遞資料。

export default {
  data() {
    return {
    }
  },
  components: {
    Home
  },
  provide() {
    return {
      title: "app元件裡面的標題"
    }
  }
}

需要接收資料的元件通過inject宣告接收

export default {
  inject: ['title'],
  data() {
    return {
    }
  },
  components: {
  }
}

宣告接收後可以直接使用。

<template>
  <div class="container">
    這是Location元件
    {{title}}
  </div>
</template>

  • provide能夠獲取到this中的資料

export default {
  data() {
    return {
      title: "根元件的資料"
    }
  },
  components: {
    Home
  },
  provide() {
    return {
      title: this.title
    }
  }
}

注意:上面的一般用法中，如果父元件中的資料發生了變化，子元件的不會發生變化，因此推薦使用下面的composition API中的provide與inject能夠實現同步變化。

setup中的provide與inject

根元件

import Home from './components/Home.vue'
import {ref,provide} from 'vue'
export default {
  setup() {
    let title = ref('app根元件裡面的title');
    let setTitle = () => {
      title.value = "改變後的title"
    }
    provide("title",title);
    return {
      title,
      setTitle
    }
  },
  data() {
    return {
    }
  },
  components: {
    Home
  }
}

用到資料的元件

import {inject} from 'vue'
export default {
  setup() {
    let title = inject('title');
    return {
      title
    }
  },
  data() {
    return {
    }
  },
  components: {
  }
}

與props不同的是，子元件中的資料如果使用了雙向資料繫結會同步到父元件。

推薦學習：《》

以上就是介紹Vue3中Composition API及其核心用法的詳細內容，更多請關注TW511.COM其它相關文章！