這篇文章主要為大家展示了“Vue3中Composition API怎么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Vue3中Composition API怎么用”這篇文章吧。

成都創(chuàng)新互聯(lián)公司從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目網(wǎng)站設計制作、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元臨川做網(wǎng)站,已為上家服務,為臨川各地企業(yè)和個人服務,聯(lián)系電話:028-86922220

什么是Composition API?

Composition API也叫組合式API，是Vue3.x中的新特性。通過創(chuàng)建Vue組件，我們可以將接口的可重復部分提取到可重用的代碼段中，沒有Composition API之前Vue相關業(yè)務的代碼需要配置到option的特定區(qū)域，如果在大型項目中這種方式會導致后期的維護性比較復雜，同時代碼可復用性不高，Vue3的Composition API就是解決這個問題的。

在setup中使用ref和reactive定義響應式數(shù)據(jù)

使用ref和reactive定義數(shù)據(jù)前，需要從vue中進行解構。

import {ref,reactive} from 'vue';

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

export default {
  setup() {
    // 使用ref定義響應式數(shù)據(jù)
    const title = ref("這是一個標題");
    // 使用reactive定義響應式數(shù)據(jù)
    const userinfo = reactive({
      username: "張三",
      age: 20
    });
    // 獲取reactive中的屬性可以直接獲取
    const getUserName = () => {
      alert(userinfo.username)
    };
    // 獲取ref中的數(shù)據(jù)需要通過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直接進行雙向數(shù)據(jù)綁定。

toRefs解構響應式對象數(shù)據(jù)

之所以需要toRefs是因為通過toRefs解構的數(shù)據(jù)還具有響應式的特性，通過傳統(tǒng)的拓展運算符進行解構則不具備了響應式的特性，這就是為什么需要toRefs的原因。

從vue中解構出toRefs

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

setup的返回數(shù)據(jù)中進行如下的修改

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

setup中的計算屬性

setup中的計算屬性和一般的計算屬性類似，區(qū)別在于無法讀取到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具有以下幾個特點。

能夠監(jiān)聽setup中的數(shù)據(jù)變化，數(shù)據(jù)一旦變化就會執(zhí)行watchEffect中的回調(diào)函數(shù)。

及時setup中的數(shù)據(jù)沒有變化，初始的時候也會執(zhí)行一次。

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

setup中的watch

使用watch監(jiān)控數(shù)據(jù)的基本方法。

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

watch與watchEffect的區(qū)別

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

watch能夠獲取到數(shù)據(jù)狀態(tài)變化前后的值。

setup中的生命周期鉤子函數(shù)

在setup中生命周期鉤子類似于直接調(diào)用一個函數(shù)。

  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

父組件進行傳值。

聲明接收

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

Provide與inject

有時，我們需要將數(shù)據(jù)從父組件傳遞到子組件，但是如果父組件到子組件是一個嵌套很深的關系，通過props進行傳遞將變得很麻煩，這種情況下，我們可以使用provide和inject來實現(xiàn)。

• 一般用法

根組件通過provide傳遞數(shù)據(jù)。

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

需要接收數(shù)據(jù)的組件通過inject聲明接收

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

聲明接收后可以直接使用。

• provide能夠獲取到this中的數(shù)據(jù)

export default {
  data() {
    return {
      title: "根組件的數(shù)據(jù)"
    }
  },
  components: {
    Home
  },
  provide() {
    return {
      title: this.title
    }
  }
}

注意:上面的一般用法中，如果父組件中的數(shù)據(jù)發(fā)生了變化，子組件的不會發(fā)生變化，因此推薦使用下面的composition API中的provide與inject能夠實現(xiàn)同步變化。

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
  }
}

用到數(shù)據(jù)的組件

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

與props不同的是，子組件中的數(shù)據(jù)如果使用了雙向數(shù)據(jù)綁定會同步到父組件。

以上是“Vue3中Composition API怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！