Vue.js 你不知道的一些小技巧

gongph發表於2018-11-12

面試官：MVVM 和 MVC 的區別是什麼？

自己先想一分鐘。

關於上面的面試題的具體解釋，請移步這裡，本文不在累述。正文開始，下面列舉的一些小技巧有的或許你用過，有的或許你沒用過。不管有的沒的，希望你看完之後有所收穫吧。文筆和知識有限，不對的地方，請留言斧正！

給 props 屬性設定多個型別

這個技巧在開發元件的時候用的較多，為了更大的容錯性考慮，同時程式碼也更加人性化：

export default {
  props: {
    width: {
      type: [String, Number],
      default: '100px'
    }
    // 或者這樣
    // width: [String, Number]
  }
}
複製程式碼

比如一個 <my-button> 上暴露了一個 width 屬性，我們既可以傳 100px，也可以傳 100 ：

<!-- my-button.vue -->
<template>
  <button :style="computedWidth">{{ computedWidth }}</button>
</template>

<script>
  export default {
    props: {
      width: [String, Number]
    },
    computed: {
      computedWidth () {
        let o = {}
        if (typeof this.width === 'string') o.width = this.width
        if (typeof this.width === 'number') o.width = this.width + 'px'
        return o
      }
    }
  }
</script>
複製程式碼

使用：

<!-- 在其他元件中使用 -->
<template>
  <my-button width="100px"></my-button>
  <!-- or -->
  <my-button :width="100"></my-button>
</template>
複製程式碼

禁止瀏覽器 Auto complete 行為

有時候我們輸入賬號密碼登入後臺系統，瀏覽器會彈出是否儲存你的登入資訊。我們一般會點選儲存，因為下次再次登入的時候會自動填充增加了我們的使用者體驗，很好。

但有時，當我們開發某個某塊（比如新增使用者）時，點選新增使用者按鈕，顯示彈框，不巧的是，在賬號，密碼輸入框中瀏覽器幫我們填充上了。但這並不是我們想要的。所以，我的有效解決思路如下：

設定 <el-input/> 為只讀模式
在 focus 事件中去掉只讀模式

程式碼如下：

<el-input
  type="text"
  v-model="addData.loginName"
  readonly
  @focus="handleFocusEvent"
/>
複製程式碼

...
methods: {
  handleFocusEvent(event) {
    event.target && event.target.removeAttribute('readonly')
  }
}
複製程式碼

然而，ElementUI自帶的 auto-complete="off" 貌似並不生效。

阻止 `<el-form>` 預設提交行為

有時候我們在用餓了麼元件 <el-form> 在文字框中鍵入 enter 快捷鍵的時候會預設觸發頁面重新整理。我們可以加入如下程式碼解決其預設行為：

<el-form @submit.native.prevent>
  ...
</el-form>
複製程式碼

使用 `<el-scrollbar>` 元件

Element 官方是沒有明確提供這個元件的，但是其原始碼中確實存在。關於如何使用我寫了一個Demo，你可以狠狠的戳這裡檢視示例，本文不再贅述。

根據業務合併 `el-table` 中的行和列

最近在做專案的時候遇到一個需求：同一個賬號ID下有多個被分配的角色時並列顯示角色資訊。於是就想到了 el-table 提供的合併方法 :span-method。但它對後臺資料格式是有要求的：

如果後臺返回的資料是陣列裡面巢狀陣列的話，你就需要把裡面的陣列按順序也拿到外面了

// 假如後臺返回的資料是下面這樣的
{
  data: [
    { id: 1, appkey: 1, name: 'a', list: [{ id: 11, appkey: 1, name: 'a-1'}, {id: 12, appkey: 1, name: 'a-2'}] }
    { id: 2, appkey: 2, name: 'b', list: [{ id: 21, appkey: 2, name: 'b-1'}, {id: 22, appkey: 2, name: 'b-2'}] }
  ]
}

// 整理過後的格式應該是這樣的
{
  data: [
    { id: 1, appkey: 1, name: 'a' },
    { id: 11, appkey: 1, name: 'a-1' },
    { id: 12, appkey: 1, name: 'a-2' },
    { id: 2, appkey: 2, name: 'b' },
    { id: 21, appkey: 2, name: 'b-1' },
    { id: 22, appkey: 2, name: 'b-2' }
  ]
}
複製程式碼

下面是具體的處理流程：

<template>
  <el-table 
    :data="formattedList" 
    :span-method="handleColspanMethod"
  >
  ...
  </el-table>
</template>
<script>
import Api from '@/api/assign'
export default {
  data() {
    return {
      list: [], // 後臺返回的資料
      formattedList:[], // 格式化後的資料
      spanArr: [], // 儲存要合併的行列資料
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      Api.fetchList().then(response => {
        this.list = response.data.data
        // 格式化資料
        this.formattedList = this.formatArray(this.list)
        // 獲取合併位置
        this.getSpanArr()
      })
    },
    /**
     * 格式化陣列
     * {Array} sources 源陣列
     * {Array} arrayed 格式化後的陣列
     * return 返回格式化後的陣列
     */
    formatArray: function f(sources, arrayed) {
      if (!sources) return []
      
      const arr = arrayed || []
      const len = sources.length

      for (let i = 0; i < len; i++) {
        const childs = sources[i].list || []
        arr.push(sources[i])
        if (childs.length > 0) {
          f(sources[i].list, arr)
        }
      }
      return arr
    },
    /**
     * 獲取合併位置資訊
     */
    getSpanArr() {
      // 重置 spanArr，因為翻頁的時候資料就變了
      // 之前的資料如果不清空，其他頁也會受影響
      this.spanArr = []
      const data = this.formattedList
      if (!data || data.length <= 0) return
      // 遍歷
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          // 其實就是行索引
          this.pos = 0
        } else {
          // 如果當前物件和上一個物件的 appkey 相等
          // 說明需要合併
          if (data[i].appkey === data[i - 1].appkey) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },
    /**
     * 處理跨行列合併
     */
    handleColspanMethod({ row, column, rowIndex, columnIndex}) {
      if (columnIndex < 2) {
        const _spa = this.spanArr[rowIndex]
        const _row = _spa ? _spa : 0
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }
}
</script>
複製程式碼

單檔案樣式提取

如果 a.vue 和 b.vue 都用到了下面的樣式：

.btn {
  color: silver
}
// 省略很長的樣式
...
複製程式碼

可以考慮把樣式提取到 styleName.scss/css 中，例如：

./components/common.scss

.btn {
  color: silver
}
// 省略很長的樣式
複製程式碼

然後再在兩檔案中引入，即：

<template>...</template>
<script>...</script>
<style lang="scss" src="./components/common.scss" scoped/>
複製程式碼

是不是省了很多程式碼呢？快去試試吧！

解決 `vue-template-admin` 單檔案中背景圖片生產打包後路徑404問題

找到 build/utils.js
然後找到 generateLoaders 方法
在 if(options.extract){...} 中修改，即：

if (options.extract) {
  // 解決其打包背景圖片路徑問題
  loaders.push({
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: '../../'
    }
  })
} else {
  ...
}
複製程式碼

記住，千萬別再你的 css 中這樣寫：

background: url("/new/static/images/assets/loginbackground.png");
複製程式碼

因為 new 資料夾是後臺同學幫你配置的，隨時都有可能被修改，一個地方還好，多個地方改起來就蛋疼了。

data 初始化

因為 props 要比 data 先完成初始化，所以我們可以利用這一點給 data 初始化一些資料進去，看程式碼：

export default {
  data () {
    return {
      buttonSize: this.size
    }
  },
 props: {
   size: String
 }
}
複製程式碼

除了以上，子元件的 data 函式也可以有引數，且該引數是當前例項物件。所有我們可以利用這一點做一些自己的判斷。如，改寫上面的程式碼：

export default {
  data (vm) {
    return {
      buttonSize: vm.size
    }
  },
 props: {
   size: String
 }
}
複製程式碼

template

我們在做 v-if 判斷的時候，可以把判斷條件放在 template 元件上，最終的渲染結果將不包含 <template> 元素。

<template>
  <div class="box">
    <template v-if="isVal">
      <h2>...</h2>
    </template>
    <template v-else>
      <h2>...</h2>
    </template>
  </div>
</template>
複製程式碼

v-for 也同樣適用。

Lifecycle hook

生命週期鉤子可以是一個陣列型別，且陣列中的函式會依次執行。

export default {
 ...
 created: [
   function one () {
     console.log(1)
   },
   function two () {
     console.log(2)
   }
 ]
 ...
}
複製程式碼

沒什麼用，知道就行了。事實上生命週期鉤子還可以作用於 DOM 元素上，利用這一點，我們可以用父元件中的方法來初始化子元件的生命週期鉤子：

<!-- Child.vue -->
<template>
  <h3>I'm child!</h3>
</template>

<!-- Parent.vue -->
<template>
 <child @hook:created="handleChildCreated"></child>
</template>

<script>
   import Child from './child.vue'
   export default {
     components: [ Child ],
     methods: {
       handleChildCreated () {
         console.log('handle child created...')
       }
     }
   }
</script>
複製程式碼

其他鉤子雷同，不再贅述。

v-for

在用 v-for 遍歷陣列的時候，我們一般都會錯誤的這樣去做，舉個例子：

v-for 和 v-if 放在同一個元素上使用：

<template>
  <ul class="items">
    <!-- 只有啟用的使用者才可以顯示 -->
    <li 
      v-for="(user, index) in users" 
      v-if="user.isActive" 
      :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>
複製程式碼

由於 v-for 和 v-if 放在同一個元素上使用會帶來一些效能上的影響，官方給出的建議是在計算屬性上過濾之後再進行遍歷。所以平時開發不推薦一起使用，知道有這回事即可，不至於面試時不知道。關於為什麼不推薦放在一起使用，參見避免-v-if-和-v-for-用在一起。

混合

如果好多元件都共用到一些像 props、data、methods 等，可以單獨抽出來放到 mixins 混合器中。比如，在使用者管理列表中使用。

分頁混合器：

// paging-mixin.vue
export default {
  props: {
    pageSize: 1,
    pageLength: 10,
    currentPage: 1
    total: 20
  },
  methods: {
    /**
     * 上一頁
     */
    prevPage (page) {
      ...
    },
    /**
     * 下一頁
     */
    nextPage (page) {
      ...
    }
    /**
     * 跳轉到當前頁
     */
    currentPage (page) {
      ...
    }
  }
}
複製程式碼

Users.vue:

<template>
  <div class="user-model">
    <my-table :data="users"></my-table>
    <my-paging
      :page-length="pageLength"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="total">
    </my-paging>
  </div>
</template>

<script>
  import PagingMixin from '../mixins/paging-mixin.vue'
  export default {
    mixins: [PagingMixin],
    data () {
      return {
        users: [],
        pageLength: 10,
        pageSize: 1,
        currentPage: 1,
        total: 20
      }
    }
  }
</script>
複製程式碼

不用每個頁面都寫一遍 props 和 methods 了。

render 函式

下面是一段簡單的 template 模板程式碼：

<template>
  <div class="box">
    <h2>title</h2>
    this is content
  </div>
</template>
複製程式碼

我們用渲染函式來重寫上面的程式碼：

export default {
  render (h) {
    let _c = h
    return _c('div', 
      { class: 'box'}, 
      [_c('h2', {}, 'title'), 'this is content'])
  }
}
複製程式碼

事實上，Vue 會把模板(template)編譯成渲染函式(render)，你可以通過一個線上工具實時檢視編譯結果。上面的 template 模板會被編譯成如下渲染函式：

let render = function () {
  return _c('div',
    {staticClass:"box"},
    [_c('h2', [_v("title")]), _v("this is content")])
}
複製程式碼

是不是很像？正如官方說的，渲染函式比 template 更接近編譯器。如果用一個流程圖來解釋的話，大概是這個樣子：

template
    ↓
預編譯工具（vue-loader + vue-template-compile）
    ↓
  render
    ↓
resolve vnode
複製程式碼

具體參見 Vue宣告週期圖示。

渲染函式用處：

開發元件庫，Element 原始碼用的都是 render
封裝一些高階元件。元件裡面巢狀元件就是高階元件，前提是要滿足元件三要素：props、event、slot
用於處理一些複雜的邏輯判斷。如果我們一個元件裡面有很多 v-if 判斷的話，用模板就顯得不合適了，這個時候可以用渲染函式來輕鬆處理

errorCaptured

捕獲一個來自子孫元件的錯誤時被呼叫。有時候當我們想收集錯誤日誌，卻不想把錯誤暴露到瀏覽器控制檯的時候，這很有用。下面是個例子：

Child.vue

<template>
  <!-- 省略一些無關程式碼 -->
</template>
<script>
  export default {
    mounted () {
      // 故意把 console 寫錯
      consol.log('這裡會報錯！')
    }
  }
</script>
複製程式碼

Parent.vue

<template>
  <child></child>
</template>
<script>
  import Child from './Child.vue'
  export default {
    components: [ Child ],
    /**
     * 收到三個引數：
     * 錯誤物件、發生錯誤的元件例項
     * 以及一個包含錯誤來源資訊的字串。
     * 此鉤子可以返回 false 以阻止該錯誤繼續向上傳播。
     */
    errorCaptured (err, vm, info) {
      console.log(err)
      // -> ReferenceError: consle is not defined ...
      console.log(vm)
      // -> {_uid: 1, _isVue: true, $options: {…}, _renderProxy: o, _self: o,…}
      console.log(info)
      // -> `mounted hook`
      // 告訴我們這個錯誤是在 vm 元件中的 mounted 鉤子中發生的
      
      // 阻止該錯誤繼續向上傳播
      return false
    }
  }
</script>
複製程式碼

關於 errorCaptured 更多說明，請移步官網-> 。

v-once

通過 v-once 建立低開銷的靜態元件。渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的時候你可能有一個元件，這個元件包含了大量靜態內容。在這種情況下，你可以在根元素上新增 v-once 特性以確保這些內容只計算一次然後快取起來，就像這樣：

<template>
  <div class="box" v-once>
    <h2> 使用者協議 </h2>
    ... a lot of static content ...
  </div>
</template>
複製程式碼

只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。關於 v-once 更多介紹，請移步官網->。

slot-scope

作用域插槽。vue@2.5.0 版本以前叫 scope，之後的版本用 slot-scope 將其代替。除了 scope 只可以用於 <template> 元素，其它和 slot-scope 都相同。

用過 Element 元件的同學都知道，當我們在使用 <el-table> 的時候會看到如下程式碼：

Element@1.4.x 的版本：

<el-table-column label="操作">
  <template scope="scope">
  <el-button
    size="small"
    @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
  <el-button
    size="small"
    type="danger"
    @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
  </template>
</el-table-column>
複製程式碼

但在 2.0 之後的版本替換成了 slot-scope。

Element@2.0.11：

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button
      size="mini"
      @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
    <el-button
      size="mini"
      type="danger"
      @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
  </template>
</el-table-column>
複製程式碼

說白了，slot-scope 相當於函式的回撥，我把結果給你，你想怎麼處理就怎麼處理，一切隨你：

function getUserById (url, data, callback) {
  $.ajax({
    url,
    data,
    success: function (result) {
      callback(result)
    }
  })
}

// 使用
getUserById('/users', { id: 1 }, function (response) {
  // 拿到資料並開始處理自己的頁面邏輯
})
複製程式碼

下面我們來簡單模擬下 <el-table> 元件內部是怎麼使用 slot-scope 的，看程式碼：

模擬的 <el-table> 元件：

// 定義模板
let template = `
 <ul class="table">
  <li v-for="(item, index) in data" :key="index">
    <!-- 我希望資料由呼叫者自己處理 -->
    <!-- 'row' 相當於變數名，隨便定義，比如 aaa,bbb 啥的 -->
    <slot :row="item">
      <!-- 當使用者什麼都沒寫的時候，預設值才會顯示-->
      {{ item.name }}
    </slot>
  </li>
 </ul>
`
Vue.component('el-table', {
  template,
  props: {
    data: Array,
    default: []
  }
})
複製程式碼

在你需要的地方使用 <el-table> 元件：

HTML:

<div id="app">
  <el-table :data="userData">
    <!-- 使用的時候可以用 template -->
    <!-- `scope` 也是個變數名，隨便命名不是固定的，比如 foo, bar -->
    <template slot-scope="scope">
      <!-- 其中 `scope.row` 中的 row 就是我們上邊定義的變數啦-->
      <!-- `scope.row`返回的是 `item` 物件 -->
      <template v-if="scope.row.isActived">
        <span class="red">{{ scope.row.name }}</span>
      </template>
      <template v-else>
        {{ scope.row.name }}
      </template>
    </template>
  </el-table>
</div>
複製程式碼

JavaScript:

new Vue({
  el: '#app',
  data: {
    userData: [
      {id: 1, name: '張三', isActived: false},
      {id: 2, name: '李四', isActived: false},
      {id: 1, name: '王五', isActived: true},
      {id: 1, name: '趙六', isActived: false},
    ]
  }
})
複製程式碼

CSS:

.red {
  color: red
}
複製程式碼

你可以狠狠的戳這裡檢視上面的效果！最後，我們再使用 render 函式來重構上面的程式碼：

JavaScript:

// `<el-table>` 元件
Vue.component('el-table', {
  name: 'ElTable',
  render: function (h) {
    return h('div', { 
      class: 'el-table'
    }, this.$slots.default)
  },
  props: {
    data: Array
  }
})

// `<el-table-column>`
Vue.component('el-table-column', {
  name: 'ElTableColumn',
  render: function (h) {
    // 定義一個存放 li 元素的陣列
    let lis = [], 
       // 獲取父元件中的 data 陣列
       data = this.$parent.data
    // 遍歷陣列，也就是上面的 `v-for`，生成 `<li>` 標籤
    // `this.$scopedSlots.default` 獲取的就是上面 slot-scope 作用於插槽的部分，
    // 並把 `{ row: item }` 傳給上面的 `scope` 變數
    data.forEach((item, index) => {
      let liEl = h('li', {
        key: item.id
      }, [ this.$scopedSlots.default({ row: item }) ])
      // 把生成的 li 標籤存到陣列
      lis.push(liEl)
    })
    return h('ul', {
      class: 'el-table-column'
    }, lis)
  }
})
複製程式碼

在你的頁面這樣來使用：

HTMl:

<div id="app">
  <el-table :data="list">
    <el-table-column>
      <template slot-scope="scope">
        <span class="red" v-if="scope.row.actived">{{ scope.row.name }}</span>
        <span v-else>{{ scope.row.name }}</span>
      </template>
    </el-table-column>
  </el-table>
</div>
複製程式碼

JavaScript:

new Vue({
  el: '#app',
  data: {
    list: [
      { id: 1, name: '張三', actived: false },
      { id: 1, name: '李四', actived: false },
      { id: 1, name: '王五', actived: true },
      { id: 1, name: '趙六', actived: false },
    ]
  }
})
複製程式碼

你可以狠狠的戳這裡檢視上面的效果！

疑問：我們完全可以在 <li> 中進行邏輯判斷，為什麼還要放到外面進行處理呢？因為有時候我們用的不是自己開發的元件，比如上面的 <el-table> ，所以就有必要這麼做了。

結尾！

囉嗦了這麼多，希望看到的同學或多或少有點收穫吧。不對的地方還請留言指正，不勝感激。俗話說，三人行則必有我師！ 希望更多熱衷於 Vue 的小夥伴能聚在一起交流技術！下面是我維護的一個Q群，歡迎掃碼進群哦，讓我們一起交流學習吧。也可以加我個人微信：G911214255 ，備註 掘金 即可。

你或許不知道Vue的這些小技巧
2018-06-04
Vue
jquery的一些小技巧
2021-09-09
jQuery
快速提高你的UI設計水平的一些小技巧
2021-04-07
UI
iOS這些小技巧你都知道嗎
2021-11-15
iOS
用Golang做一個永久阻塞，你有哪些小技巧
2022-01-26
Golang
學習UI設計的一些小技巧你會了嗎?
2021-07-07
UI
使用 Laravel 時的一些小技巧
2019-04-02
Laravel
前端優化的一些小技巧
2018-05-15
前端優化
深入 TypeScript - 3 ( 一些小技巧)
2018-11-29
TypeScript
點贊處理的一些小技巧
2018-09-13
你不知道的 PHP 快取技巧
2019-11-15
PHP快取
VS Code寫Python的一些小技巧
2019-09-25
Python
總結下 javascript 中的一些小技巧
2019-04-03
JavaScript
c語言基礎的一些小技巧
2020-09-26
C語言
【vuejs】有關vue的一些小技巧
2018-07-09
VueJS
iOS 開發的一些小技巧篇（1）
2015-03-20
iOS
iOS 開發的一些小技巧篇（2）
2015-03-20
iOS
iOS 開發的一些小技巧篇（3）
2015-04-26
iOS
Direct3D的一些小技巧收藏
2010-12-27
3D
CSS的一些你可能不知道的強大技巧
2019-06-20
CSS
你不知道的前端SDK開發技巧
2018-07-15
前端
你可能不知道的字串分割技巧
2022-12-28
字串
提高網站載入速度的一些小技巧
2019-03-28
網站
CSS使用的一些小技巧/高階進階
2019-03-04
CSS
Chrome控制檯 JS除錯的一些小技巧
2015-07-07
ChromeJS除錯
新年新技巧：你可能不知道的Python技巧
2020-02-08
Python
IOS 11怎麼玩，這些小技巧值得你去更新！
2017-09-22
iOS
Vue你可能不知道的7個技巧
2018-08-27
Vue
你不知道的那些郵件營銷技巧
2020-12-17
AndroidStudio你不知道的除錯技巧
2017-03-02
Android除錯
我不知道你知不知道我知道的偽元素小技巧
2017-11-06
好程式設計師分享Vue的一些小技巧
2019-07-22
程式設計師Vue
分享Mac下開發中使用的一些小技巧
2018-12-24
Mac
你所不知道的 Chrome 控制檯除錯技巧
2019-02-19
Chrome除錯
你可能不知道的 transition 技巧與細節
2021-02-01
Python中你所不知道的“隱藏技巧”!
2023-05-16
Python
10個你可能不知道的前端PS技巧
2017-06-12
前端
你不知道的JavaScript（一）
2018-03-12
JavaScript

Vue.js 你不知道的一些小技巧

給 props 屬性設定多個型別

禁止瀏覽器 Auto complete 行為

阻止 <el-form> 預設提交行為

使用 <el-scrollbar> 元件

根據業務合併 el-table 中的行和列

單檔案樣式提取

解決 vue-template-admin 單檔案中背景圖片生產打包後路徑404問題

data 初始化

template

Lifecycle hook

v-for

混合

render 函式

errorCaptured

v-once

slot-scope

結尾！

相關文章

阻止 `<el-form>` 預設提交行為

使用 `<el-scrollbar>` 元件

根據業務合併 `el-table` 中的行和列

解決 `vue-template-admin` 單檔案中背景圖片生產打包後路徑404問題