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

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

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

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

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

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

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

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

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

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

它需要在這個(gè)組件實(shí)例中保存這個(gè)timer，如果可以的話(huà)最好只有生命周期鉤子可以訪(fǎng)問(wèn)到它。這并不算嚴(yán)重的問(wèn)題，但是它可以被視為雜物。

我們的建立代碼獨(dú)立于我們的清理代碼，這使得我們比較難于程序化地清理我們建立的所有東西。

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

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

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

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

// 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請(qǐng)求代理到 http://jsonplaceholder.typicode.com/posts/1。