VUE学习之路（二）---全局API之Vue.set全局操作

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

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

外部数据：不在Vue构造器里的data处声明，而是在构造器外部声明，然后在data处引用就可以了。

好处：让程序更加灵活，可以在外部获取任何想要的数据形式，然后让data引用。

//构造器外部声明数据
var outData = {
     count : 1,
     goodName : 'car'
};

var app = new Vue({
      el : "#app",
      //引用外部数据
      data : outData
});

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue.directive 自定义指令</title>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js" ></script>
</head>
<body>
    <h1>vue.directive 自定义指令</h1>
    <hr>
    <div id="app">
        {{ count }}
        <ul>
            <li v-for="item in arr">{{ item }}</li>
        </ul>
        <p><button onclick="add()">add</button></p>
    </div>

    

    <script>
        function add(){
            //第一种方法，用Vue.set改变外部数据
            // Vue.set(outData,'count',2);

            //第二种方法，用它的属性
            //app.count++;

            //第三种方法，用原生的方法
            outData.count++;
            
        
        
        }

        var outData = {
             count : 1,
            // goods : 'car'
            arr : ['aaa','bbb','ccc']
        }
       var app = new Vue({
           el : "#app",
           data :outData, //引用外部数据
       })
    </script>
</body>
</html>

1.用Vue.set改变

****有第二、三种方法，为什么还要使用第一种呢？

当我们操作数组时，在用数组下标的时候改变值，Vue不会自动更新。这是JS的一种限制。为了突破限制，Vue提出了Vue.set这种方法

实例解释如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue.directive 自定义指令</title>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js" ></script>
</head>
<body>
    <h1>vue.directive 自定义指令</h1>
    <hr>
    <div id="app">
        {{ count }}
        <ul>
            <li v-for="item in arr">{{ item }}</li>
        </ul>
        <p><button onclick="add()">add</button></p>
    </div>

    

    <script>
        function add(){
      

            app.arr[1]='ddd';
            
        
        
        }

        var outData = {
             count : 1,
            // goods : 'car'
            arr : ['aaa','bbb','ccc']
        }
       var app = new Vue({
           el : "#app",
           data :outData, //引用外部数据
       })
    </script>
</body>
</html>

在上面这种情况下，数组第二个元素bbb不会发生改变变成ddd。

如果加一个语句使dom重新渲染，则bbb会变成ddd。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue.directive 自定义指令</title>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js" ></script>
</head>
<body>
    <h1>vue.directive 自定义指令</h1>
    <hr>
    <div id="app">
        {{ count }}
        <ul>
            <li v-for="item in arr">{{ item }}</li>
        </ul>
        <p><button onclick="add()">add</button></p>
    </div>

    

    <script>
        function add(){
            
            outData.count++;

            app.arr[1]='ddd';
            
        
        
        }

        var outData = {
             count : 1,
            // goods : 'car'
            arr : ['aaa','bbb','ccc']
        }
       var app = new Vue({
           el : "#app",
           data :outData, //引用外部数据
       })
    </script>
</body>
</html>

总结：Vue.set存在的意义：在虚拟DOM的值里面用下标的方式只改变数组的值的时候，Vue是监测不到的.

所以vue提供了Vue.set方法，能够在我们在外部监测到，即Vue的意义。

VUE学习之路（二）---全局API之Vue.set全局操作

猜你喜欢