一周Vue小技巧

1.多路由页面用同一个vue组件

由于Vue内部的优化了你的应用程序 ，在切换页面会重用组件 ，而不是重新创建新组件 ，
因此在使用相同组件进行路由之间切换 则不会有任何改变

[{
path:'/a',
component:MyComponent
},{
 path:"/b",
 component:MyComponent
}
]

解决次问题 你需要在元素上添加:key属性 帮助路由器识别页面何时不同,在切换路由时更新你的内容

<router-view :key="$route.path">

2 $on(‘hook:’)帮助简化代码

删除事件侦听器是js一种常见的实践 ，因为它有助于避免内存泄漏并防止事件冲突，
在vue中添加/删除事件监听，一般在mounted 和beforeDestrory 的生命周期内

mounted(){
 window.addEventListener("resize",this.resizeHandler)
}
beforeDestroy(){
window.removeEventListener("resize",this.resizeHandler)
}

一般我们要单独声明这些钩子 这样做的问题 对于较大的组件 这些选项可能相隔数百行，查看Vue文档 可以看到有一个示例方法 $on用于侦听实例事件。Vue声明周期钩子会在触发时发出自定义事件 事件名称是hook，
hook + 本身的名称（hook:mounted）
因此可以简化挂载内部的添加和删除代码

mounted(){
  window.addEventListener("resize",this.resizeHandler)
  this.$on("hook:beforeDestroy",()=>{
	window.removeEventListener("resize",this.resizeHandler)
})
}

这样以为着我们不必定义两个生命周期 这样大大提高代码的可读性

3.$on 也可以监听子组件的生命周期hook

生命周期hook发出自定义事件，这一事实意味着父组件可以侦听子组件的声明周期hook
它将使用正常模式来侦听事件（@event）,并且可以像其他自定义事件一样处理

<child-com  @hook:mounted="someFunction"/>

4 使用immediate:true 在初始化时触发观察者

watch: {
    title: (newTitle, oldTitle) => {
      console.log("Title changed from " + oldTitle + " to " + newTitle)
    }
}

Vue Watchers 默认情况下观察者不会在初始化时运行， 这可能意味着某些数据未完全初始化，如果需要在观察者在实例初始化后立即运行

watch:{
 title:{
   immediate:true,
   handler(newTitle,oldTitle){
   console.log(newTitle + newTitle)
}
}
}

5、你应该总是验证你的props

验证props是Vue中的基本实践之一，限制prop的确切格式 类型
vue的prop验证示例：

props:{
  status:{
    type:String,
   required:true,
   validator:function(value){
   return ['a','b','c'].indexOf(value) !==-1
}
}
}

6.将所有props传递给子组件

将父组件中的props传递给子组件
当你的项目具有非常分层的结构，它很方便
这很简单 – 你只需要记住你的实例属性

<child-comp v-bind="$props"></chil-comp>