Vue.set全局操作

Posted 2020-09-21 千と千寻の

Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。

// 构造器外部数据
     wrapData ={
        number:1
     }
       var vm = new Vue({
            el:"#app",
            data:wrapData,  //引入外部数据（非内部构造器里面的）
            methods:{
                add:function(){
                    this.number++;
                }
            }
       })

在外部改变数据的三种方法   *这些个button按钮都是写在外部不在new  vue（{}）作用域里面

1、用Vue.set改变
 function add(){
       Vue.set(outData,‘count‘,4);
 }
2、用Vue对象的方法添加
 function wrapAdd2(){
         vm.number++;
       }
3、直接操作外部数据
 function wrapAdd3(){
      wrapData.number++;
   }

为什么要有Vue.set的存在?

由于javascript的限制，Vue不能自动检测以下变动的数组。
*当你利用索引直接设置一个项时，vue不会为我们自动更新。
*当你修改数组的长度时，vue不会为我们自动更新。
上面不是说到了三种改变number值得方法吗，如果是改变数组，通过下标，那三种方式中只有Vue.set会起作用，这也就是它存在的意义

html

<div id="app">
        <!-- <span v-text="number"></span> -->
        <ul>
            <li v-for="item of items">{{item}}</li>
        </ul>
    </div>

js

function  wrapAdd(){
           // vm.items[0]=12; //外部调用vue属性方法不起作用
           // wrapData[0]=12; //外部直接操作数组也是不起作用
           // 这时候Vue.set在对数组方面就凸显出用处了
           Vue.set(vm.items,1,12)
      }
    var wrapData =[20,30,45]

       var vm = new Vue({
            el:"#app",
            data:{
                items:wrapData
            }  //引入外部数据（非内部构造器里面的）
       })