watch
场景：组件创建的时候我们获取一次列表，同时监听input框，每当发生变化的时候重新获取一次筛选后的列表。
之前：
created(){
this.fetchPosition()
},
watch:{
searchInputValue(){
this.fetchPosition()
}
}
现在： 步骤1：在watch中，可以直接使用函数的字面量名称
步骤2：immediate:true表示创建组件时立马执行一次
watch:{
searchInputValue:{
handler: 'fetchPosition',
immediate: true
}
}
******************************************华丽分割线******************************************
router key
场景：需求是从/post-page/a，跳转到/post-page/b。然后我们惊人的发现，页面跳转后数据竟然没更新？原因是vue-router发现这是同一个组件，然后它就决定要复用这个组件。
之前：监听$route的变化来初始化数据
data(){
return {
loading: false,
}
},
watch:{
'$route':{
handler: 'resetData',
immediate: true
}
},
methods:{
resetData(){
this.loading = false,
this.getPost(this.$route.params.id)
},
getPost(id){
}
}
现在：
给router-view添加一个unique的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件
<router-view :key='$router.fullpath'></router-view>
