公司年初開始從jquery轉(zhuǎn)型到vue開發(fā)，思想上從jquery的操作DOM到vue的操作數(shù)據(jù)，剛開始還不太習(xí)慣，但用了一段時(shí)間發(fā)現(xiàn)確實(shí)比較方便。在剛開始用vue的時(shí)候，也踩了一些坑，現(xiàn)在分享出來，供大家參考。

1. props單向綁定

vue中的props是單向綁定的，父組件的屬性變化時(shí)會(huì)傳遞給子組件，子組件內(nèi)部不應(yīng)改變props的值，否則控制臺(tái)會(huì)給出警告。
但如果props的類型為數(shù)組或者對象時(shí)，在子組件內(nèi)部改變props的值控制臺(tái)不會(huì)警告。因?yàn)閿?shù)組或?qū)ο笫堑刂芬茫瑅ue不會(huì)檢測到props發(fā)生改變。所以有的情況需要在子組件內(nèi)部改變父組件的值，可以將屬性定義為數(shù)組或者對象類型傳入。
但官方不建議在子組件內(nèi)改變父組件的值，因?yàn)檫@違反了vue中props單向綁定的思想。

2. 給對象賦值

由1可以引申出，地址引用類型的數(shù)據(jù)，例如對象obj ={a:1},如果想要修改obj中的a屬性，通過obj.a = 2這樣賦值，頁面不會(huì)更新，需使用vue.set方法更改才會(huì)起作用， Vue.set(this,obj,a,2);
同樣，如果要給obj增加一個(gè)新屬性，如果該屬性未在data中聲明，頁面也不會(huì)刷新。也就是vue文檔中聲明的“Vue 不能檢測到對象屬性的添加或刪除”，同樣需要使用vue.set方法進(jìn)行賦值才好使。

3. 深拷貝數(shù)組或?qū)ο?/h4>

對象或數(shù)組的簡單賦值，修改新值也會(huì)改變原值。這時(shí)我們需要獲取原值的深拷貝對象。
對于對象，可以通過newObj = JSON.parse(JSON.stringfy(obj))實(shí)現(xiàn)。
對于數(shù)組，可以通過 newArr = […arr]或者newArr = arr.slice(0)來實(shí)現(xiàn)。

4. 給組件增加獨(dú)有樣式

vue中每一個(gè)組件都可以自定各自的css樣式，如果希望組件內(nèi)的樣式只對當(dāng)前組件起作用，可以在style標(biāo)簽中增加scoped即可。
該寫法會(huì)讓vue在渲染組件的時(shí)候給每個(gè)元素都增加一個(gè)data-v-/版本號/的屬性，可以保證只針對有同樣data-v-data-v-/版本號/的元素應(yīng)用該樣式。

5. v-for循環(huán)key屬性

vue中的v-for循環(huán)最好加上key屬性，否則在高版本(2.2.0+)的vue中控制臺(tái)會(huì)報(bào)錯(cuò)。
key屬性需要唯一，理想的 key 值是每項(xiàng)都有唯一 id，全局不需唯一，但在一個(gè)循環(huán)中需要唯一。

6. 引用圖片

圖片引用問題。直接把本地圖片地址放在src里沒問題。但如果把地址提取出來寫在data里或者通過method動(dòng)態(tài)給src賦值則引用不到。
因?yàn)榉旁趖emplate模板里會(huì)被webpack打包所以可以，而放在data或者動(dòng)態(tài)賦值，圖片路徑只是一個(gè)字符串webpack不會(huì)處理所以引用不到。
解決辦法：通過import或者required引入。import src from ‘../../img.png’或者data:{img:require(‘../../img.png’)}

7. 父組件傳值

在子組件使用父組件傳入的值時(shí)，最好復(fù)制出一份props的值，通過data或者computed進(jìn)行賦值。
data賦值與computed賦值的區(qū)別：
data賦值：data:{return {aaa: this.aaa}如果是在data中進(jìn)行賦值，當(dāng)父組件的aaa值發(fā)生改變時(shí)，不會(huì)在重新賦給子組件中的aaa。
computed賦值：如果想讓子組件跟著父組件修改，需要將賦值操作寫在computed中。computed:{aaa(){return this.aaa}

8. 對象數(shù)組深度監(jiān)聽

后端傳過來的數(shù)組是一個(gè)數(shù)組對象，頁面中綁定對象中某一具體的屬性，當(dāng)該值變化時(shí)調(diào)用某個(gè)函數(shù)，自然想到就是watch方法。但如何watch數(shù)組對象中某一個(gè)具體的屬性，顯然不可能一個(gè)個(gè)屬性寫watch。
解決辦法：
1.watch整個(gè)對象，設(shè)置deep為true，當(dāng)該對象發(fā)生改變時(shí)，調(diào)用處理函數(shù)。
2.將頁面中綁定的屬性寫在computed函數(shù)中，watch這個(gè)computed中的函數(shù)，當(dāng)對象值改變時(shí)會(huì)進(jìn)入computed函數(shù)中，進(jìn)而進(jìn)入watch函數(shù)中，再調(diào)用處理函數(shù)。

9. 動(dòng)態(tài)增加class

給元素動(dòng)態(tài)增加class時(shí)，可以在模板中通過:class={‘hasClass’: ifHasClass}來實(shí)現(xiàn)，當(dāng)ifHasClass為true時(shí)，該元素會(huì)自動(dòng)加上hasClass的樣式。
動(dòng)態(tài)綁定的class可以與正常寫的一起使用<a class=‘a(chǎn)aa’ :class={‘bbb’:isBbb}></a>，但如果在一個(gè)元素中使用了兩個(gè)class則會(huì)報(bào)錯(cuò)<a class="aaa" class="bbb"></a>。

10. 組件中使用定時(shí)器及銷毀問題

如果我們在頁面A中使用了一個(gè)定時(shí)器，當(dāng)從頁面A跳轉(zhuǎn)到頁面B時(shí)，如果不手動(dòng)清除這個(gè)定時(shí)器，那么它仍舊會(huì)執(zhí)行，這不是我們所期望的。
通常能想到的常規(guī)解決辦法就是，在data屬性中定義一個(gè)timer，在代碼中啟動(dòng)定時(shí)器，然后在組件銷毀的時(shí)候清除定時(shí)器。具體代碼如下：

    data(){
        return{
            timer:null
        }
    },
    methods:{
        onStartTimer(){
            this.timer = setInterval( () => {
                // 執(zhí)行一些操作
            }, 1000)
        }
    },
    beforeDestroy() {
        clearInterval(this.timer);        
        this.timer = null;
    }

但是這里有兩個(gè)潛在的問題：

1. 它需要在這個(gè)組件實(shí)例中保存這個(gè)timer，如果可以的話最好只有生命周期鉤子可以訪問到它。這并不算嚴(yán)重的問題，但是它可以被視為雜物。
2. 我們的建立代碼獨(dú)立于我們的清理代碼，這使得我們比較難于程序化地清理我們建立的所有東西。

Vue官方文檔給出的解決方案是，在定義timer的時(shí)候使用$once指令監(jiān)聽beforeDestroy這個(gè)鉤子函數(shù)。具體代碼為：

    methods:{
        onStartTimer(){
            const timer = setInterval( () => {
                // 執(zhí)行一些操作
            }, 1000)
            this.$once('hook:beforeDestroy', () => {            
                clearInterval(timer);                                    
            })
        }
    },

這樣就解決了上面所列的兩個(gè)問題。類似的這種在離開頁面時(shí)需要銷毀的組件都可以采用此方法。

11. 本地開發(fā)跨域問題

在本地開發(fā)請求后端服務(wù)器接口的時(shí)候，都不可避免的會(huì)遇到跨域的問題。解決方法可以通過加一個(gè)node中間層或者nginx做反向代理。但是如果是用vue-cli搭建的項(xiàng)目，vue-cli在config中自帶了一個(gè)proxyTable屬性，可以配置這個(gè)屬性解決跨域的問題。

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      '/api': { // 遇到/api的接口都會(huì)走此代理,因此在調(diào)用接口時(shí)，需要在url中增加/api標(biāo)識(shí)
        target: 'http://jsonplaceholder.typicode.com', // 真實(shí)的地址
        changeOrigin: true, // 是否啟用跨域
        pathRewrite: {
          '^/api': '' // 將接口中的/api替換成''
        }
      }
    }
  }
}

以上代碼會(huì)將 /api/posts/1請求代理到 http://jsonplaceholder.typicode.com/posts/1。

如果不想在每一個(gè)接口中都手動(dòng)增加/api標(biāo)識(shí)，可以更改axios的默認(rèn)配置axios.defaults.baseURL = '/api'，這樣，axios會(huì)自動(dòng)幫我們在url上加上/api的前綴。

需要特別注意的是，更改完配置后需要重啟server才會(huì)生效。