vue.set操作

AppleSun 7月 25, 2018

Vue.set全局操作

在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；

当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新

1、通过Vue.set方法设置data属性

2、您还可以使用 vm.$set实例方法，这也是全局 Vue.set方法的别名

Vue.set( target, key, value )

参数：

1
2
3

{Object | Array} target
{string | number} key
{any} value

返回值: 设置的值。

用法：
设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。
一、引用构造器外部数据：

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

看一个简单的代码：
//在构造器外部声明数据

 var outData={
    count:1,
    goodName:'car'
};
var app=new Vue({
    el:'#app',
    //引用外部数据
    data:outData
})

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

1、用Vue.set改变

1
2
3

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

2、用Vue对象的方法添加

1	app.count++;

3、直接操作外部数据

1	outData.count++;

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

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

由于Javascript的限制，Vue不能自动检测以下变动的数组。

*当你利用索引直接设置一个项时，vue不会为我们自动更新。

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

看一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Vue.set 全局操作</title>
</head>
<body>
    <h1>Vue.set 全局操作</h1>
    <hr>
    <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>
</body>
</html>

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

转载自 https://www.kancloud.cn/bizzbee/vue/490311