按教程中的写法（如下），item.checked 属性设置后，页面上class没有刷新，从console log里面看每次click事件后checked属性是会更新的，但是页面效果并没有刷新。知道下一次有data中的数据更新的话，这里绑定checked属性的class也会更新。

selectedProduct: function(item){
      if(typeof item == 'undefined'){
        Vue.set(item, 'checked', true);
        // this.$set(item, "checked", true);
      }
      else {
        item.checked = !item.checked;
      }
    },

然后google了一下，貌似reference不对导致，修改了以后效果正常了。修改后不传入item，而是传入item的index，通过index索引到对应的product，再设置并修改checked属性。

selectedProduct: function(index){
      if(typeof vm.productList[index].checked == 'undefined'){
        Vue.set(this.productList[index], 'checked', true);
      }
      else {
        this.productList[index].checked = !this.productList[index].checked;
      }
    }

虽然改对了，但是原理不太清楚，希望老师来解答一下。