前言
用Vue開發(fā)一個(gè)網(wǎng)頁(yè)并不難，但是也經(jīng)常會(huì)遇到一些問題，其實(shí)大部分的問題都在文檔中有所提及，再不然我們通過谷歌也能成功搜索到問題的答案，為了幫助小伙伴們提前踩坑，在遇到問題的時(shí)候，心里大概有個(gè)譜知道該如何去解決問題。這篇文章是將自己知道的一些小技巧，結(jié)合查閱資料整理成的一篇文章，如果喜歡的話可以點(diǎn)波贊/關(guān)注，支持一下，希望大家看完本文可以有所收獲。

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、東洲ssl等。為成百上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的東洲網(wǎng)站制作公司

前端進(jìn)階積累、公眾號(hào)、GitHub

文章內(nèi)容總結(jié):
組件style的scoped
Vue 數(shù)組/對(duì)象更新 視圖不更新
vue filters 過濾器的使用
列表渲染相關(guān)
深度watch與watch立即觸發(fā)回調(diào)
這些情況下不要使用箭頭函數(shù)
路由懶加載寫法
路由的項(xiàng)目啟動(dòng)頁(yè)和404頁(yè)面
Vue調(diào)試神器:vue-devtools
組件style的scoped:
問題：在組件中用js動(dòng)態(tài)創(chuàng)建的dom，添加樣式不生效。

場(chǎng)景:

<template>
     <div class="test"></div>
</template>
<script>
    let a=document.querySelector('.test');
    let newDom=document.createElement("div"); // 創(chuàng)建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>

復(fù)制代碼
結(jié)果：

// 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;
}
復(fù)制代碼
原因:

當(dāng) <style> 標(biāo)簽有 scoped 屬性時(shí)，它的 CSS 只作用于當(dāng)前組件中的元素。

它會(huì)為組件中所有的標(biāo)簽和class樣式添加一個(gè)scoped標(biāo)識(shí)，就像上面結(jié)果中的data-v-1b971ada。

所以原因就很清楚了：因?yàn)閯?dòng)態(tài)添加的dom沒有scoped添加的標(biāo)識(shí)，沒有跟testAdd的樣式匹配起來，導(dǎo)致樣式失效。

解決方式

推薦：去掉該組件的scoped
每個(gè)組件的css并不會(huì)很多，當(dāng)設(shè)計(jì)到動(dòng)態(tài)添加dom，并為dom添加樣式的時(shí)候，就可以去掉scoped，會(huì)比下面的方法方便很多。

可以動(dòng)態(tài)添加style

// 上面的栗子可以這樣添加樣式
newDom.style.height='100px';
newDom.style.width='100px';
newDom.style.background='red';
復(fù)制代碼
Vue 數(shù)組/對(duì)象更新 視圖不更新
很多時(shí)候，我們習(xí)慣于這樣操作數(shù)組和對(duì)象:

 data() { // data數(shù)據(jù)
    return {
      arr: [1,2,3],
      obj:{
          a: 1,
          b: 2
      }
    };
  },

// 數(shù)據(jù)更新 數(shù)組視圖不更新
this.arr[0] = 'OBKoro1';
this.arr.length = 1;
console.log(arr);// ['OBKoro1'];
// 數(shù)據(jù)更新 對(duì)象視圖不更新
this.obj.c = 'OBKoro1';
delete this.obj.a;
console.log(obj); // {b:2,c:'OBKoro1'}
復(fù)制代碼
由于js的限制，Vue 不能檢測(cè)以上數(shù)組的變動(dòng)，以及對(duì)象的添加/刪除，很多人會(huì)因?yàn)橄裆厦孢@樣操作，出現(xiàn)視圖沒有更新的問題。

解決方式:

this.$set(你要改變的數(shù)組/對(duì)象，你要改變的位置/key，你要改成什么value)

this.$set(this.arr, 0, "OBKoro1"); // 改變數(shù)組
this.$set(this.obj, "c", "OBKoro1"); // 改變對(duì)象
復(fù)制代碼
如果還是不懂的話，可以看看這個(gè)codependemo。

數(shù)組原生方法觸發(fā)視圖更新:
Vue可以監(jiān)測(cè)到數(shù)組變化的，數(shù)組原生方法:

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

復(fù)制代碼
意思是使用這些方法不用我們?cè)龠M(jìn)行額外的操作，視圖自動(dòng)進(jìn)行更新。

推薦使用splice方法會(huì)比較好自定義,因?yàn)閟lice可以在數(shù)組的任何位置進(jìn)行刪除/添加操作，這部分可以看看我前幾天寫的一篇文章:【干貨】js 數(shù)組詳細(xì)操作方法及解析合集

替換數(shù)組/對(duì)象
比方說:你想遍歷這個(gè)數(shù)組/對(duì)象，對(duì)每個(gè)元素進(jìn)行處理，然后觸發(fā)視圖更新。

// 文檔中的栗子: filter遍歷數(shù)組，返回一個(gè)新數(shù)組，用新數(shù)組替換舊數(shù)組
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
復(fù)制代碼
舉一反三：可以先把這個(gè)數(shù)組/對(duì)象保存在一個(gè)變量中，然后對(duì)這個(gè)變量進(jìn)行遍歷，等遍歷結(jié)束后再用變量替換對(duì)象/數(shù)組。

并不會(huì)重新渲染整個(gè)列表:

Vue 為了使得 DOM 元素得到大范圍的重用而實(shí)現(xiàn)了一些智能的、啟發(fā)式的方法，所以用一個(gè)含有相同元素的數(shù)組去替換原來的數(shù)組是非常高效的操作。

如果你還是很困惑，可以看看Vue文檔中關(guān)于這部分的解釋。

vue filters 過濾器的使用:
過濾器，通常用于后臺(tái)管理系統(tǒng)，或者一些約定類型，過濾。Vue過濾器用法是很簡(jiǎn)單，但是很多朋友可能都沒有用過，這里稍微講解一下。

在html模板中的兩種用法：

<!-- 在雙花括號(hào)中 -->
{{ message | filterTest }}
<!-- 在 `v-bind` 中 -->
<div :id="message | filterTest"></div>

復(fù)制代碼
在組件script中的用法:

export default {
data() {
return {
message:1
}
},
filters: {
filterTest(value) {
// value在這里是message的值
if(value===1){
return '最后輸出這個(gè)值';
}
}
}
}
復(fù)制代碼
用法就是上面講的這樣，可以自己在組件中試一試就知道了，很簡(jiǎn)單很好用的。

如果不想自己試，可以點(diǎn)這個(gè)demo里面修改代碼就可以了，demo中包括過濾器串聯(lián)、過濾器傳參。

推薦看Vue過濾器文檔，你會(huì)更了解它的。

列表渲染相關(guān)
v-for循環(huán)綁定model:

input在v-for中可以像如下這么進(jìn)行綁定，我敢打賭很多人不知道。

// 數(shù)據(jù)    
  data() {
      return{
       obj: {
          ob: "OB",
          koro1: "Koro1"
        },
        model: {
          ob: "默認(rèn)ob",
          koro1: "默認(rèn)koro1"
        }   
      }
  },
// html模板
<div v-for="(value,key) in obj">
   <input type="text" v-model="model[key]">
</div>
  // input就跟數(shù)據(jù)綁定在一起了，那兩個(gè)默認(rèn)數(shù)據(jù)也會(huì)在input中顯示

復(fù)制代碼
為此，我做了個(gè)demo,你可以點(diǎn)進(jìn)去試試。

一段取值的v-for

如果我們有一段重復(fù)的html模板要渲染，又沒有數(shù)據(jù)關(guān)聯(lián)，我們可以:

<div v-for="n in 5">
    <span>這里會(huì)被渲染5次，渲染模板{{n}}</span>
 </div>

復(fù)制代碼
v-if盡量不要與v-for在同一節(jié)點(diǎn)使用:

v-for 的優(yōu)先級(jí)比 v-if 更高,如果它們處于同一節(jié)點(diǎn)的話，那么每一個(gè)循環(huán)都會(huì)運(yùn)行一遍v-if。

如果你想根據(jù)循環(huán)中的每一項(xiàng)的數(shù)據(jù)來判斷是否渲染，那么你這樣做是對(duì)的:

<li v-for="todo in todos" v-if="todo.type===1">
  {{ todo }}
</li>

復(fù)制代碼
如果你想要根據(jù)某些條件跳過循環(huán)，而又跟將要渲染的每一項(xiàng)數(shù)據(jù)沒有關(guān)系的話，你可以將v-if放在v-for的父節(jié)點(diǎn)：

// 根據(jù)elseData是否為true 來判斷是否渲染，跟每個(gè)元素沒有關(guān)系    
 <ul v-if="elseData">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
// 數(shù)組是否有數(shù)據(jù) 跟每個(gè)元素沒有關(guān)系
<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>

復(fù)制代碼
如上，正確使用v-for與v-if優(yōu)先級(jí)的關(guān)系，可以為你節(jié)省大量的性能。

深度watch與watch立即觸發(fā)回調(diào)
watch很多人都在用，但是這watch中的這兩個(gè)選項(xiàng)deep、immediate，或許不是很多人都知道，我猜。

選項(xiàng)：deep

在選項(xiàng)參數(shù)中指定 deep: true，可以監(jiān)聽對(duì)象中屬性的變化。

選項(xiàng)：immediate

在選項(xiàng)參數(shù)中指定 immediate: true, 將立即以表達(dá)式的當(dāng)前值觸發(fā)回調(diào)，也就是立即觸發(fā)一次。

watch: {
    obj: {
      handler(val, oldVal) {
        console.log('屬性發(fā)生變化觸發(fā)這個(gè)回調(diào)',val, oldVal);
      },
      deep: true // 監(jiān)聽這個(gè)對(duì)象中的每一個(gè)屬性變化
    },
    step: { // 屬性
      //watch
      handler(val, oldVal) {
        console.log("默認(rèn)立即觸發(fā)一次", val, oldVal);
      },
      immediate: true // 默認(rèn)立即觸發(fā)一次
    },
  },

復(fù)制代碼
這兩個(gè)選項(xiàng)可以同時(shí)使用，另外：是的，又有一個(gè)demo。

還有下面這一點(diǎn)需要注意。

這些情況下不要使用箭頭函數(shù):
不應(yīng)該使用箭頭函數(shù)來定義一個(gè)生命周期方法
不應(yīng)該使用箭頭函數(shù)來定義 method 函數(shù)
不應(yīng)該使用箭頭函數(shù)來定義計(jì)算屬性函數(shù)
不應(yīng)該對(duì) data 屬性使用箭頭函數(shù)
不應(yīng)該使用箭頭函數(shù)來定義 watcher 函數(shù)
示例：

// 上面watch的栗子：
handler:(val, oldVal)=> { // 可以執(zhí)行
 console.log("默認(rèn)觸發(fā)一次", val, oldVal);

},
// method：
methods: {
plus: () => { // 可以執(zhí)行
// do something
}
}
// 生命周期:
created:()=>{ // 可以執(zhí)行
console.log('lala',this.obj)
},
復(fù)制代碼
是的，沒錯(cuò)，這些都能執(zhí)行。

but:

箭頭函數(shù)綁定了父級(jí)作用域的上下文，this 將不會(huì)按照期望指向 Vue 實(shí)例。

也就是說，你不能使用this來訪問你組件中的data數(shù)據(jù)以及method方法了。

this將會(huì)指向undefined。

路由懶加載寫法:
// 我所采用的方法，個(gè)人感覺比較簡(jiǎn)潔一些，少了一步引入賦值。
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 }
]
})
復(fù)制代碼
文檔的寫法在于問題在于：如果我們的路由比較多的話，是不是要在路由上方引入賦值十幾行組件？

第一種跟第二種方法相比就是把引入賦值的一步，直接寫在component上面，本質(zhì)上是一樣的。兩種方式都可以的，大家自由選擇哈。

路由的項(xiàng)目啟動(dòng)頁(yè)和404頁(yè)面
實(shí)際上這也就是一個(gè)設(shè)置而已:

export default new Router({
  routes: [
    {
      path: '/', // 項(xiàng)目啟動(dòng)頁(yè)
      redirect:'/login'  // 重定向到下方聲明的路由 
    },
    {
      path: '*', // 404 頁(yè)面 
      component: () => import('./notFind') // 或者使用component也可以的
    },
  ]
})

復(fù)制代碼
比如你的域名為:www.baidu.com

項(xiàng)目啟動(dòng)頁(yè)指的是: 當(dāng)你進(jìn)入www.baidu.com，會(huì)自動(dòng)跳轉(zhuǎn)到login登錄頁(yè)。

404頁(yè)面指的是: 當(dāng)進(jìn)入一個(gè)沒有 聲明/沒有匹配 的路由頁(yè)面時(shí)就會(huì)跳轉(zhuǎn)到404頁(yè)面。

比如進(jìn)入www.baidu.com/testRouter,就會(huì)自動(dòng)跳轉(zhuǎn)到notFind頁(yè)面。

當(dāng)你沒有聲明一個(gè)404頁(yè)面，進(jìn)入www.baidu.com/testRouter，顯示的頁(yè)面是一片空白。

Vue調(diào)試神器:vue-devtools
每次調(diào)試的時(shí)候，寫一堆console是否很煩？想要更快知道組件/Vuex內(nèi)數(shù)據(jù)的變化？

那么這款尤大開發(fā)的調(diào)試神器:vue-devtools，你真的要了解一下了。

這波穩(wěn)賺不賠，真的能提高開發(fā)效率。

安裝方法：

搜索vue-devtools即可安裝。
安裝之后：

在chrome開發(fā)者工具中會(huì)看一個(gè)vue的一欄，如下對(duì)我們網(wǎng)頁(yè)應(yīng)用內(nèi)數(shù)據(jù)變化，組件層級(jí)等信息能夠有更準(zhǔn)確快速的了解。

前幾個(gè)月也寫過一篇類似的:
Vue 實(shí)踐過程中的幾個(gè)問題

結(jié)語(yǔ)
本文的內(nèi)容很多都在Vue文檔里面有過說明，推薦大家可以多看看Vue文檔，不止看教程篇，還有文檔的Api什么的，也都可以看。然后其實(shí)還有兩三點(diǎn)想寫的，因?yàn)轭A(yù)計(jì)篇幅都會(huì)比較長(zhǎng)一點(diǎn)，所以準(zhǔn)備留到以后的文章里面吧~

文章如有不正確的地方歡迎各位路過的大佬鞭策！希望大家看完可以有所收獲，喜歡的話，趕緊點(diǎn)波訂閱關(guān)注/喜歡。

看完的朋友可以點(diǎn)個(gè)喜歡/關(guān)注，您的支持是對(duì)我大的鼓勵(lì)。
前端進(jìn)階積累、公眾號(hào)、GitHub、wx:OBkoro1、郵箱：obkoro1@foxmail.com

以上2018.6.3

參考資料：
Vue文檔

Vue Api文檔

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文題目：你或許不知道Vue的這些小技巧-創(chuàng)新互聯(lián)
文章位置：http://jinyejixie.com/article44/disehe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、全網(wǎng)營(yíng)銷推廣、網(wǎng)頁(yè)設(shè)計(jì)公司、靜態(tài)網(wǎng)站、面包屑導(dǎo)航、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)