Vue1.0迁移到Vue2.0+ 遇到的问题 -- shopcart.vue（四）

向下滚动过多的时候，页面会卡住

已找到原因，使用BScroll时组件没写好，太粗心了==

VUE的$dispatch 和 $broadcast 已经被弃用

我参考了这篇文章里面的解决方法。

报错：

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

解决方案：
这里的[Vue warn]是指不要用对象或是数组作为key，用string或value作为key。
这里很明显item是对象，:key相当于是索引的作用，提高循环性能，如果循环量较小，不写也可以的。

move-transition等组件无法使用

vue2.0中的 transition="move"已经改了一种写法。
<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。
transition其实只是在元素/组件的过渡的时候才会有效果，需要配合v-show 或者 v-if使用。
写法如下：

cartcontrol.vue页面
    <transition name="move">
      <div class="cart-decrease move-transition" v-show="food.count>0" @click.stop.prevent="decreaseCart" key="food.count">
        <span class="inner icon-remove_circle_outline" ></span>
      </div>
    </transition>
  其他需要过渡动画的页面
<transition-group name="move">
      <div
        class="cart-decrease"
        v-show="food.count>0"
        :key="move-transition"
        @click.stop.prevent="decreaseCart"
      >
        <span class="inner icon-remove_circle_outline"></span>
      </div>
    </transition-group>

注意事项：transition-group 标里的所有子元素都要有key值，不然过渡效果是显示不出来的，而且每个子元素标签的key值是不一样的，不能重复。