1. props單向綁定
vue中的props是單向綁定的，父組件的屬性變化時會傳遞給子組件，子組件內部不應改變props的值，否則控制台會給出警告。
但如果props的類型為數組或者對象時，在子組件內部改變props的值控制台不會警告。因為數組或對象是地址引用，vue不會檢測到props發生改變。所以有的情況需要在子組件內部改變父組件的值，可以將屬性定義為數組或者對象類型傳入。
但官方不建議在子組件內改變父組件的值，因為這違反了vue中props單向綁定的思想。
2. 給對象賦值
由1可以引申出，地址引用類型的數據，例如對象obj ={a:1},如果想要修改obj中的a屬性，通過obj.a = 2這樣賦值，頁面不會更新，需使用vue.set方法更改才會起作用， Vue.set(this,obj,a,2);
同樣，如果要給obj增加一個新屬性，如果該屬性未在data中聲明，頁面也不會刷新。也就是vue文檔中聲明的“Vue 不能檢測到對象屬性的添加或刪除”，同樣需要使用vue.set方法進行賦值才好使。
3. 深拷貝數組或對象
對象或數組的簡單賦值，修改新值也會改變原值。這時我們需要獲取原值的深拷貝對象。
對於對象，可以通過newObj = JSON.parse(JSON.stringfy(obj))實現。
對於數組，可以通過 newArr = […arr]或者newArr = arr.slice(0)來實現。
4. 給組件增加獨有樣式
vue中每一個組件都可以自定各自的css樣式，如果希望組件內的樣式只對當前組件起作用，可以在style標簽中增加scoped即可。
該寫法會讓vue在渲染組件的時候給每個元素都增加一個data-v-/版本號/的屬性，可以保證只針對有同樣data-v-data-v-/版本號/的元素應用該樣式。
5. v-for循環key屬性
vue中的v-for循環最好加上key屬性，否則在高版本(2.2.0+)的vue中控制台會報錯。
key屬性需要唯一，理想的 key 值是每項都有唯一 id，全局不需唯一，但在一個循環中需要唯一。
6. 引用圖片
圖片引用問題。直接把本地圖片地址放在src里沒問題。但如果把地址提取出來寫在data里或者通過method動態給src賦值則引用不到。
因為放在template模板里會被webpack打包所以可以，而放在data或者動態賦值，圖片路徑只是一個字符串webpack不會處理所以引用不到。
解決辦法：通過import或者required引入。import src from ‘../../img.png’或者data:{img:require(‘../../img.png’)}
7. 父組件傳值
在子組件使用父組件傳入的值時，最好復制出一份props的值，通過data或者computed進行賦值。data賦值與computed賦值的區別：data賦值：data:{return {aaa: this.aaa}如果是在data中進行賦值，當父組件的aaa值發生改變時，不會在重新賦給子組件中的aaa。computed賦值：如果想讓子組件跟着父組件修改，需要將賦值操作寫在computed中。computed:{aaa(){return this.aaa}
8. 對象數組深度監聽
后端傳過來的數組是一個數組對象，頁面中綁定對象中某一具體的屬性，當該值變化時調用某個函數，自然想到就是watch方法。但如何watch數組對象中某一個具體的屬性，顯然不可能一個個屬性寫watch。
解決辦法：
1.watch整個對象，設置deep為true，當該對象發生改變時，調用處理函數。
2.將頁面中綁定的屬性寫在computed函數中，watch這個computed中的函數，當對象值改變時會進入computed函數中，進而進入watch函數中，再調用處理函數。
9. 動態增加class
給元素動態增加class時，可以在模板中通過:class={‘hasClass’: ifHasClass}來實現，當ifHasClass為true時，該元素會自動加上hasClass的樣式。
動態綁定的class可以與正常寫的一起使用<a class=‘aaa’ :class={‘bbb’:isBbb}></a>，但如果在一個元素中使用了兩個class則會報錯<a class="aaa" class="bbb"></a>。
10. 組件中使用定時器及銷毀問題
如果我們在頁面A中使用了一個定時器，當從頁面A跳轉到頁面B時，如果不手動清除這個定時器，那么它仍舊會執行，這不是我們所期望的。
通常能想到的常規解決辦法就是，在data屬性中定義一個timer，在代碼中啟動定時器，然后在組件銷毀的時候清除定時器。具體代碼如下：
data(){ return{ timer:null } }, methods:{ onStartTimer(){ this.timer = setInterval( () => { // 執行一些操作 }, 1000) } }, beforeDestroy() { clearInterval(this.timer); this.timer = null; }但是這里有兩個潛在的問題：
- 它需要在這個組件實例中保存這個
timer，如果可以的話最好只有生命周期鈎子可以訪問到它。這並不算嚴重的問題，但是它可以被視為雜物。 - 我們的建立代碼獨立於我們的清理代碼，這使得我們比較難於程序化地清理我們建立的所有東西。
Vue官方文檔給出的解決方案是，在定義timer的時候使用$once指令監聽beforeDestroy這個鈎子函數。具體代碼為：
methods:{
onStartTimer(){
const timer = setInterval( () => { // 執行一些操作 }, 1000) this.$once('hook:beforeDestroy', () => { clearInterval(timer); }) } },這樣就解決了上面所列的兩個問題。類似的這種在離開頁面時需要銷毀的組件都可以采用此方法。
11. 本地開發跨域問題
在本地開發請求后端服務器接口的時候，都不可避免的會遇到跨域的問題。解決方法可以通過加一個node中間層或者nginx做反向代理。但是如果是用vue-cli搭建的項目，vue-cli在config中自帶了一個proxyTable屬性，可以配置這個屬性解決跨域的問題。
// config/index.js module.exports = { // ... dev: { proxyTable: { '/api': { // 遇到/api的接口都會走此代理,因此在調用接口時，需要在url中增加/api標識 target: 'http://jsonplaceholder.typicode.com', // 真實的地址 changeOrigin: true, // 是否啟用跨域 pathRewrite: { '^/api': '' // 將接口中的/api替換成'' } } } } }以上代碼會將 /api/posts/1請求代理到 http://jsonplaceholder.typicode.com/posts/1。
如果不想在每一個接口中都手動增加/api標識，可以更改axios的默認配置axios.defaults.baseURL = '/api'，這樣，axios會自動幫我們在url上加上/api的前綴。
需要特別注意的是，更改完配置后需要重啟server才會生效。