Vue代码优化

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>