写在前面

这几天在写一个vuejs项目遇到的问题：
    场景：一个电子产品的购物网站。在购买电脑的时候，选择不同的computer brand 会带参数跳转进入computers.vue组件。
（复用了computers.vue组件，所有电脑品牌展示页面都是一样的，只是数据不一样）1234

<router-link :to="{path:'computers',query: {brand: sort.ask}}">1

在computers.vue组件里我是这样接收数据的：12

created() {          var brand  = this.$route.query.brand;          this.$http.get('/api/computers/'+brand)
          .then((res) => {            this.computers = res.data;
          }, (error) => {            console.log(error);
          });          console.log(1111111);
    }12345678910

结果出事了，我点击不同的电脑品牌，页面数据不刷新！！
我不断的找博客，知乎。才发现：
    页面一直在computers.vue组件里，created方法只在第一次进入computers.vue组件时调用了，以后不再调用。
    而解决方法就是使用watch检测$route的变化12345

    methods : {
         getComputers(){            var brand  = this.$route.query.brand;            this.$http.get('/api/computers/'+brand)
            .then((res) => {              this.computers = res.data;
            }, (error) => {              console.log(error);
            });
         }
    },    watch:{        $route: {            handler: function (val, oldVal) {                this.getComputers();
            },            deep: true
        }
    },    created() {          this.getComputers();
    }12345678910111213141516171819202122

这样做，第一次进入computers.vue组件时，调用created()方法。根据不同的brand获取数据。
下一次进入computers.vue组件时，参数$route发生改变，调用watch，根据不同的brand获取数据。123

用watch就可以解决在一个组件内（组件不刷新）路由传参数据不刷新的问题。
ok，我们再看一下Vuejs中关于computed、methods、watch的区别

methods

必须要有一定的触发条件才能执行，如点击事件12

computed

有一个这样的场景：
    在我的电子购物网站里，我点击进入了某台电脑的购买页面。
    在这里，我要选择电脑的型号，套餐，延保等等，不同的型号，套餐，延保对应的权都不一样。最后的总价要经过计算这些权来获得，于是我的总价运用computed1234

    computed: {
        proPrice(){    //计算总价            return (this.proBuy.type * this.proBuy.place * this.proBuy.year)* 100;
        }
    }12345

我的html12

    <li>        <span>总价：</span>        <span>{{proPrice}}元</span>    </li>12345

一旦我改变了电脑的型号，套餐，延保的任一项，就会触发computed的proPrice()方法。12

watch

字面理解就是观察，监视。
一旦对应的键发生变化（例如$router），就会调用对应的值方法。123