?1、選項式API與組合式API

在vue中我們有兩種API，一種是選項式，一種是組合式，其中選項式主要用于vue2，組合式主要用于vue3。

選項式API(Option API)?

在vue2中我們書寫選項式API，每個選項都有固定的書寫位置，使用data選項來書寫響應(yīng)式數(shù)據(jù)，methods中書寫方法。

• 優(yōu)點(diǎn)：寫代碼的位置已經(jīng)約定好，結(jié)構(gòu)清晰

• 缺點(diǎn)：代碼組織性差，相似的邏輯代碼不便于復(fù)用，邏輯復(fù)雜代碼多了不好閱讀，同一功能的上下文代碼難找。

• export default{
      data(){
          return{
              list:[]
          }
      },
      methods:{
      //書寫方法函數(shù)，在需要讀取data中定義的數(shù)據(jù)時，需要使用this. 來獲取，所以里面不能使用箭頭函數(shù)
         
   },
     
      }
  

  組合式API(composition)

? ? ? ? ?所有與特定功能相關(guān)地代碼可以寫到一塊，代碼比較集中，在定義響應(yīng)式數(shù)據(jù)時不在需要data，方法函數(shù)也不再寫在metgods中

<script setup>
import { computed,watch,ref ,reactive} from "vue";
//定義響應(yīng)式數(shù)據(jù)
const num = ref('');
const list = reactive([]);
//定義方法
const getNum=()=>{
    
}

</script>

?2、生命周期函數(shù)

? ? 最常用的兩個鉤子函數(shù)是onMounted、onUpdated。在onMounted我們一般需要將頁面需要的數(shù)據(jù)拿到，在頁面渲染時，渲染到頁面上。setup只會執(zhí)行一次，在頁面加載之前執(zhí)行。

?3、響應(yīng)式數(shù)據(jù)的定義

1、reactive

我們可以使用reactive()來創(chuàng)建一個數(shù)組或者對象

import { reactive } from 'vue'
const todolist = reactive([])

在template中直接使用，在方法或者回調(diào)函數(shù)中使用todolist

reactive() 的局限性

1. 僅對對象類型有效（對象、數(shù)組和 Map、Set 這樣的集合類型），而對 string、number 和 boolean 這樣的 原始類型 無效。

2. 因為 Vue 的響應(yīng)式系統(tǒng)是通過屬性訪問進(jìn)行追蹤的，因此我們必須始終保持對該響應(yīng)式對象的相同引用。這意味著我們不可以隨意地“替換”一個響應(yīng)式對象，因為這將導(dǎo)致對初始引用的響應(yīng)性連接丟失。

3. 同時這也意味著當(dāng)我們將響應(yīng)式對象的屬性賦值或解構(gòu)至本地變量時，或是將該屬性傳入一個函數(shù)時，我們會失去響應(yīng)性

   2、ref()

   ref()聲明的值，在模板中可以直接使用，ref()將傳入?yún)?shù)的值包裹在一個帶有.value屬性的ref對象中，所以在調(diào)用ref聲明的值時，需要調(diào)用它的,value，才可以拿到對應(yīng)的值。一個包含對象類型值的 ref 可以響應(yīng)式地替換整個對象。

   ref 被傳遞給函數(shù)或是從一般對象上被解構(gòu)時，不會丟失響應(yīng)性

   //使用ref定義響應(yīng)式數(shù)據(jù)
   const sum = ref(0);
   const todoval = ref('');
   const arr = ref([1,3,5]);
   ?
   //在模板中直接使用
   <template>
   <p>{{ count }}</p>
   <ul>
    ?  <li v-for="(item,index) in arr" :key="index"></li>
   </ul>
   </template>
   ?
   //在方法中使用需要使用.value才可以拿到對應(yīng)的值
   const addTodo =()=>{
    ?  emit('add',todoVal.value)
    ? ? ? ? todoVal.value=''
   };
   ?

   3、toref()

   轉(zhuǎn)換響應(yīng)式對象中某個屬性為單獨(dú)響應(yīng)式數(shù)據(jù)，并且值是關(guān)聯(lián)的。是基于響應(yīng)式對象上的一個屬性，創(chuàng)建一個對應(yīng)的ref,這樣創(chuàng)建的ref與原屬性保持同步，改變原屬性的值，將改變ref的值。

   const state = reactive({
     a: 1,
     b: 2
   })
   const fooRef = toRef(state, 'a')
   // 更改該 ref 會更新源屬性
   aRef.value++
   console.log(state.a) // 2
   // 更改源屬性也會更新該 ref
   state.a++
   console.log(aRef.value) // 3
   ?
   請注意，這不同于：
   const aRef = ref(state.a)//1 不會改變ref的值，因為他接受到的是一個純數(shù)值

   4、torefs()

   將一個響應(yīng)式對象轉(zhuǎn)換成一個普通的對象，這個普通對象的每個屬性都是指向原對象相應(yīng)屬性的ref，每個單獨(dú)的ref都是根據(jù)toref()創(chuàng)建的。

   toRefs 在調(diào)用時只會為源對象上可以枚舉的屬性創(chuàng)建 ref。如果要為可能還不存在的屬性創(chuàng)建 ref，需要調(diào)用toref

   const state = reactive({
     foo: 1,
     bar: 2
   })
   ?
   const stateAsRefs = toRefs(state)
   // 這個 ref 和源屬性已經(jīng)“鏈接上了”
   state.foo++
   console.log(stateAsRefs.foo.value) // 2
   ?
   stateAsRefs.foo.value++
   console.log(state.foo) // 3

   4、copmuted()

• computed函數(shù)，是用來定義計算屬性的，計算屬性不能修改。

computed函數(shù)接受一個getter函數(shù)，返回一個只讀的ref對象，該對象是一個響應(yīng)式的，該對象通過.value暴露getter的返回值，它也可以創(chuàng)建一個帶有g(shù)et set的響應(yīng)式ref對象。

創(chuàng)建一個只讀的計算屬性ref

const sum = ref(0);

const sumadd = computed(()=>{
 console.log('sum',sum.value)
});

?創(chuàng)建一個可寫的計算屬性 ref，通過get set 創(chuàng)建一個響應(yīng)式對象

const count = ref(1)

const changecount = computed(()=>{
get:()=>count.value++;
set:(sum)=>{
count.value=sum+1
}
})

?5、watch事件監(jiān)聽函數(shù)

watch() 偵聽一個或多個響應(yīng)式數(shù)據(jù)源，并在數(shù)據(jù)源變化時調(diào)用所給的回調(diào)函數(shù),watch() 默認(rèn)是懶偵聽的，即僅在偵聽源發(fā)生變化時才執(zhí)行回調(diào)函數(shù)。
第一個參數(shù)是偵聽器的源。這個來源可以是以下幾種：

• 一個函數(shù)，返回一個值
• 一個 ref
• 一個響應(yīng)式對象
• ...或是由以上類型的值組成的數(shù)組

第二個參數(shù)是在發(fā)生變化時要調(diào)用的回調(diào)函數(shù)。

• watch函數(shù)，是用來定義偵聽器的
• 監(jiān)聽ref定義的響應(yīng)式數(shù)據(jù)
• 監(jiān)聽多個響應(yīng)式數(shù)據(jù)數(shù)據(jù)
• 監(jiān)聽reactive定義的響應(yīng)式數(shù)據(jù)
• 某一個屬性深度監(jiān)聽
• 默認(rèn)執(zhí)行

當(dāng)直接偵聽一個響應(yīng)式對象時，偵聽器會自動啟用深層模式?

監(jiān)聽ref定義的響應(yīng)式數(shù)據(jù)

import {ref,reactive,watch} from 'vue';
const num =ref(0)
const changeNum = ()=>{
    num.value +=1
}
watch(num,()=>{
    console.log('num改變了',num.value)

})

?

監(jiān)聽reactive定義的響應(yīng)式數(shù)組

const list =reactive([{name:'張三',id:1},{name:'李四',id:2}])

const changeList = ()=>{
    list.push({name:'李華',id:2})
}

watch(list,()=>{
    console.log('list改變了',list)
})

?監(jiān)聽reactive定義的響應(yīng)式對象，在讀取以及修改數(shù)據(jù)時，要使用對姓名.鍵值? 的方式

<h1>{{ person.name }}</h1>
<button @click="getName">點(diǎn)我</button>


const person = reactive({name:'xiaoming'})
const getName=()=>{
    person.name='tom'
}
watch(person,()=>{
    console.log('person改變了',person)
})

?watchEffect()

watch選項來偵聽data或者props的數(shù)據(jù)變化，當(dāng)數(shù)據(jù)變化時執(zhí)行某一些操作，watchEffect() 立即運(yùn)行一個函數(shù)，同時響應(yīng)式地追蹤其依賴，并在依賴更改時重新執(zhí)行。?

const name = ref("jeck");
      const age = ref(18);
 
      const changeName = () => name.value = "bob"
      const changeAge = () => age.value++
 
      watchEffect(() => {
        console.log("name:", name.value, "age:", age.value);
      });

停止監(jiān)聽 stop()

const name = ref("jeck");
      const age = ref(18);
      const stop = watchEffect(() => {
        console.log("name:", name.value, "age:", age.value);
      });
      const changeName = () => name.value = "bob"
      const changeAge = () => {
        age.value++;
       
        if(age.value>23){
            stop()
        }
    }

取消?watchEffect()函數(shù)的副作用文章來源地址http://www.zghlxwxcb.cn/news/detail-766695.html

watchEffect(async (onCleanup) => {
  const { response, cancel } = doAsyncWork(id.value)
  // `cancel` 會在 `id` 更改時調(diào)用
  // 以便取消之前
  // 未完成的請求
  onCleanup(cancel)
  data.value = await response
})

到了這里，關(guān)于組合式(Composition)API的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！