vue开发填坑

1. 如何监听url中参数的变化？

正常情况下，url里的参数变化之后，页面是不会更新的。因为vue视为url没有变化，也没有触发任何生命周期的钩子函数。
解决方案：通过监听$route的变化来实现

watch: {
    "$route": {
      handler: function(val, oldVal) {
        // do sth.
      }
    }
}

2. 在vue中监听DOM事件

不要使用DOM0级事件的形式，因为0级事件会互相覆盖

// 不推荐的写法
element.onclick = function() {
    // do sth.
};

使用DOM2级事件则无问题

element.onEventListener("click", function() {
    // do sth.
});

3. 兼容linux / windows系统的启动命令

当使用同一webpack配置打包两个项目时，启动命令需要添加一个环境变量的参数，用以区分两个项目的不同路径不同入口文件等，但是linux环境与windows环境下，给命令添加环境变量参数的写法有所不同，如下：

// 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与&&之间不能有空格，否则环境变量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的一些小知识点

• 模板表达式中只能访问一个全局变量的白名单，比如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 只会阻止元素上的点击
• 动态组件可以使用 keep-alive，保留在内存

<keep-alive>
  <component :is="currentView">
    <!-- 非活动组件将被缓存！ -->
  </component>
</keep-alive>

• 一个具有 name 属性的组件可以递归调用自身

name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

• 使用 v-once，让静态资源模板只渲染一次

5. vue/react路由为history模式的nginx配置

location / {
  root /path/to/the/dist;
  try_files $uri $uri/ /index.html;
}