vue採坑實錄
1.給link新增事件、給元件繫結原生事件
在vue-router1中使用v-link寫入路由，但是在vue-router2中要使用router-link寫入路由，在瀏覽器渲染的時候會把router-link渲染成a。
有時候需要為router-link註冊事件，對於一般的html元素，直接使用@click="eventFun"即可，但是對於router-link，像普通html元素那樣註冊事件後並不管用，需要新增.native才會成功註冊。
事實上給元件繫結原生事件就需要.native修飾v-on，否則無法註冊成功。
<my-component v-on:click.native="doTheThing"></my-component>
錯誤事例：
<el-inputplaceholder="請輸入特定消費金額 " @mouseover="test()"></el-input>
<router-link:to="item.menuUrl" @click="toggleName=''"></router-link>
<!--官方文件有-><!--https://cn.vuejs.org/v2/guide/components.html#給元件繫結原生事件-->
2.修改prop中的資料
每次父元件更新時，子元件的所有 prop 都會更新為最新值。這意味著你不應該在子元件內部改變 prop。如果你這麼做了，Vue 會在控制檯給出警告。
在兩種情況下，我們很容易忍不住想去修改 prop 中資料：
Prop 作為初始值傳入後，子元件想把它當作區域性資料來用；
Prop 作為原始資料傳入，由子元件處理成其它資料輸出。
對這兩種情況，正確的應對方式是：
定義一個區域性變數，並用 prop 的值初始化它：
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
定義一個計算屬性，處理 prop 的值並返回：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
3.我需要遍歷的陣列值更新了,值也賦值了,為什麼檢視不更新？
因為有侷限性啊,官方文件也說的很清楚，一般我們常用的手段是使用:this.$set(obj,item,value)
官方文件如下：
由於 JavaScript 的限制，Vue 不能檢測以下變動的陣列：
當你利用索引直接設定一個項時，例如：vm.items[indexOfItem] = newValue
當你修改陣列的長度時，例如：vm.items.length = newLength
為了解決第一類問題，以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果，同時也將觸發狀態更新：
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)
為了解決第二類問題，你可以使用 splice：
example1.items.splice(newLength)
還是由於 JavaScript 的限制，Vue 不能檢測物件屬性的新增或刪除，對於已經建立的例項，Vue 不能動態新增根級別的響應式屬性。
但是，可以使用 Vue.set(object, key, value) 方法向巢狀物件新增響應式屬性。例如，對於：
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
你可以新增一個新的 age 屬性到巢狀的 userProfile 物件：
Vue.set(vm.userProfile, 'age', 27)
有時你可能需要為已有物件賦予多個新屬性，比如使用 Object.assign() 或 _.extend()。
在這種情況下，你應該用兩個物件的屬性建立一個新的物件。所以，如果你想新增新的響應式屬性，不要像這樣：
Object.assign(this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
你應該這樣做：
this.userProfile = Object.assign({}, this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
4.建議儘可能在使用 v-for 時提供 key
<div v-for="item in items" :key="item.id">
<!-- 內容 -->
</div>
它是 Vue 識別節點的一個通用機制，key 並不與 v-for 特別關聯，key 還具有其他用途，我們將在後面的指南中看到其他用途，後續補充
（2.2.0+ 的版本里，當在元件中使用 v-for 時，key 現在是必須的。）
5.路由模式改為history後,除了首次啟動首頁沒報錯,重新整理訪問路由都報錯
必須給對應的服務端配置查詢的主頁面..也可以認為是主路由入口的引導。。。Vue-Router官方文件連結
（https://router.vuejs.org/zh-cn/essentials/history-mode.html）包括動態路由匹配、向路由元件傳遞props等基礎知識
6.Uncaught ReferenceError: xxx is not define
例項內的 data 對應的變數沒有宣告
你匯入模組報這個錯誤,那絕逼是匯出沒寫
7.Error in render function:"Type Error: Cannot read property 'xxx' of undefined"
這種問題大多都是初始化的姿勢不對;
比如引入echart這些...仔細去了解下生命週期,再來具體初始化;
vue 元件有時候也會(巢狀元件或者 props傳遞初始化)..也是基本這個問題
8.Failed to mount component: template or render function not defined
元件掛載失敗,問題只有這麼幾個
元件沒有正確引入; 掛載點順序錯了了;
自行動手排查
9.[Vue warn]: Error in render function: "TypeError: Cannot read property '0' of undefined"
想將seller傳遞給子元件使用，但是我們ajax獲取資料是非同步過程，也就是說一開始在初始化seller時是空物件，所以把此時的seller傳給header就是undefined
使用v-if可以解決報錯問題，和created為空問題
【詳解vue2父元件傳遞props非同步資料到子元件的問題】【http://www.jb51.net/article/117447.htm】
10.vue-cli 新建專案 缺少dev-server.js和dev-client.js , 怎麼模擬資料
在使用vue開發過程中，難免需要去本地資料地址進行請求，而原版配置在dev-server.js中，新版vue-webpack-template已經刪除dev-server.js，改用webpack.dev.conf.js代替，所以 配置本地訪問在webpack.dev.conf.js裡配置即可。
//首先 const express = require('express') const app = express() var appData = require('../data.json') var seller = appData.seller var goods = appData.goods var ratings = appData.ratings var apiRoutes = express.Router() app.use('/api', apiRoutes) //找到devServer,新增 before(app) { app.get('/api/seller', (req, res) => { res.json({ // 這裡是你的json內容 errno: 0, data: seller }) }), app.get('/api/goods', (req, res) => { res.json({ // 這裡是你的json內容 errno: 0, data: goods }) }), app.get('/api/ratings', (req, res) => { res.json({ // 這裡是你的json內容 errno: 0, data: ratings }) }) }
11.[WDS] Errors while compiling. Reload prevented.
有一種錯誤的原因是import的路徑不對
import header from '@views/header/header.vue'
12.應當避免在模板或計算屬性中使用 $refs
$refs 只在元件渲染完成後才填充，並且它是非響應式的。它僅僅是一個直接操作子元件的應急方案——應當避免在模板或計算屬性中使用 $refs