Vue.js 你不知道的奇技淫巧

阿新 • • 發佈：2018-11-13

自己先想一分鐘。

vue.js

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

給 props 屬性設定多個型別

這個技巧在開發元件的時候用的較多，為了更大的容錯性考慮。比如一個 <my-button> 上暴露了一個 width 屬性：

// my-button.vue
export default {
  props: {
    width: [String, Number],
    default: '100px'
  }
}
複製程式碼

我們既可以傳 100px，也可以傳 100 。

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

<script>
  export default {
    props: {
      width: [String, Number],
      default: '100px'
    },
    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>
複製程式碼

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-if 一起使用

由於 v-for 比 v-if 渲染優先順序更高，所以有時候可以一起使用。下面兩種常見的情況下會傾向於把 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>
</template>
複製程式碼

關於以上兩點不明白的地方可以參見 Vue 風格指南。

混合

如果好多元件都共用到一些像 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

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

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

[email protected] 的版本：

<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。

[email protected]：

<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' 相當於變數名，隨便起名 -->
    <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` 只是個形參，隨便起名 -->
    <template slot-scope="scope">
      <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
}
複製程式碼

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

作者：gongph
連結：https://juejin.im/post/5be01d0ce51d450700084925
來源：掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

Vue.js 你不知道的奇技淫巧

給 props 屬性設定多個型別

data 初始化

template

Lifecycle hook

v-for 和 v-if 一起使用

混合

render 函式

errorCaptured

v-once

slot-scope

Vue.js 你不知道的奇技淫巧

Vue.js 你不知道的冷(qi)門(ji)知(yin)識(qiao)

那些你可能不知道的視訊下載奇技淫巧

[JS]你不知道的Event Loop

Python奇技淫巧之將你的女神照片變成字元畫！女朋友就答應嘿嘿

奇技淫巧 - Vue Mixins 高階元件與 Vue HOC 高階元件實踐

解決樣本不平衡問題的奇技淫巧彙總

C#開發奇技淫巧三：把dll放在不同的目錄讓你的程式更整潔

曹工說Spring Boot原始碼（11）-- context:component-scan，你真的會用嗎（這次來說說它的奇技淫巧）

關於字符串和文件流的奇技淫巧

Mysql數據閃回的奇技淫巧(binlog2sql)

CSS布局奇技淫巧：各種居中

黑暗中的生物：利用奇技淫巧快活生存

C#開發奇技淫巧一：調試windows系統服務

C#開發奇技淫巧二：根據dll文件加載C++或者Delphi插件

javascript 向下取整奇技淫巧

「奇技淫巧」博客園頁面美化（差不多是劃水

C的奇技淫巧

CF1063A Oh Those Palindromes 奇技淫巧

java的奇技淫巧--意外行為與特性(譯文)

Vue.js 你不知道的奇技淫巧

給 props 屬性設定多個型別

data 初始化

template

Lifecycle hook

v-for 和 v-if 一起使用

混合

render 函式

errorCaptured

v-once

slot-scope

相關推薦