Vue3中Composition API怎么用

這篇文章主要為大家展示了“Vue3中Composition API怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“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中的生命周期鉤子函數

在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怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！