VUE中常用的四種高級方法總結(jié)
1. provide/inject
provide/inject?是 Vue.js 中用于跨組件傳遞數(shù)據(jù)的一種高級技術(shù)，它可以將數(shù)據(jù)注入到一個(gè)組件中，然后讓它的所有子孫組件都可以訪問到這個(gè)數(shù)據(jù)。通常情況下，我們在父組件中使用?provide?來提供數(shù)據(jù)，然后在子孫組件中使用?inject?來注入這個(gè)數(shù)據(jù)。
使用?provide/inject?的好處是可以讓我們在父組件和子孫組件之間傳遞數(shù)據(jù)，而無需手動(dòng)進(jìn)行繁瑣的?props?傳遞。它可以讓代碼更加簡潔和易于維護(hù)。但需要注意的是，provide/inject?的數(shù)據(jù)是非響應(yīng)式的，這是因?yàn)閜rovide/inject是一種更加底層的 API，它是基于依賴注入的方式來傳遞數(shù)據(jù)，而不是通過響應(yīng)式系統(tǒng)來實(shí)現(xiàn)數(shù)據(jù)的更新和同步。
具體來說，provide方法提供的數(shù)據(jù)會(huì)被注入到子組件中的inject屬性中，但是這些數(shù)據(jù)不會(huì)自動(dòng)觸發(fā)子組件的重新渲染，如果provide提供的數(shù)據(jù)發(fā)生了變化，子組件不會(huì)自動(dòng)感知到這些變化并更新。
如果需要在子組件中使用provide/inject提供的數(shù)據(jù)，并且希望這些數(shù)據(jù)能夠響應(yīng)式地更新，可以考慮使用Vue的響應(yīng)式數(shù)據(jù)來代替provide/inject。例如，可以將數(shù)據(jù)定義在父組件中，并通過props將其傳遞給子組件，子組件再通過$emit來向父組件發(fā)送數(shù)據(jù)更新的事件，從而實(shí)現(xiàn)響應(yīng)式的數(shù)據(jù)更新。
下面是一個(gè)簡單的例子，展示了如何在父組件中提供數(shù)據(jù)，并在子孫組件中注入這個(gè)數(shù)據(jù)：
<!-- 父組件 --><template>??<div>????<ChildComponent />??</div></template><script>import ChildComponent from './ChildComponent.vue';export default {??provide: {????message: 'Hello from ParentComponent',??},??components: {????ChildComponent,??},};</script>//上面provide還可以寫成函數(shù)形式export default {????provide(){????????return {??????????????message: this.message????????}????}}<!-- 子組件 --><template>??<div>????<GrandchildComponent />??</div></template><script>import GrandchildComponent from './GrandchildComponent.vue';export default {??inject: ['message'],??components: {????GrandchildComponent,??},};</script><!-- 孫子組件 --><template>??<div>????<p>{{ message }}</p>??</div></template><script>export default {??inject: ['message'],};</script>在上面的例子中，父組件中提供了一個(gè)名為?message?的數(shù)據(jù)，子孫組件中都可以使用?inject?來注入這個(gè)數(shù)據(jù)，并在模板中使用它。注意，子孫組件中的?inject?選項(xiàng)中使用了一個(gè)數(shù)組，數(shù)組中包含了需要注入的屬性名。在這個(gè)例子中，我們只注入了一個(gè)?message?屬性，所以數(shù)組中只有一個(gè)元素。
2. 自定義v-model
要使自定義的Vue組件支持v-model，需要實(shí)現(xiàn)一個(gè)名為value的prop和一個(gè)名為input的事件。在組件內(nèi)部，將value?prop 綁定到組件的內(nèi)部狀態(tài)，然后在對內(nèi)部狀態(tài)進(jìn)行修改時(shí)觸發(fā)input事件。
下面是一個(gè)簡單的例子，展示如何創(chuàng)建一個(gè)自定義的輸入框組件并支持v-model：
<template>??<input :value="value" @input="$emit('input', $event.target.value)" /></template><script>export default {??name: 'MyInput',??props: {????value: String??}};</script>在上面的組件中，我們定義了一個(gè)value?prop，這是與v-model綁定的數(shù)據(jù)。我們還將內(nèi)置的input事件轉(zhuǎn)發(fā)為一個(gè)自定義的input事件，并在事件處理程序中更新內(nèi)部狀態(tài)?，F(xiàn)在，我們可以在父組件中使用v-model來綁定這個(gè)自定義組件的值，就像使用普通的輸入框一樣：
<template>??<div>????<my-input v-model="message" />????<p>{{ message }}</p>??</div></template><script>import MyInput from './MyInput.vue';export default {??components: {????MyInput??},??data() {????return {??????message: ''????};??}};</script>在上面的代碼中，我們通過使用v-model指令來雙向綁定message數(shù)據(jù)和MyInput組件的值。當(dāng)用戶在輸入框中輸入文本時(shí)，MyInput組件會(huì)觸發(fā)input事件，并將其更新的值發(fā)送給父組件，從而實(shí)現(xiàn)了雙向綁定的效果。
3. 事件總線（EventBus）
Vue事件總線是一個(gè)事件處理機(jī)制，它可以讓組件之間進(jìn)行通信，以便在應(yīng)用程序中共享信息。在Vue.js應(yīng)用程序中，事件總線通常是一個(gè)全局實(shí)例，可以用來發(fā)送和接收事件。
以下是使用Vue事件總線的步驟：
3.1 創(chuàng)建一個(gè)全局Vue實(shí)例作為事件總線：
import Vue from 'vue';export const eventBus = new Vue();3.2 在需要發(fā)送事件的組件中，使用$emit方法觸發(fā)事件并傳遞數(shù)據(jù)：
eventBus.$emit('eventName', data);3.3 在需要接收事件的組件中，使用$on方法監(jiān)聽事件并處理數(shù)據(jù)：
eventBus.$on('eventName', (data) => {??// 處理數(shù)據(jù)});需要注意的是，事件總線是全局的，所以在不同的組件中，需要保證事件名稱的唯一性。
另外，需要在組件銷毀前使用$off方法取消事件監(jiān)聽：
eventBus.$off('eventName');這樣就可以在Vue.js應(yīng)用程序中使用事件總線來實(shí)現(xiàn)組件之間的通信了。
4. render方法
Vue 的?render?方法是用來渲染組件的函數(shù)，它可以用來替代模板語法，通過代碼的方式來生成 DOM 結(jié)構(gòu)。相較于模板語法，render?方法具有更好的類型檢查和代碼提示。
下面詳細(xì)介紹 Vue 的?render?方法的使用方法：
4.1 基本語法
render?方法的基本語法如下：
render: function (createElement) {??// 返回一個(gè) VNode}其中?createElement?是一個(gè)函數(shù)，它用來創(chuàng)建 VNode（虛擬節(jié)點(diǎn)），并返回一個(gè) VNode 對象。
4.2 創(chuàng)建 VNode
要?jiǎng)?chuàng)建 VNode，可以調(diào)用?createElement?函數(shù)，該函數(shù)接受三個(gè)參數(shù)：
標(biāo)簽名或組件名
可選的屬性對象
子節(jié)點(diǎn)數(shù)組
例如，下面的代碼創(chuàng)建了一個(gè)包含文本節(jié)點(diǎn)的?div?元素：
render: function (createElement) {??return createElement('div', 'Hello, world!')}如果要?jiǎng)?chuàng)建一個(gè)帶有子節(jié)點(diǎn)的元素，可以將子節(jié)點(diǎn)作為第三個(gè)參數(shù)傳遞給?createElement?函數(shù)。例如，下面的代碼創(chuàng)建了一個(gè)包含兩個(gè)子元素的?div?元素：
render: function (createElement) {??return createElement('div', [????createElement('h1', 'Hello'),????createElement('p', 'World')??])}如果要給元素添加屬性，可以將屬性對象作為第二個(gè)參數(shù)傳遞給?createElement?函數(shù)。例如，下面的代碼創(chuàng)建了一個(gè)帶有樣式和事件處理程序的?button?元素：
render: function (createElement) {??return createElement('button', {????style: { backgroundColor: 'red' },????on: {??????click: this.handleClick????}??}, 'Click me')},methods: {??handleClick: function () {????console.log('Button clicked')??}}4.3 動(dòng)態(tài)數(shù)據(jù)
render?方法可以根據(jù)組件的狀態(tài)動(dòng)態(tài)生成內(nèi)容。要在?render?方法中使用組件的數(shù)據(jù)，可以使用?this?關(guān)鍵字來訪問組件實(shí)例的屬性。例如，下面的代碼根據(jù)組件的狀態(tài)動(dòng)態(tài)生成了一個(gè)帶有計(jì)數(shù)器的?div?元素：
render: function (createElement) {??return createElement('div', [????createElement('p', 'Count: ' + this.count),????createElement('button', {??????on: {????????click: this.increment??????}????}, 'Increment')??])},data: function () {??return {????count: 0??}},methods: {??increment: function () {????this.count++??}}4.4 JSX
在使用 Vue 的?render?方法時(shí)，也可以使用 JSX（JavaScript XML）語法，這樣可以更方便地編寫模板。要使用 JSX，需要在組件中導(dǎo)入?Vue?和?createElement?函數(shù)，并在?render?方法中使用 JSX 語法。例如，下面的代碼使用了 JSX 語法來創(chuàng)建一個(gè)計(jì)數(shù)器組件：
import Vue from 'vue'export default {????render() {????????return (????????????<div>????????????????<p>Count:{this.count}</p>????????????????<button onClick={this.increment}>Increment</button>????????????</div>????????)????},????data() {????????return { count: 0 }????},????methods: {????????increment() {????????????this.count++????????}????}}注意，在使用 JSX 時(shí)，需要使用?{}?包裹 JavaScript 表達(dá)式。
4.5 生成函數(shù)式組件
除了生成普通的組件，render?方法還可以生成函數(shù)式組件。函數(shù)式組件沒有狀態(tài)，只接收?props?作為輸入，并返回一個(gè) VNode。因?yàn)楹瘮?shù)式組件沒有狀態(tài)，所以它們的性能比普通組件更高。
要生成函數(shù)式組件，可以在組件定義中將?functional?屬性設(shè)置為?true。例如，下面的代碼定義了一個(gè)函數(shù)式組件，用于顯示列表項(xiàng)：
export default {??functional: true,??props: ['item'],??render: function (createElement, context) {????return createElement('li', context.props.item);??}}注意，在函數(shù)式組件中，props?作為第二個(gè)參數(shù)傳遞給?render?方法。
