摘要：組件中使用定時器及銷毀問題如果我們在頁面中使用了一個定時器，當從頁面跳轉到頁面時，如果不手動清除這個定時器，那么它仍舊會執行，這不是我們所期望的。

公司年初開始從jquery轉型到vue開發，思想上從jquery的操作DOM到vue的操作數據，剛開始還不太習慣，但用了一段時間發現確實比較方便。在剛開始用vue的時候，也踩了一些坑，現在分享出來，供剛入門上手開發vue的朋友參考，都是一些剛接觸vue開發遇到的比較常見的問題，vue老手可越過。

vue中的props是單向綁定的，父組件的屬性變化時會傳遞給子組件，子組件內部不應改變props的值，否則控制臺會給出警告。
但如果props的類型為數組或者對象時，在子組件內部改變props的值控制臺不會警告。因為數組或對象是地址引用，vue不會檢測到props發生改變。所以有的情況需要在子組件內部改變父組件的值，可以將屬性定義為數組或者對象類型傳入。
但官方不建議在子組件內改變父組件的值，因為這違反了vue中props單向綁定的思想。

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

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

vue中每一個組件都可以自定各自的css樣式，如果希望組件內的樣式只對當前組件起作用，可以在style標簽中增加scoped即可。
該寫法會讓vue在渲染組件的時候給每個元素都增加一個data-v-/版本號/的屬性，可以保證只針對有同樣data-v-data-v-/版本號/的元素應用該樣式。

vue中的v-for循環最好加上key屬性，否則在高版本(2.2.0+)的vue中控制臺會報錯。
key屬性需要唯一，理想的 key 值是每項都有唯一 id，全局不需唯一，但在一個循環中需要唯一。

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

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

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

給元素動態增加class時，可以在模板中通過:class={‘hasClass’: ifHasClass}來實現，當ifHasClass為true時，該元素會自動加上hasClass的樣式。
動態綁定的class可以與正常寫的一起使用，但如果在一個元素中使用了兩個class則會報錯。

如果我們在頁面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);                                    
            })
        }
    },

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

在本地開發請求后端服務器接口的時候，都不可避免的會遇到跨域的問題。解決方法可以通過加一個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才會生效。