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

gongph發表於2018-11-12

面試官:MVVM 和 MVC 的區別是什麼?

自己先想一分鐘。

vue.js

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

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

混合

如果好多元件都共用到一些像 propsdatamethods 等,可以單獨抽出來放到 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>
複製程式碼

不用每個頁面都寫一遍 propsmethods 了。

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
  • 封裝一些高階元件。元件裡面巢狀元件就是高階元件,前提是要滿足元件三要素:propseventslot
  • 用於處理一些複雜的邏輯判斷。如果我們一個元件裡面有很多 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 ,備註 掘金 即可。

Q1769617251

相關文章