vue.js代碼的使用技巧有哪些

這篇文章主要介紹了vue.js代碼的使用技巧有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue.js代碼的使用技巧有哪些文章都會有所收獲，下面我們一起來看看吧。

slots 新語法向 3.0 看齊

使用帶有“＃”的新命名插槽縮寫語法,在Vue 2.6.0+中可用

舉個例子:

構建插槽時，最好規劃一下布局。這就是我的文章布局。構建插槽與構建組件沒有什么不同。本質上，插槽是具有超強功能的組件,讓我們細分一下上面的布局，組件的外觀如下：

<!-- TidbitPage.vue -->
<template>
  <article-layout>


    <template #articleHeader>
      <h2>I am the header</h2>
    </template>


    <template #articleContent>
      <p>I am the content</p>
    </template>


    <template #articleFooter>
      <footer>I am the footer</footer>
    </template>


    <template #side>
      <aside>I am the side stuff</aside>
    </template>


    <template #banner>
      <div>I am the banner</div>
    </template>


  </article-layout>
<template>

動態指令參數

指令參數現在可以接受動態 JavaScript 表達式 動態參數值應該是字符串，但允許null作為一個明確指示應該刪除綁定的特殊值，那將會很方便。任何其他非字符串值都可能出錯，并會觸發警告。（僅適用于v-bind和v-on）

<div v-bind:[attr]="attributeName"></div>
//簡寫
<div :[attr]="attributeName"></div>

這里的 attributeName 會被作為一個JavaScript表達式進行動態求值，求得的值將會作為最終的參數來使用。例如，如果你的 Vue 實例有一個 data 屬性 attributeName，其值為 href，那么這個綁定將等價于 v-bind:href

同樣地，你可以使用動態參數為一個動態的事件名綁定處理函數：

<button v-on:[eventName]="handler"></button>
//簡寫
<button @[eventName]="handler"></button>

當 eventName 的值為 focus 時，v-on:[eventName] 將等價于v-on:focus。

同樣可以適用于插槽綁定:

<my-component>
<template v-slot:[slotName]>
Dynamic slot name
</template>
</my-component>
//簡寫
<foo>
<template #[name]>
Default slot
</template>
</foo>

動態參數預期會求出一個字符串，異常情況下值為 null。這個特殊的 null 值可以被顯性地用于移除綁定。任何其它非字符串類型的值都將會觸發一個警告。

<!-- 這會觸發一個編譯警告 且 無效 -->
<a v-bind:['foo' + bar]="value"> ... </a>

變通的辦法是使用沒有空格或引號的表達式，或用計算屬性替代這種復雜表達式。

@hook那些事

處理組件內定時器的步驟。通常我們一般都是這樣操作的：

<script>
  export default {
    mounted() {
      this.timer = setInterval(() => { ... }, 1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>

但是其實更好的做法是：

<script>
  export default {
    mounted() {
      const timer = setInterval(() => { ... }, 1000);
      this.$once('hook:beforeDestroy', () => clearInterval(timer);)
    }
  };
</script>

設想一個場景 如果我們需要在數據渲染到頁面的之前讓頁面 loading。mounted 之后停止 loading。beforeUpdata 時開始 loading。updatad 之后停止 loading。

最簡單的方法就是改寫組件的生命周期函數，使其在 mounted/beforeUpdata /updatad 時通知父組件顯示或者隱藏 loading。

這樣做顯示不好，因為侵入了自組件的邏輯，增加的邏輯也和組件本身的功能好不關聯。最好的辦法就是使用 v-on="hook:xxx" 的方式：

<v-chart
    @hook:mounted="loading = false"
    @hook:beforeUpdated="loading = true"
    @hook:updated="loading = false"
    :data="data"
/>

這樣，就實現了對子組件生命周期的監聽。對任意的組件都有效果，包括引入的第三方組件。

vue中的$props、$attrs和$listeners(可用來二次封裝組件)

$props：當前組件接收到的 props 對象。Vue 實例代理了對其 props 對象屬性的訪問。

假如有個 input 輸入框。我們有很多的原生屬性，比如：name、placeholder、disabled 等等。我們如果都定義在props顯示接收，未免太過繁瑣。所以官網出現了：v-bind="$props"這樣的操作。如果父組件傳遞很多的原生屬性，那么我們在子組件中直接可以：

//good
<input v-bind="$props">

 
//bad
//而不是下面這樣，如果很多的屬性就特別繁瑣
<input :name="name" :placeholder="placeholder" :disabled="disabled">

我們可以利用以下方式$attrs 將原生屬性直接傳遞給子組件,這是 Vue 在2.4.0新增的屬性,包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內部組件——在創建高級別的組件時非常有用。

<input
   v-bind="$attrs"
   :value="value"
   @focus=$emit('focus', $event)"
   @input="$emit('input', $event.target.value)"
>

$listeners：包含了父作用域中的 (不含 .native修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用。

如果子組件不在父組件的根目錄下，則可以將所有事件偵聽器從父組件傳遞到子組件，如下所示：

<template>
<div>
  ...
<childComponent v-on="$listeners" />...
</div>
</template>

響應式數據(2.6.0新增)

我們習慣于用 Vuex 去解決狀態的共享問題,但是在小項目中使用就會有增大代碼體積和將代碼復雜化的煩惱,所以在后來的版本中Vue新增

Vue.observable( object ) 讓一個對象可響應,Vue 內部會用它來處理 data 函數返回的對象。

返回的對象可以直接用于渲染函數和 計算屬性 內，并且會在發生改變時觸發相應的更新。也可以作為最小化的跨組件狀態存儲器，用于簡單的場景：

官方示例:

const state = Vue.observable({ count: 0 })


const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }
}

jsx模板組件

以下面的一組狀態判斷按鈕為例,我們很容易就下意識地在模板內寫下這種代碼

<button v-if="status === 1" class="btn1" :class="status === 1" @click="">未開始</button>
<button v-if="status === 2" class="btn2" :class="status === 2" @click="">進行中</button>
<button v-if="status === 3" class="btn3" :class="status === 3" @click="">可領取</button>
<button v-if="status === 4" class="btn4" :class="status === 4" @click="">已領取</button>

但是如果我們利用渲染函數可以將上面的代碼抽取成優雅的使用組件

<!DOCTYPE html>
<html lang="en">


<body>
    <div id="app">
        <child :status="status"></child>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('child', {
            props: {
                status: {
                    type: Number,
                    required: true
                }
            },
            render(createElement) {
                const innerHTML = ['未開始', '進行中', '可領取', '已領取'][this.status]
                return createElement('button', {
                    class: {
                        active: this.status
                    },
                    attrs: {
                        id: 'btn'
                    },
                    domProps: {
                        innerHTML
                    },
                    on: {
                        click: () => console.log(this.status)
                    }
                })
            }
        })
        var app = new Vue({
            el: '#app',
            data: {
                status: 0
            }
        })
    </script>
</body>


</html>

我們將所有的邏輯封裝進渲染函數內,外部只需要傳遞一個狀態參數即可改變

<child :status="status"></child>

動態組件

通過 Vue 的 元素加一個特殊的 is attribute 可以實現動態組件的效果

如圖，這是一個 v-for 渲染的列表(只是目前這個版塊才剛開始做，目前只有一個)，圓圈內的就是一個組件，也就是要 v-for 動態組件

實際使用

一開始就是基本的組件引入了

import ColorIn from '@/components/Magic/ColorIn.vue'
import LineIn from "@/components/Magic/LineIn.vue";
import Header from "@/components/Magic/Header.vue";
import Footer from "@/components/Magic/Footer.vue";


export default{
      components:{
        ColorIn,
        LineIn,
        Header,
        Footer
    }
}

接下來就是動態 v-for 動態組件的使用，componentList:['ColorIn','LineIn','Header','Footer']使用下面的代碼即可將代碼依次循環

<component v-for="(item,index) in componentList" :key="index" :is="item"></component>

編譯以后的效果就是

<ColorIn></ColorIn>
<LineIn></LineIn>
<Header></Header>
<Footer></Footer>

Vue.filter

簡單介紹一下過濾器，顧名思義，過濾就是一個數據經過了這個過濾之后出來另一樣東西，可以是從中取得你想要的，或者給那個數據添加點什么裝飾，那么過濾器則是過濾的工具。例如，從['abc','abd','ade']數組中取得包含‘ab’的值，那么可通過過濾器篩選出來‘abc’和‘abd’；把‘Hello’變成‘Hello World’，那么可用過濾器給值‘Hello’后面添加上‘ World’；或者把時間節點改為時間戳等等都可以使用過濾器。

場景:時間戳轉化成年月日這是一個公共方法,所以可以抽離成過濾器使用

// 使用
// 在雙花括號中
{{ message | capitalize }}


// 在 `v-bind` 中
<div v-bind:id="rawId | formatId"></div>


// 全局注冊
Vue.filter('stampToYYMMDD', (value) =>{
  // 處理邏輯
})


// 局部注冊
filters: {
  stampToYYMMDD: (value)=> {
    // 處理邏輯
  }
}


// 多個過濾器全局注冊
// /src/common/filters.js
let dateServer = value => value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3')
export { dateServer }
// /src/main.js
import * as custom from './common/filters/custom'
Object.keys(custom).forEach(key => Vue.filter(key, custom[key]))

.sync 語法糖

sync 就是為了實現prop 進行“雙向綁定”僅此而已（父對子，子對父，來回傳）

當你有需要在子組件修改父組件值的時候這個方法很好用，它的實現機制和v-model是一樣的。

利用 object.freeze 提升性能

Object.freeze() 方法可以凍結一個對象。一個被凍結的對象再也不能被修改；凍結了一個對象則不能向這個對象添加新的屬性，不能刪除已有屬性，不能修改該對象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結一個對象后該對象的原型也不能被修改。 freeze() 返回和傳入的參數相同的對象。

比方我們需要渲染一個非常大的數組對象，例如用戶列表，對象列表，文章列表等等。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = users;
  }
};

vue 會將 data 對象中的所有的屬性加入到 vue 的響應式系統中，當這些屬性的值發生改變時，視圖將會產生 響應，若對象的體積比較大，會消耗很多瀏覽器解析時間。

所以我們可以通過減少數據的響應式轉換來提供前端的性能。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};

關于“vue.js代碼的使用技巧有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue.js代碼的使用技巧有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。