目錄
一、組合API
二、帶ref響應(yīng)式變量
三、帶reactive響應(yīng)式變量
四、computed計(jì)算屬性
五、watch響應(yīng)式更改
六、props傳值
七、emit回調(diào)
八、provide/inject

一、 組合API

通過創(chuàng)建 Vue 組件，我們可以將接口的可重復(fù)部分及其功能提取到可重用的代碼段中。僅此一項(xiàng)就可以使我們的應(yīng)用程序在可維護(hù)性和靈活性方面走得更遠(yuǎn)。然而，我們的經(jīng)驗(yàn)已經(jīng)證明，光靠這一點(diǎn)可能是不夠的，尤其是當(dāng)你的應(yīng)用程序變得非常大的時(shí)候——想想幾百個(gè)組件。在處理如此大的應(yīng)用程序時(shí)，共享和重用代碼變得尤為重要。
用組件的選項(xiàng) (data、computed、methods、watch) 組織邏輯在大多數(shù)情況下都有效。然而，當(dāng)我們的組件變得更大時(shí)，邏輯關(guān)注點(diǎn)的列表也會(huì)增長(zhǎng)。這可能會(huì)導(dǎo)致組件難以閱讀和理解，尤其是對(duì)于那些一開始就沒有編寫這些組件的人來說。這種碎片化使得理解和維護(hù)復(fù)雜組件變得困難。選項(xiàng)的分離掩蓋了潛在的邏輯問題。此外，在處理單個(gè)邏輯關(guān)注點(diǎn)時(shí)，我們必須不斷地“跳轉(zhuǎn)”相關(guān)代碼的選項(xiàng)塊。
如果我們能夠?qū)⑴c同一個(gè)邏輯關(guān)注點(diǎn)相關(guān)的代碼配置在一起會(huì)更好。而這正是組合式 API 使我們能夠做到的。

<template>
 <h2>{{userName}}</h2>
</template>
<script>
export default {
  components: {},
  props: {
  },
  setup(props) {
    let userName = '星星編程';
    return {userName} 
  }
}
</script>

二、 帶ref響應(yīng)式變量

ref 接受參數(shù)并返回它包裝在具有 value property 的對(duì)象中，然后可以使用該 property 訪問或更改響應(yīng)式變量的值。

<template>
 <h2>{{userName}}</h2>
 <input type="text" v-model="userName" />
</template>
<script>
import { ref } from 'vue'
export default {
  setup(props) {
    let userName = ref('星星編程');
    return {userName} 
  }
}
</script>

三、帶reactive響應(yīng)式變量

reactive 返回對(duì)象的響應(yīng)式副本。響應(yīng)式轉(zhuǎn)換是“深層”的——它影響所有嵌套 property。在基于 ES2015 Proxy 的實(shí)現(xiàn)中，返回的 proxy 是不等于原始對(duì)象的。建議只使用響應(yīng)式 proxy，避免依賴原始對(duì)象。

<template>
 <h2>姓名：{{userName}}</h2>
 <h2>性別：{{sex}}</h2>
 <h2>職業(yè)：{{job}}</h2>
</template>
<script>
import { reactive, toRefs} from 'vue'
export default {
  setup(props) {
    let user  = reactive({
        userName:'星星編程',
        sex:'男',
        job:'前端開發(fā)工程師'
    });
    return {
        ...toRefs(user)
    } 
  }
}
</script>

四、computed計(jì)算屬性

computed使用 getter 函數(shù)，并為從 getter 返回的值返回一個(gè)不變的響應(yīng)式 ref 對(duì)象。
computed 函數(shù)返回一個(gè)作為 computed 的第一個(gè)參數(shù)傳遞的 getter 類回調(diào)的輸出的一個(gè)只讀的響應(yīng)式引用。為了訪問新創(chuàng)建的計(jì)算變量的 value，我們需要像使用 ref 一樣使用 .value property。

<template>
 <h2>{{tip}}</h2>
</template>
<script>
import { computed } from 'vue'
export default {
  setup(props) {
    let userName = '星星編程';
    let tip = computed(()=>{
         return '歡迎關(guān)注' + userName + '微信公眾號(hào)！' ;
     })
    return {
       tip
    } 
  }
}
</script>

五、watch響應(yīng)式更改

watch 需要偵聽特定的數(shù)據(jù)源，并在單獨(dú)的回調(diào)函數(shù)中執(zhí)行副作用。默認(rèn)情況下，它也是惰性的——即回調(diào)僅在偵聽源發(fā)生更改時(shí)調(diào)用。

<template>
  <h2>count:{{ count }}</h2>
  <button @click="random">隨機(jī)數(shù)</button>
</template>
<script>
import { reactive, toRefs, watch } from "vue";
export default {
  setup() {
    const state = reactive({ count: 0 });
    watch(
      () => state.count,
      (count, prevCount) => {
          console.log(prevCount);
      }
    );
    function random() {
      state["count"] = Math.round(Math.random()*10000) ;
    }
    return { ...toRefs(state), random };
  },
};
</script>

六、props傳值

1、父組件通過userName屬性將userName傳遞給子組件DemoComponent。

<template>
 <DemoComponent :userName='userName'></DemoComponent>
</template>
<script>
import DemoComponent from '@src/components/DemoComponent.vue';
export default {
  components:{ DemoComponent },
  setup(props) {
    let userName = '星星編程';
    return {
       userName
    } 
  }
}
</script>

2、子組件DemoComponent接收父組件傳遞userName參數(shù)。

<template>
 <h2>{{userName}}</h2>
</template>
<script>
export default {
  props: {
    userName: String
  },
  setup(props) {
    let userName = props.userName;
    return {
       userName
    } 
  }
}
</script>

七、emit回調(diào)

1、父組件實(shí)現(xiàn)子組件DemoComponent的callback函數(shù)，并將接收到tip參數(shù)顯示到<h2>標(biāo)簽里。

<template>
<h2>{{userName}}</h2>
 <DemoComponent @callback='showTip'></DemoComponent>
</template>
<script>
import { ref } from 'vue'
import DemoComponent from '@src/components/DemoComponent.vue';
export default {
  components:{ DemoComponent },
  setup(props,content) {
    let userName = ref('星星編程');
    function showTip(tip){
       userName.value = tip;
    }
    return {
       userName,
       callback
    } 
  }
}
</script>

2、子組件DemoComponent通過content.emit實(shí)現(xiàn)callback回調(diào)。

<template>
 <button @click='done'>emit回調(diào)</button>
</template>
<script>
export default {
  props: {
    userName: String
  },
  setup(props,content) {
    function done() {
      content.emit('callback','歡迎關(guān)注星星編程微信公眾號(hào)！')
    }
    return {
        done
    } 
  }
}
</script>

八、provide/inject

provide/inject兩者都只能在當(dāng)前活動(dòng)實(shí)例的 setup() 期間調(diào)用。
1、在 setup() 中使用 provide 時(shí)，我們首先從 vue 顯式導(dǎo)入 provide 方法。這使我們能夠調(diào)用 provide 時(shí)來定義每個(gè) property。
provide 函數(shù)允許你通過兩個(gè)參數(shù)定義 property：
property 的 name (<String> 類型)
property 的 value

<template>
<h2>provide/inject</h2>
<DemoComponent></DemoComponent>
</template>
<script>
import { ref,provide } from 'vue'
import DemoComponent from '@src/components/DemoComponent.vue';
export default {
  components:{ DemoComponent },
  setup() {
    let userName = ref('星星編程');
    provide('userName', userName);
  }
}
</script>

2、在 setup() 中使用 inject 時(shí)，還需要從 vue 顯式導(dǎo)入它。一旦我們這樣做了，我們就可以調(diào)用它來定義如何將它暴露給我們的組件。
inject 函數(shù)有兩個(gè)參數(shù)：
要 inject 的 property 的名稱
一個(gè)默認(rèn)的值 (可選)

<template>
  <h2>{{ userName }}</h2>
</template>
<script>
import { inject } from "vue";
export default {
  setup() {
    const userName = inject("userName", "默認(rèn)名字");
    return {
      userName,
    };
  },
};
</script>

3、provide/inject和props傳值、emit回調(diào)相比傳參更加方便，而且可以跨組件傳參。