Vue.set全局操作

来源：互联网发布：有哪些编程软件编辑：程序博客网时间：2024/05/21 07:49

Vue.set全局操作

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

一、引用构造器外部数据：

什么是外部数据，就是不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用就可以了。外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。
如下代码：

//在构造器外部声明数据var outData = {        count:1,        goods:'car'    };    var app = new Vue({        el: '#app',        data: outData    })

二、在外部改变数据的三种方法：

1.用Vue.set改变

function add(){    Vue.set(outData,'count',4);   }

2.用Vue对象的方法添加

app.count++;

3.直接操作外部数据

outData.count++;

其实这三种方式都可以操作外部的数据，Vue也给我们增加了一种操作外部数据的方法。

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

由于JavaScript的限制，Vue不能自动检测以下变动的数组。
当你利用索引直接设置一个项时，vue不会为我们自动更新。

当你修改数组的长度时，vue不会为我们自动更新。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">    <title>Vue.set全局操作</title></head><body><h1>Vue.set全局操作</h1><hr><div id="app">    {{count}}    <ul>        <li v-for="item in arr">{{item}}</li>    </ul></div><p><button onclick="add()">add</button></p></body><script src="../dist/vue.js"></script><script>    function add() {        //Vue.set(outData,'count',2);        //app.count++;        //outData.count++;        //app.arr[1] = 'ddd';        Vue.set(app.arr,1,'dd');    }    var outData = {        count:1,     // goods:'car'        arr:['aaa','bbb','ccc']    };    var app = new Vue({        el: '#app',        data: outData    })</script></html>

这时我们的界面是不会自动跟新数组的，我们需要用Vue.set(app.arr,1,’dd’)来设置改变，vue才会给我们自动更新，这就是Vue.set存在的意义。

阅读全文

0 0