好程式設計師分享Vue的一些小技巧

　　好程式設計師 分享 Vue 的 一些 小技巧 ， 前言 ： 用 Vue 開發一個網頁並不難，但是也經常會遇到一些問題，其實大部分的問題都在文件中有所提及，再不然我們透過谷歌也能成功搜尋到問題的答案，為了幫助小夥伴們提前踩坑，在遇到問題的時候，心裡大概有個譜知道該如何去解決問題。這篇文章是將自己知道的一些小技巧 分享給大家， 希望看完本文可以有所收穫。

 

　　 文章內容總結 :

　　 元件 style 的 scoped

　　 Vue 陣列 / 物件更新 檢視不更新

　　 vue filters 過濾器的使用

　　 列表渲染相關

　　 深度 watch 與 watch 立即觸發回撥

　　 這些情況下不要使用箭頭函式

　　 路由懶載入寫法

　　 路由的專案啟動頁和 404 頁面

　　 Vue 除錯神器 :vue-devtools

　　 元件 style 的 scoped:

　　 問題：在元件中用 js 動態建立的 dom ，新增樣式不生效。

　　 場景 :

　　 <template>

　　 <div></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><div></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 陣列詳細操作方法及解析合集

　　 3. 替換陣列 / 物件

　　 比方說 : 你想遍歷這個陣列 / 物件，對每個元素進行處理，然後觸發檢視更新。

　　 // 文件中的栗子 : 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 過濾器文件，你會更瞭解它的。