Vuejs中关于computed、methods、watch的区别

写在前面

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

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

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

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);
    }

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

    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();
    }

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

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

methods

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

computed

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

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

我的html

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

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

watch

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