前言
用Vue開發一個網頁並不難，但是也經常會遇到一些問題，其實大部分的問題都在文件中有所提及，再不然我們通過谷歌也能成功搜尋到問題的答案，為了幫助小夥伴們提前踩坑，在遇到問題的時候，心裡大概有個譜知道該如何去解決問題。這篇文章是將自己知道的一些小技巧，結合查閱資料整理成的一篇文章，如果喜歡的話可以點波贊/關注，支援一下，希望大家看完本文可以有所收穫。
文章內容總結:
- 元件style的scoped
- Vue 陣列/物件更新 檢視不更新
- vue filters 過濾器的使用
- 列表渲染相關
- 深度watch與watch立即觸發回撥
- 這些情況下不要使用箭頭函式
- 路由懶載入寫法
- 路由的專案啟動頁和404頁面
- Vue除錯神器:vue-devtools
元件style的scoped:
問題：在元件中用js動態建立的dom，新增樣式不生效。
場景:
<template>
<div class="test"></div>
</template>
<script>
let a=document.querySelector('.test');
let newDom=document.createElement("div"); // 建立dom
newDom.setAttribute("class","testAdd" ); // 新增樣式
a.appendChild(newDom); // 插入dom
</script>
<style scoped>
.test{
background:blue;
height:100px;
width:100px;
}
.testAdd{
background:red;
height:100px;
width:100px;
}
</style>
複製程式碼結果：
// test生效 testAdd 不生效
<div data-v-1b971ada class="test"><div class="testAdd"></div></div>
.test[data-v-1b971ada]{ // 注意data-v-1b971ada
background:blue;
height:100px;
width:100px;
}
複製程式碼原因:
當 <style> 標籤有 scoped 屬性時，它的 CSS 只作用於當前元件中的元素。
它會為元件中所有的標籤和class樣式新增一個scoped標識，就像上面結果中的data-v-1b971ada。
所以原因就很清楚了：因為動態新增的dom沒有scoped新增的標識，沒有跟testAdd的樣式匹配起來，導致樣式失效。
解決方式
- 推薦：去掉該元件的scoped
每個元件的css並不會很多，當設計到動態新增dom，併為dom新增樣式的時候，就可以去掉scoped，會比下面的方法方便很多。
-
可以動態新增style
// 上面的栗子可以這樣新增樣式 newDom.style.height='100px'; newDom.style.width='100px'; newDom.style.background='red'; 複製程式碼
Vue 陣列/物件更新 檢視不更新
很多時候，我們習慣於這樣運算元組和物件:
data() { // data資料
return {
arr: [1,2,3],
obj:{
a: 1,
b: 2
}
};
},
// 資料更新 陣列檢視不更新
this.arr[0] = 'OBKoro1';
this.arr.length = 1;
console.log(arr);// ['OBKoro1'];
// 資料更新 物件檢視不更新
this.obj.c = 'OBKoro1';
delete this.obj.a;
console.log(obj); // {b:2,c:'OBKoro1'}
複製程式碼由於js的限制，Vue 不能檢測以上陣列的變動，以及物件的新增/刪除，很多人會因為像上面這樣操作，出現檢視沒有更新的問題。
解決方式:
-
this.$set(你要改變的陣列/物件，你要改變的位置/key，你要改成什麼value)
this.$set(this.arr, 0, "OBKoro1"); // 改變陣列 this.$set(this.obj, "c", "OBKoro1"); // 改變物件 複製程式碼
如果還是不懂的話，可以看看這個codependemo。
- 陣列原生方法觸發檢視更新:
Vue可以監測到陣列變化的，陣列原生方法:
splice()、 push()、pop()、shift()、unshift()、sort()、reverse()
複製程式碼意思是使用這些方法不用我們再進行額外的操作，檢視自動進行更新。
推薦使用splice方法會比較好自定義,因為slice可以在陣列的任何位置進行刪除/新增操作，這部分可以看看我前幾天寫的一篇文章:【乾貨】js 陣列詳細操作方法及解析合集
- 替換陣列/物件
比方說:你想遍歷這個陣列/物件，對每個元素進行處理，然後觸發檢視更新。
// 文件中的栗子: filter遍歷陣列，返回一個新陣列，用新陣列替換舊陣列
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
複製程式碼舉一反三：可以先把這個陣列/物件儲存在一個變數中，然後對這個變數進行遍歷，等遍歷結束後再用變數替換物件/陣列。
並不會重新渲染整個列表:
Vue 為了使得 DOM 元素得到最大範圍的重用而實現了一些智慧的、啟發式的方法，所以用一個含有相同元素的陣列去替換原來的陣列是非常高效的操作。
如果你還是很困惑，可以看看Vue文件中關於這部分的解釋。
vue filters 過濾器的使用:
過濾器，通常用於後臺管理系統，或者一些約定型別，過濾。Vue過濾器用法是很簡單，但是很多朋友可能都沒有用過，這裡稍微講解一下。
在html模板中的兩種用法：
<!-- 在雙花括號中 -->
{{ message | filterTest }}
<!-- 在 `v-bind` 中 -->
<div :id="message | filterTest"></div>
複製程式碼在元件script中的用法:
export default {
data() {
return {
message:1
}
},
filters: {
filterTest(value) {
// value在這裡是message的值
if(value===1){
return '最後輸出這個值';
}
}
}
}
複製程式碼用法就是上面講的這樣，可以自己在元件中試一試就知道了，很簡單很好用的。
如果不想自己試，可以點這個demo裡面修改程式碼就可以了，demo中包括過濾器串聯、過濾器傳參。
推薦看Vue過濾器文件，你會更瞭解它的。
列表渲染相關
v-for迴圈繫結model:
input在v-for中可以像如下這麼進行繫結，我敢打賭很多人不知道。
// 資料
data() {
return{
obj: {
ob: "OB",
koro1: "Koro1"
},
model: {
ob: "預設ob",
koro1: "預設koro1"
}
}
},
// html模板
<div v-for="(value,key) in obj">
<input type="text" v-model="model[key]">
</div>
// input就跟資料繫結在一起了，那兩個預設資料也會在input中顯示
複製程式碼為此，我做了個demo,你可以點進去試試。
一段取值的v-for
如果我們有一段重複的html模板要渲染，又沒有資料關聯，我們可以:
<div v-for="n in 5">
<span>這裡會被渲染5次，渲染模板{{n}}</span>
</div>
複製程式碼v-if儘量不要與v-for在同一節點使用:
v-for 的優先順序比 v-if 更高,如果它們處於同一節點的話，那麼每一個迴圈都會執行一遍v-if。
如果你想根據迴圈中的每一項的資料來判斷是否渲染，那麼你這樣做是對的:
<li v-for="todo in todos" v-if="todo.type===1">
{{ todo }}
</li>
複製程式碼如果你想要根據某些條件跳過迴圈，而又跟將要渲染的每一項資料沒有關係的話，你可以將v-if放在v-for的父節點：
// 根據elseData是否為true 來判斷是否渲染，跟每個元素沒有關係
<ul v-if="elseData">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
// 陣列是否有資料 跟每個元素沒有關係
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
複製程式碼如上，正確使用v-for與v-if優先順序的關係，可以為你節省大量的效能。
深度watch與watch立即觸發回撥
watch很多人都在用，但是這watch中的這兩個選項deep、immediate，或許不是很多人都知道，我猜。
選項：deep
在選項引數中指定 deep: true，可以監聽物件中屬性的變化。
選項：immediate
在選項引數中指定 immediate: true, 將立即以表示式的當前值觸發回撥，也就是立即觸發一次。
watch: {
obj: {
handler(val, oldVal) {
console.log('屬性發生變化觸發這個回撥',val, oldVal);
},
deep: true // 監聽這個物件中的每一個屬性變化
},
step: { // 屬性
//watch
handler(val, oldVal) {
console.log("預設立即觸發一次", val, oldVal);
},
immediate: true // 預設立即觸發一次
},
},
複製程式碼這兩個選項可以同時使用，另外：是的，又有一個demo。
還有下面這一點需要注意。
這些情況下不要使用箭頭函式:
- 不應該使用箭頭函式來定義一個生命週期方法
- 不應該使用箭頭函式來定義 method 函式
- 不應該使用箭頭函式來定義計算屬性函式
- 不應該對 data 屬性使用箭頭函式
- 不應該使用箭頭函式來定義 watcher 函式
示例：
// 上面watch的栗子：
handler:(val, oldVal)=> { // 可以執行
console.log("預設觸發一次", val, oldVal);
},
// method：
methods: {
plus: () => { // 可以執行
// do something
}
}
// 生命週期:
created:()=>{ // 可以執行
console.log('lala',this.obj)
},
複製程式碼是的，沒錯，這些都能執行。
but:
箭頭函式繫結了父級作用域的上下文，this 將不會按照期望指向 Vue 例項。
也就是說，你不能使用this來訪問你元件中的data資料以及method方法了。
this將會指向undefined。
路由懶載入寫法:
// 我所採用的方法，個人感覺比較簡潔一些，少了一步引入賦值。
const router = new VueRouter({
routes: [
path: '/app',
component: () => import('./app'), // 引入元件
]
})
// Vue路由文件的寫法:
const app = () => import('./app.vue') // 引入元件
const router = new VueRouter({
routes: [
{ path: '/app', component: app }
]
})
複製程式碼文件的寫法在於問題在於：如果我們的路由比較多的話，是不是要在路由上方引入賦值十幾行元件？
第一種跟第二種方法相比就是把引入賦值的一步，直接寫在component上面，本質上是一樣的。兩種方式都可以的，大家自由選擇哈。
路由的專案啟動頁和404頁面
實際上這也就是一個設定而已:
export default new Router({
routes: [
{
path: '/', // 專案啟動頁
redirect:'/login' // 重定向到下方宣告的路由
},
{
path: '*', // 404 頁面
component: () => import('./notFind') // 或者使用component也可以的
},
]
})
複製程式碼比如你的域名為:www.baidu.com
專案啟動頁指的是: 當你進入www.baidu.com，會自動跳轉到login登入頁。
404頁面指的是: 當進入一個沒有 宣告/沒有匹配 的路由頁面時就會跳轉到404頁面。
比如進入www.baidu.com/testRouter,就會自動跳轉到notFind頁面。
當你沒有宣告一個404頁面，進入www.baidu.com/testRouter，顯示的頁面是一片空白。
Vue除錯神器:vue-devtools
每次除錯的時候，寫一堆console是否很煩？想要更快知道元件/Vuex內資料的變化？
那麼這款尤大開發的除錯神器:vue-devtools，你真的要了解一下了。
這波穩賺不賠，真的能提高開發效率。
安裝方法：
- 谷歌商店+科學上網,搜尋vue-devtools即可安裝。
- 不會科學上網？手動安裝
安裝之後：
在chrome開發者工具中會看一個vue的一欄，如下對我們網頁應用內資料變化，元件層級等資訊能夠有更準確快速的瞭解。
前幾個月也寫過一篇類似的:
結語
本文的內容很多都在Vue文件裡面有過說明，推薦大家可以多看看Vue文件，不止看教程篇，還有文件的Api什麼的，也都可以看。然後其實還有兩三點想寫的，因為預計篇幅都會比較長一點，所以準備留到以後的文章裡面吧~
文章如有不正確的地方歡迎各位路過的大佬鞭策！希望大家看完可以有所收穫，喜歡的話，趕緊點波訂閱關注/喜歡。
看完的朋友可以點個喜歡/關注，您的支援是對我最大的鼓勵。
部落格、前端積累文件、公眾號、GitHub、wx:OBkoro1、郵箱：obkoro1@foxmail.com
以上2018.6.3