vue.set全局操作 · web前端

[TOC] # 作用 Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。 # 引用构造器外部数据：什么是外部数据，就是不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用就可以了。外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。看一个简单的代码 ~~~ //在构造器外部声明数据 var outData={ count:1, goodName:'car' }; var app=new Vue({ el:'#app', //引用外部数据 data:outData }) ~~~ # 在外部改变数据的三种方法 ## 用vue.set改变 ~~~ <body> <div id="app"> {{count}} </div> <button onclick="add()">add</button> </body> <script type="text/javascript"> function add() { //第一个是变量,第二个是变量中的值,第三个是要变成的值 Vue.set(outData, 'count', 20); } var outData = { count: 1, goodName: 'car' }; var app = new Vue({ el: '#app', data: outData, }) </script> ~~~ ## 用vue对象的方法添加 ~~~ app.count++; ~~~ ## 直接操作外部数据 ~~~ outData.count++; ~~~ 其实这三种方式都可以操作外部的数据，Vue也给我们增加了一种操作外部数据的方法 # 为什么要有Vue.set的存在? 由于Javascript的限制，Vue不能自动检测以下变动的数组。 * 当你利用索引直接设置一个项时，vue不会为我们自动更新。 * 当你修改数组的长度时，vue不会为我们自动更新我们来看个代码 ~~~ <div id="app"> <ul> <li v-for=" aa in arr">{{aa}}</li> </ul> </div> <button onclick="add()">外部添加</button> <script type="text/javascript"> function add(){ console.log("我已经执行了"); app.arr[1]='ddd'; //Vue.set(app.arr,1,'ddd'); } var outData={ arr:['aaa','bbb','ccc'] }; var app=new Vue({ el:'#app', data:outData }) </script> ~~~ 这个是没用的,需要这样 ~~~ function add() { console.log("我已经执行了"); Vue.set(app.arr, 1, 'dd'); }; ~~~ 这时我们的界面是不会自动跟新数组的，我们需要用Vue.set(app.arr,1,’ddd’)来设置改变，vue才会给我们自动更新，这就是Vue.set存在的意义