10個Vue開發技巧助力成為更好的工程師（二）

来源:https://www.cnblogs.com/chanwahfung/archive/2020/07/22/13358667.html
-Advertisement-
Play Games

優雅更新props 更新 prop 在業務中是很常見的需求，但在子組件中不允許直接修改 prop，因為這種做法不符合單向數據流的原則，在開發模式下還會報出警告。因此大多數人會通過 $emit 觸發自定義事件，在父組件中接收該事件的傳值來更新 prop。 child.vue: export defal ...


優雅更新props

更新 prop 在業務中是很常見的需求，但在子組件中不允許直接修改 prop，因為這種做法不符合單向數據流的原則，在開發模式下還會報出警告。因此大多數人會通過 $emit 觸發自定義事件，在父組件中接收該事件的傳值來更新 prop。

child.vue:

export defalut {
    props: {
        title: String  
    },
    methods: {
        changeTitle(){
            this.$emit('change-title', 'hello')
        }
    }
}

parent.vue:

<child :title="title" @change-title="changeTitle"></child>

export default {
    data(){
        return {
            title: 'title'
        }  
    },
    methods: {
        changeTitle(title){
            this.title = title
        }
    }
}

這種做法沒有問題，我也常用這種手段來更新 prop。但如果你只是想單純的更新 prop，沒有其他的操作。那麼 sync 修飾符能夠讓這一切都變得特別簡單。

parent.vue:

<child :title.sync="title"></child>

child.vue:

export defalut {
    props: {
        title: String  
    },
    methods: {
        changeTitle(){
            this.$emit('update:title', 'hello')
        }
    }
}

只需要在綁定屬性上添加 .sync，在子組件內部就可以觸發 update:屬性名 來更新 prop。可以看到這種手段確實簡潔且優雅，這讓父組件的代碼中減少一個“沒必要的函數”。

參考文檔

provide/inject

這對選項需要一起使用，以允許一個祖先組件向其所有子孫後代註入一個依賴，不論組件層次有多深，併在其上下游關係成立的時間里始終生效。

簡單來說，一個組件將自己的屬性通過 provide 暴露出去，其下麵的子孫組件 inject 即可接收到暴露的屬性。

App.vue:

export default {
    provide() {
        return {
            app: this
        }
    } 
}

child.vue:

export default {
    inject: ['app'],
    created() {
        console.log(this.app) // App.vue實例
    }
}

在 2.5.0+ 版本可以通過設置預設值使其變成可選項:

export default {
    inject: {
        app: {
            default: () => ({})
        }
    },
    created() {
        console.log(this.app) 
    }
}

如果你想為 inject 的屬性變更名稱，可以使用 from 來表示其來源：

export default {
    inject: {
        myApp: {
            // from的值和provide的屬性名保持一致
            from: 'app',
            default: () => ({})
        }
    },
    created() {
        console.log(this.myApp) 
    }
}

需要註意的是 provide 和 inject 主要在開發高階插件/組件庫時使用。並不推薦用於普通應用程式代碼中。但是某些時候，或許它能幫助到我們。

參考文檔

小型狀態管理器

大型項目中的數據狀態會比較複雜，一般都會使用 vuex 來管理。但在一些小型項目或狀態簡單的項目中，為了管理幾個狀態而引入一個庫，顯得有些笨重。

在 2.6.0+ 版本中，新增的 Vue.observable 可以幫助我們解決這個尷尬的問題，它能讓一個對象變成響應式數據：

// store.js
import Vue from 'vue'

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

使用：

<div @click="setCount">{{ count }}</div>

import {state} from '../store.js'

export default {
    computed: {
        count() {
            return state.count
        }
    },
    methods: {
        setCount() {
            state.count++
        }
    }
}

當然你也可以自定義 mutation 來複用更改狀態的方法：

import Vue from 'vue'

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

export const mutations = {
  SET_COUNT(payload) {
    if (payload > 0) {
        state.count = payload
    } 
  }
}

使用：

import {state, mutations} from '../store.js'

export default {
    computed: {
        count() {
            return state.count
        }
    },
    methods: {
        setCount() {
            mutations.SET_COUNT(100)
        }
    }
}

參考文檔

卸載watch觀察

通常定義數據觀察，會使用選項的方式在 watch 中配置：

export default {
    data() {
        return {
            count: 1      
        }
    },
    watch: {
        count(newVal) {
            console.log('count 新值：'+newVal)
        }
    }
}

除此之外，數據觀察還有另一種函數式定義的方式：

export default {
    data() {
        return {
            count: 1      
        }
    },
    created() {
        this.$watch('count', function(){
            console.log('count 新值：'+newVal)
        })
    }
}

它和前者的作用一樣，但這種方式使定義數據觀察更靈活，而且 $watch 會返回一個取消觀察函數，用來停止觸發回調：

let unwatchFn = this.$watch('count', function(){
    console.log('count 新值：'+newVal)
})
this.count = 2 // log: count 新值：2
unwatchFn()
this.count = 3 // 什麼都沒有發生...

$watch 第三個參數接收一個配置選項：

this.$watch('count', function(){
    console.log('count 新值：'+newVal)
}, {
    immediate: true // 立即執行watch
})

參考文檔

巧用template

相信 v-if 在開發中是用得最多的指令，那麼你一定遇到過這樣的場景，多個元素需要切換，而且切換條件都一樣，一般都會使用一個元素包裹起來，在這個元素上做切換。

<div v-if="status==='ok'">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>

如果像上面的 div 只是為了切換條件而存在，還導致元素層級嵌套多一層，那麼它沒有“存在的意義”。

我們都知道在聲明頁面模板時，所有元素需要放在 <template> 元素內。除此之外，它還能在模板內使用，<template> 元素作為不可見的包裹元素，只是在運行時做處理，最終的渲染結果並不包含它。

<template>
    <div>
        <template v-if="status==='ok'">
          <h1>Title</h1>
          <p>Paragraph 1</p>
          <p>Paragraph 2</p>
        </template>
    </div>
</template>

同樣的，我們也可以在 <template> 上使用 v-for 指令，這種方式還能解決 v-for 和 v-if 同時使用報出的警告問題。

<template v-for="item in 10">
    <div v-if="item % 2 == 0" :key="item">{{item}}</div>
</template>

template使用v-if，
template使用v-for

過濾器復用

過濾器被用於一些常見的文本格式化，被添加在表達式的尾部，由“管道”符號指示。

<div>{{ text | capitalize }}</div>

export default {
    data() {
        return {
            text: 'hello'
        }  
    },
    filters: {
        capitalize: function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
         }
    }
}

試想一個場景，不僅模板內用到這個函數，在 method 里也需要同樣功能的函數。但過濾器無法通過 this 直接引用，難道要在 methods 再定義一個同樣的函數嗎？

要知道，選項配置都會被存儲在實例的 $options 中，所以只需要獲取 this.$options.filters 就可以拿到實例中的過濾器。

export default {
    methods: {
        getDetail() {
            this.$api.getDetail({
                id: this.id
            }).then(res => {
                let capitalize = this.$options.filters.capitalize
                this.title = capitalize(res.data.title)
            })
        }
    }
}

除了能獲取到實例的過濾器外，還能獲取到全局的過濾器，因為 this.$options.filters 會順著 __proto__ 向上查找，全局過濾器就存在原型中。

自定義指令獲取實例

有的情況下，當需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。像是項目中常用的許可權指令，它能精確到某個模塊節點。大概思路為獲取許可權列表，如果當前綁定許可權不在列表中，則刪除該節點元素。

Vue.directive('role', {
    inserted: function (el, binding, vnode) {
      let role = binding.value
      if(role){
        const applist = sessionStorage.getItem("applist")
        const hasPermission = role.some(item => applist.includes(item)) 
        // 是否擁有許可權
        if(!hasPermission){
          el.remove() //沒有許可權則刪除模塊節點
        }
      }
    }
})

自定義指令鉤子函數共接收3個參數，包括 el (綁定指令的真實dom)、binding (指令相關信息)、vnode (節點的虛擬dom)。

假設現在業務發生變化，applist 存儲在 vuex 里， 但指令內想要使用實例上的屬性，或者是原型上的 $store。我們是沒有辦法獲取到的，因為鉤子函數內並沒有直接提供實例訪問。vnode 作為當前的虛擬dom，它裡面可是綁定到實例上下文的，這時候訪問 vnode.context 就可以輕鬆解決問題。

Vue.directive('role', {
    inserted: function (el, binding, vnode) {
      let role = binding.value
      if(role){
        // vnode.context 為當前實例
        const applist = vnode.context.$store.state.applist
        const hasPermission = role.some(item => applist.includes(item)) 
        if(!hasPermission){
          el.remove()
        }
      }
    }
})

優雅註冊插件

插件通常用來為 Vue 添加全局功能。像常用的 vue-router、vuex 在使用時都是通過 Vue.use 來註冊的。Vue.use 內部會自動尋找 install 方法進行調用，接受的第一個參數是 Vue 構造函數。

一般在使用組件庫時，為了減小包體積，都是採用按需載入的方式。如果在入口文件內逐個引入組件會讓 main.js 越來越龐大，基於模塊化開發的思想，最好是單獨封裝到一個配置文件中。配合上 Vue.use，在入口文件使用能讓人一目瞭然。

vant.config.js：

import {
  Toast,
  Button
} from 'vant'

const components = {
  Toast,
  Button
}

const componentsHandler = {
  install(Vue){
    Object.keys(components).forEach(key => Vue.use(components[key]))
  }
}

export default componentsHandler

main.js:

import Vue from 'vue'
import vantCompoents from '@/config/vant.config'

Vue.config.productionTip = false

Vue.use(vantCompoents)

new Vue({
  render: h => h(App)
}).$mount('#app')

參考文檔

自動化引入模塊

在開發中大型項目時，會將一個大功能拆分成一個個小功能，除了能便於模塊的復用，也讓模塊條理清晰，後期項目更好維護。

像 api 文件一般按功能劃分模塊，在組合時可以使用 require.context 一次引入文件夾所有的模塊文件，而不需要逐個模塊文件去引入。每當新增模塊文件時，就只需要關註邏輯的編寫和模塊暴露，require.context 會幫助我們自動引入。

需要註意 require.context 並不是天生的，而是由 webpack 提供。在構建時，webpack 在代碼中解析它。

let importAll = require.context('./modules', false, /\.js$/)

class Api extends Request{
    constructor(){
        super()
        //importAll.keys()為模塊路徑數組
        importAll.keys().map(path =>{
            //相容處理：.default獲取ES6規範暴露的內容; 後者獲取commonJS規範暴露的內容
            let api = importAll(path).default || importAll(path)
            Object.keys(api).forEach(key => this[key] = api[key])
        })
    }
}

export default new Api()

require.context 參數：

  1. 文件夾路徑
  2. 是否遞歸查找子文件夾下的模塊
  3. 模塊匹配規則，一般匹配文件尾碼名

只要是需要批量引入的場景，都可以使用這種方法。包括一些公用的全局組件，只需往文件夾內新增組件即可使用，不需要再去註冊。如果還沒用上的小伙伴，一定要瞭解下，簡單實用又能提高效率。

參考文檔

路由懶載入(動態chunkName)

路由懶載入作為性能優化的一種手段，它能讓路由組件延遲載入。通常我們還會為延遲載入的路由添加“魔法註釋”(webpackChunkName)來自定義包名，在打包時，該路由組件會被單獨打包出來。

let router = new Router({
  routes: [
    {
      path:'/login',
      name:'login',
      component: import(/* webpackChunkName: "login" */ `@/views/login.vue`)
    },
    {
      path:'/index',
      name:'index',
      component: import(/* webpackChunkName: "index" */ `@/views/index.vue`)
    },
    {
      path:'/detail',
      name:'detail',
      component: import(/* webpackChunkName: "detail" */ `@/views/detail.vue`)
    }
  ]
})

上面這種寫法沒問題，但仔細一看它們結構都是相似的，作為一名出色的開發者，我們可以使用 map 迴圈來解決這種重覆性的工作。

const routeOptions = [
  {
    path:'/login',
    name:'login',
  },
  {
    path:'/index',
    name:'index',
  },
  {
    path:'/detail',
    name:'detail',
  },
]

const routes = routeOptions.map(route => {
  if (!route.component) {
    route = {
      ...route,
      component: () => import(`@/views/${route.name}.vue`)
    }
  }
  return route
})

let router = new Router({
  routes
})

在書寫更少代碼的同時，我們也把“魔法註釋”給犧牲掉了。總所周知，代碼中沒辦法編寫動態註釋。這個問題很尷尬，難道就沒有兩全其美的辦法了嗎？

強大的 webpack 來救場了，從 webpack 2.6.0 開始，占位符 [index] 和 [request] 被支持為遞增的數字或實際解析的文件名。我們可以這樣使用“魔法註釋”：

const routes = routeOptions.map(route => {
  if (!route.component) {
    route = {
      ...route,
      component: () => import(/* webpackChunkName: "[request]" */ `@/views/${route.name}.vue`)
    }
  }
  return route
})

參考文檔，
參考文章

最後

往期相關文章：

10個Vue開發技巧助力成為更好的工程師


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 程式員每日一樂：html動態煙花設計 3D
    經過一天的的工作或者學習是否感到枯燥乏味？現在的你是否想找些樂子？下麵我將教大家製作簡單易做的3D煙花動態網頁，告別無聊與乏味。。。。。 第一步：首先新建一個文本文檔。 第二步：將以下代碼複製到該文本文檔中，保存。 <!doctype html><html><head><meta charset=" ...
  • 目前解決移動端1px邊框最好的方法
    在移動端開發時，經常會遇到在視網膜屏幕中元素邊框變粗的問題。本文將帶你探討邊框變粗問題的產生原因及介紹目前市面上最好的解決方法。 ...
  • Bootstrap 美化樣式
    body { font-family: 'Lora', serif; font-size: 16px; color: #6f6767;}a { color: #6f6767;}a:hover { color: #17223f; text-decoration: none;}a:focus { out ...
  • 如何用Vue技術完美記住滾動條和實現下拉載入呢？本文詳細教你
    滾動條 常見於移動端 App 在滾動點擊進入的時候 問題描述 當我們在開發 web app 的時候，經常會遇到一個問題，就是當從一個可滾動的列表頁進入到下一個詳情頁面，然後返回列表頁面的時候，很難去還原滾動條的狀態，無法記住進來時候的位置。 以前我嘗試過很多方法： 有 vue-router 自帶的 ...
  • File and Code Templates | webstorm代碼文件模板 vue typescript
    Typescript Class import _ from "lodash"; /**類 ${NAME}*/ export default class ${NAME} { /**v-for :key*/ forKey?: string = _.uniqueId() constructor(obj? ...
  • 快手短視頻批量提取、快手批量去水印工具
    想要下載快手的視頻，又不想要水印，要如何操作？小編在這裡教一個批量下載，又能自動去水印，完美解析的方法。 有粉絲發消息給我，想找一個批量去水印網站。前天晚上，有個粉絲給小編留言，告訴小編有個網站可以一鍵批量解析視頻，只要複製任意作品鏈接即可獲取作者所有的作品並解析出來。批量解析功能目前支持快手、抖音 ...
  • JELLY技術周刊 Vol.15 雲游戲會是 5G 殺手級應用麽？
    蒲公英 · JELLY技術周刊 Vol.15 聽到“雲游戲”，或許我們的第一反應會是“雲玩家”而不是那些上雲的“游戲”，在這個 5G 已來的時代，雲游戲也迎來了全新的機遇。這是 5G 時代的過客？又或者這會是 5G 場景下第一個重量級應用？看完雲鷺科技的這次大會分享，你會有自己的答案。 登高遠眺 天 ...
  • js數組中每一個對象，相同添加child
    //假設我有以下數據 const data = [ { 'tm': '2020-05-16', 'nm': 'haha', 'tmp': 'piouyjhjkn' }, { 'tm': '2020-06-16', 'nm': 'haha', 'tmp': 'piouyjhjkn' }, { 'tm' ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類