1. 如何監(jiān)聽url中參數(shù)的變化？
正常情況下传趾，url里的參數(shù)變化之后识啦，頁面是不會更新的负蚊。因為vue視為url沒有變化神妹，也沒有觸發(fā)任何生命周期的鉤子函數(shù)颓哮。
解決方案：通過監(jiān)聽$route的變化來實現(xiàn)
watch: {
"$route": {
handler: function(val, oldVal) {
// do sth.
}
}
}
2. 在vue中監(jiān)聽DOM事件
不要使用DOM0級事件的形式，因為0級事件會互相覆蓋
// 不推薦的寫法
element.onclick = function() {
// do sth.
};
使用DOM2級事件則無問題
element.onEventListener("click", function() {
// do sth.
});
3. 兼容linux / windows系統(tǒng)的啟動命令
當(dāng)使用同一webpack配置打包兩個項目時鸵荠，啟動命令需要添加一個環(huán)境變量的參數(shù)冕茅，用以區(qū)分兩個項目的不同路徑不同入口文件等，但是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+空格庸疾。
我是自我反省的分割線乍楚，上面說的很對，但是也很蠢届慈，其實更好的方式是使用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的一些小知識點
- 模板表達(dá)式中只能訪問一個全局變量的白名單徒溪，比如Math、Date等
- 條件渲染 (v-if) 在切換時并不會完全重新渲染 DOM金顿，比如兩個 input
切換則輸入值會被保留臊泌，可以為切換的元素添加不同的key來強制重新渲染 - v-show 無法使用 template 包裝元素
- v-for 可以遍歷對象，(value, key, index) in obj揍拆，分別代表值渠概、鍵、索引
- v-on 的修飾符是有順序的嫂拴，@click.prevent.self 會阻止所有的點擊播揪，而 @click.self.prevent 只會阻止元素上的點擊
- 動態(tài)組件可以使用 keep-alive，保留在內(nèi)存
<keep-alive>
<component :is="currentView">
<!-- 非活動組件將被緩存筒狠！ -->
</component>
</keep-alive>
- 一個具有 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;
}
