Vue使用技巧實例分析

這篇文章主要介紹“Vue使用技巧實例分析”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue使用技巧實例分析”文章能幫助大家解決問題。

1、將一個 prop 限制在一個類型的列表中

我們在使用 prop 時，可能會有時候需要判斷該 prop 是否在我們規定的范圍內（或者說規定的值內），此時可以使用 prop 定義中的 validator 選項，將一個 prop 類型限制在一組特定的值中。

export default {
  name: 'Test',
  props: {
    name: {
      type: String,
    },
    size: {
      type: String,
      validator: s => ['small', 'middle'].includes(s)
    }
  }
};

這個驗證函數接受一個 prop，如果 prop 有效或無效，則返回 true 或 false。當單單傳入的 true 或 false 來控制某些條件不能滿足需求時，我通常使用這個方法來做。

2、使用引號來監聽嵌套屬性

你可能使用過 watch 來監聽過某個屬性，但是你可能不知道這一點，我們可以通過使用引號輕松地直接監聽嵌套值

watch {
  'obj.message.name'() {
    // ...
  }
}

3、知道何時使用 v-if

有時候使用 v-if，往往使用 v-show 來代替，會有更高的性能。

<TableList v-show="isShow" />

當 v-if 被打開或關閉時，它將創建并完全銷毀該元素。相反，v-show 將創建該元素并將其留在那里，通過設置其樣式為 display: none 來隱藏它，如果你要切換的組件的渲染成本很高，那么這樣做會更有效率，特別是對于結構復雜的組件或頁面來說，更推薦使用 v-show。

反過來說，如果不需要立即執行昂貴的組件，可以使用 v-if，這樣它就會跳過渲染它，而使頁面的加載速度更快一些。

4、單個作用域插槽的簡寫

限定范圍的插槽非常有趣，但為了使用它們，您還必須使用許多模板標記。幸運的是，有一個簡寫可以讓我們擺脫它，但只有在我們使用單個作用域槽的情況下。

你或許這樣使用過

<TableList>
  <template #header="attrList">
    <TableHeader v-bind="attrList" />
  </template>
</TableList>

不使用 template

<TableList #header="attrList">
  <TableHeader v-bind="attrList" />
</TableList>

簡單、直截了當，令人贊嘆不已。

5、將局部和全局的 style 混合在一起

通常情況下，在處理樣式時，我們希望它們只在當前組件內起作用

<style scoped>
  .content {
    background: green;
  }
</style>

不過，如果需要的話，也可以添加一個非作用域樣式塊來添加全局樣式

<style>
  /* 全局 */
  .content p {
    font-size: 12px;
  }
</style>
 
<style scoped>
  /* 在該組件內有效 */
  .content {
    background: green;
  }
</style>

需要注意，全局樣式是危險的，難以追蹤。但有時，它們是一個完美的逃生艙口，正是你所需要的。

6、重寫子組件的樣式

Scoped CSS 在保持內容整潔方面非常棒，而且不會將樣式引入應用的其他組件中。但有時我們需要覆蓋一個子組件的樣式，并跳出這個作用域。

Vue 有一個 deep 選擇器可以完成以上功能

<style scoped>
.my-content >>> .child-component {
  font-size: 16px;
}
</style>

注意：如果你使用像 LESS 這樣的 CSS 預處理器，你可能需要使用 /deep/ 來代替

<style lang="less" scoped>
.my-content /deep/ .child-component {
  font-size: 16px;
}
</style>

7、如何在 Vue 之外創建一個具有響應性的變量

如果你從 Vue 之外得到一個變量，讓它具有反應性是很好的。這樣，我們就可以在 computed props、watch 和其他任何地方使用它，它的工作方式就像 Vue 中的任何其他狀態一樣。

如果我們使用的選項 API，需要的只是將其放在組件的數據部分中

const externalVariable = getValue();
 
export default {
  data() {
    return {
      reactiveVariable: externalVariable,
    };
  }
};

如果使用 Vue3 的組合 API，可以直接使用 ref 或 reactive

import { ref } from 'vue';
 
// 可以完全在 Vue 組件之外完成
const externalVariable = getValue();
const reactiveVariable = ref(externalVariable);   //使用ref使其具有響應性

使用 reactive 代替

import { reactive } from 'vue';
 
//  可以完全在 Vue 組件之外完成
const externalVariable = getValue();
// reactive 只對對象和數組起作用
const anotherReactiveVariable = reactive(externalVariable);

如果你還在使用 Vue2，你可以使用 observable 而不是 reactive 來實現完全相同的結果

import Vue from 'vue'
 
//  可以完全在 Vue 組件之外完成
const externalVariable = getValue();
const anotherReactiveVariable = Vue.observable(externalVariable);

8、v-for 中的解構

你是否在v-for 中使用解構？

// users: [{name:'leo',id:'1'},{name:'lion',id:'2'}]
<li
  v-for="{ name, id } in users"
  :key="id"
>
  {{ name }}
</li>

更廣為人知的是，可以通過使用這樣的元組從 v-for 中取出索引

<li v-for="(movie, index) in [
  'Lion King',
  'Frozen',
  'The Princess Bride'
]">
  {{ index + 1 }} => {{ movie }}
</li>

當使用一個對象時，可以這樣使用 key

<li v-for="(value, key) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  {{ key }}: {{ value }}
</li>

也可以將這兩種方法結合起來，獲取 key 以及屬性的 index

<li v-for="(value, key, index) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  {{ index + 1 }} => {{ key }}: {{ value }}
</li>

9、在指定范圍內循環

v-for 允許我們遍歷數組，也允許我們遍歷一個范圍

<template>
  <ul>
    <li v-for="num in 6">Item {{ num }}</li>
  </ul>
</template>

渲染結果

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

這里有個注意點，當我們使用 v-for 遍歷一個范圍時，它將從 1 開始，以我們指定的數字結束。

10、竊取 prop 類型

我們從一個子組件中復制 prop 類型，只是為了在一個父組件中使用它們。但是往往偷取這些 prop 類型要比僅僅復制它們好得多，什么意思？

舉個例子，我們在某個組件中使用了一個 List 組件

<template>
  <div>
    <h3>{{ title }}</h3>
    <List
      :type="listType"
      :size="listSize"
      :name="listName"
    />
  </div>
</template>

為了讓它正常工作，我們需要添加正確的 prop 類型，從 List 組件復制

import List from './List';
export default {
  components: { List },
  props: {
    listType: {
      type: String,
      required: true,
    },
    listSize: {
      type: String,
      default: 'medium',
      validator: size => [
        'small',
        'medium',
        'large',
        'x-large'
      ].includes(size),
    },
    listName: {
      type: String,
      default: 'list',
    },
    title: {
      type: String,
      required: true,
    },
  },
};

看下來，有沒有覺得很麻煩？

當 List 組件的 prop 類型被更新時，我們肯定會忘記返回這個組件并更新它們。隨著時間的推移，當該組件的 prop 類型開始偏離 List 組件中的 prop 類型時，就會引入錯誤。

因此，這就是為什么我們要竊取組件的 prop 類型，具體如下

import List from './List';
export default {
  components: { List },
  props: {
    ...List.props,  // 竊取List的prop，不需要再重復累贅地一一列出
    title: {
      type: String,
      required: true,
    },
  },
};

這樣是不是簡便了很多？

除了在上面的例子中，我們把 List 加在每個 prop 名稱的開頭。所以我們必須做一些額外的工作來實現這一點

import List from './List';
 
const listProps = {};
 
Object.entries(List.props).forEach((key, val) => {
  listProps[`list${key.toUpperCase()}`] = val;
});
 
export default {
  components: { List },
  props: {
    ...listProps,
    title: {
      type: String,
      required: true,
    },
  },
};

現在，如果 List 組件中的 prop 類型被修改，我們的組件將保持最新狀態。但是，如果一個 prop 類型從 List 組件中被添加或刪除了呢？為了應對這些情況，我們可以使用 v-bind 和一個計算的 prop 來保持動態。

11、檢測元素外部(或內部)的單擊

當我們需要檢測一個點擊是發生在一個特定元素 el 的內部還是外部，通常使用的方法

window.addEventListener('click', e => {
  // 獲取被點擊的元素
  const currtentEl = e.target;
 
  // 檢測在el元素的內部還是外部
  if (el.contains(currtentEl)) {
   // 在el里面點擊了
  } else {
   // 在el外面點擊了
  }
});

12、從組件外部調用一個方法

我們可以從一個組件的外部通過給它一個 ref 用來調用一個方法

<!-- Parent.vue -->
<template>
  <Child ref="child" />
</template>
 
// 在該組件調用子組件的方法
this.$refs.child.method();

通常情況下，我們使用 props 和 events 在組件之間進行交流。props 被下發到子組件中，而 events 被上發到父組件中

<template>
  <Child
    :tell-me-what-to-do="someInstructions"
    @something-happened="hereIWillHelpYouWithThat"
  />
</template>
 
// Child.vue
export default {
  props: ['trigger'],
  watch: {
    shouldCallMethod(newVal) {
      if (newVal) {
        // Call the method when the trigger is set to `true`
        this.method();
      }
    }
  }
}

這可以正常工作，但只能在第一次調用時使用。如果您需要多次觸發此操作，則必須進行清理并重置狀態。邏輯如下

• 父組件將 true 傳遞給觸發器 prop

• Watch 被觸發，然后 Child 組件調用該方法

• 子組件發出一個事件，告訴父組件該方法已被成功觸發

• Parent 組件將 trigger 重置為 false，所以我們可以從頭再來一次 

相反，如果我們在子組件上設置一個 ref，我們可以直接調用該方法（如最開始的方式），我們打破了 “props down, events up” 的規則，我們打破了封裝，但是這樣做更清晰，更容易理解。

13、監聽數組和對象

有時候使用 watcher 不能正確觸發，很多情況下是因為我們試圖監聽數組或對象，但沒有將 deep 設置為 true

export default {
  name: 'namesChange',
  props: {
    names: {
      type: Array,
      required: true,
    },
  },
  watch: {
    names: {
      // 這將讓 Vue 知道要在數組內部尋找，如不添加，則不能進行深度監聽
      deep: true,
 
      handler(newVal,oldVal)
        console.log('The list of names has changed!');
      }
    }
  }
}

在vue3中使用

watch(
  names,
  (newVal,oldVal) => {
    console.log('The list of names has changed!');
  },
  {
    deep: true,
  }
);

14、template 標簽的另一個用途

template 標簽可以在模板中的任何地方使用，以更好地組織代碼。有時它來簡化 v-if 邏輯，有時也用 v-for。如下，我們有幾個元素都使用同一個 v-if 條件

<template>
  <div class="card">
    <img src="imgPath" />
    <h4>
      {{ title }}
    </h4>
    <h5 v-if="expanded">
      {{ subheading }}
    </h5>
    <div
      v-if="expanded"
      class="card-content"
    >
      <slot />
    </div>
    <SocialShare v-if="expanded" />
  </div>
</template>

仔細觀察上面的代碼，我們會發現一些元素的顯示與隱藏的條件是一樣的，但是這樣寫并不友好，當在一個更大、更復雜的組件上，有可能是一個糟糕的情況。

我們可以使用 template 標簽來分組這些元素（v-if 條件一致的元素），并將 v-if 提升到模板 template 本身，達到優化的目的

<template>
  <div class="card">
    <img src="imgPath" />
    <h4>
      {{ title }}
    </h4>
    <!-- 將 v-if 提升到分組上 -->
    <template v-if="expanded">
      <h5>
        {{ subheading }}
      </h5>
      <div class="card-content">
        <slot />
      </div>
      <SocialShare />
    </template>
  </div>
</template>

現在看起來清晰了許多，也更容易理解，而且它在做什么，一目了然。

15、處理錯誤（和警告）的更好方法

我們可以為 Vue 中的錯誤和警告提供一個全局的自定義處理程序

// Vue 2
Vue.config.errorHandler = (err) => {
  alert(err);
};
 
// Vue 3
const app = createApp(App);
app.config.errorHandler = (err) => {
  alert(err);
};

當然你也可以用它們來更優雅地處理錯誤，以獲得更好的用戶體驗。例如，如果一個錯誤未被處理，應用程序不會直接崩潰，而是顯示一個完整的錯誤屏幕，提示用戶刷新或嘗試其他操作。

關于“Vue使用技巧實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。