1. 如何監(jiān)聽url中參數(shù)的變化？
正常情況下，url里的參數(shù)變化之后，頁面是不會更新的。因?yàn)関ue視為url沒有變化，也沒有觸發(fā)任何生命周期的鉤子函數(shù)。
解決方案：通過監(jiān)聽$route的變化來實(shí)現(xiàn)
watch: {
"$route": {
handler: function(val, oldVal) {
// do sth.
}
}
}
2. 在vue中監(jiān)聽DOM事件
不要使用DOM0級事件的形式，因?yàn)?級事件會互相覆蓋
// 不推薦的寫法
element.onclick = function() {
// do sth.
};
使用DOM2級事件則無問題
element.onEventListener("click", function() {
// do sth.
});
3. 兼容linux / windows系統(tǒng)的啟動命令
當(dāng)使用同一webpack配置打包兩個(gè)項(xiàng)目時(shí)，啟動命令需要添加一個(gè)環(huán)境變量的參數(shù)，用以區(qū)分兩個(gè)項(xiàng)目的不同路徑不同入口文件等，但是linux環(huán)境與windows環(huán)境下，給命令添加環(huán)境變量參數(shù)的寫法有所不同，如下：
// linux
"dev": "PROJECT=user webpack-dev-server --config webpack.dev.config.js --port 8080",
// windows
"dev": "set PROJECT=user&&webpack-dev-server --config webpack.dev.config.js --port 8080"
注意：user與&&之間不能有空格，否則環(huán)境變量PROJECT會變成
user+空格。
我是自我反省的分割線，上面說的很對，但是也很蠢，其實(shí)更好的方式是使用cross-env
// 安裝cross-env
npm install cross-env --save-dev
// 使用cross-env
"dev": "cross-env PROJECT=user webpack-dev-server --config webpack.dev.config.js --port 8080"
4. vue的一些小知識點(diǎn)
- 模板表達(dá)式中只能訪問一個(gè)全局變量的白名單，比如Math、Date等
- 條件渲染 (v-if) 在切換時(shí)并不會完全重新渲染 DOM，比如兩個(gè) input
切換則輸入值會被保留，可以為切換的元素添加不同的key來強(qiáng)制重新渲染 - v-show 無法使用 template 包裝元素
- v-for 可以遍歷對象，(value, key, index) in obj，分別代表值、鍵、索引
- v-on 的修飾符是有順序的，@click.prevent.self 會阻止所有的點(diǎn)擊，而 @click.self.prevent 只會阻止元素上的點(diǎn)擊
- 動態(tài)組件可以使用 keep-alive，保留在內(nèi)存
<keep-alive>
<component :is="currentView">
<!-- 非活動組件將被緩存！ -->
</component>
</keep-alive>
- 一個(gè)具有 name 屬性的組件可以遞歸調(diào)用自身
name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'
- 使用 v-once，讓靜態(tài)資源模板只渲染一次
5. vue/react路由為history模式的nginx配置
location / {
root /path/to/the/dist;
try_files $uri $uri/ /index.html;
}
