vue.js学习笔记4--vue.set()方法

关键词：vue.set()方法触发视图更新。

当我们给vue页面添加一个实例是，再次给数据赋值，有时候不会自动更新到视图上。
这时，我们要用到vue.set()方法触发视图更新。

修改前：

<script>
    methods:{
        addCarts(event){
            if(!event._constructed){
                 return;
                }
            if(!this.food.count)//当food.count不存在时{
                this.food.count=1;//点击时，food.count输入1，但是视图上不会展现
            }else{
               this.food.count++;
            } 
      }
            }
</script>

修改后

<script>
    import Vue from 'vue';//传入vue的接口
    
    methods:{
         addCarts(event){
                    if(!event._constructed){
                      return;
                  }
                      if(!this.food.count){
                       Vue.set(this.food,'count',1);//当点击时，视图会及时更新1
                      }else{
                        this.food.count++;
                      }
                  },
             }
</script>