vue提高技巧（常更新）

化繁为简的wathchers:

常见的需求是组件创建时我们要获取一次列表，同时监听data中的数据改变也要重新获取一个列表，

但是这么写又太冗余了。

created(){
    this.fetchPostList()
},
watch:{
    id(){
        this.fetchPostList()
    }
}

有什么方法可以简单一点？

首先，在watchers中，可以直接使用函数的字面量名称；其次，声明immediate:true， 表示创建的时候立马执行一次。

watch:{
    data:{
        hander:'fetchPostList',
        immediate:true
    }
}

组件复用常见的bug

首先，我们默认是使用Vue-router来实现路由的控制

假设我们写一个博客网站，需求是从/post/a转变到/post/b，然后我们惊人的发现，页面跳转后的数据居然没刷新，原因是vue-router智能的发现这是同一个组件，然后它就决定复用这个组件，所以在create中写的方法全部没执行，所以，数据没有刷新。通常的解决方案是监听 $route的变化来初始化数据。

但是，这种方式问题是解决了，但是处理方式不太优雅。我们希望这么写：

data(){
    return {
        lodding:true,
        erroe:false
    }
},
create(){
    this.getPost(this.$route.params.id)
},
methods:{
    getPost(postid)
}

那么要怎样才能达到这样的效果呢？答案是为rouer-view添加一个唯一的key ，这样vue-rouer就不会复用组件从而导致create函数中的方法不执行了。

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