写在前面

这几天在写一个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),就会调用对应的值方法。
Logo

前往低代码交流专区

更多推荐