面試官: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 ,備註 掘金
即可。