3-VUE -set

最新推荐文章于 2024-09-11 10:25:55 发布

mao_mao37

最新推荐文章于 2024-09-11 10:25:55 发布

阅读量909

点赞数

分类专栏： VUE.js

本文链接：https://blog.csdn.net/mao_mao37/article/details/88989734

版权

VUE.js 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

语法：Vue.set( target, key, value )

参数：
- {Object | Array} target
- {string | number} key
- {any} value
返回值：设置的值。
用法：

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

简单来说，vue.set的作用就是在构造器外部操作构造器内部的数据、属性和方法。

外部数据：不在vue构造器里的data出生命，而是在构造器外部声明的数据，然后再data处可以引用。

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

引入外部数据的例子：

<!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-set实例</title>
    <script type="text/javascript" src="../assets/js/vue.js" ></script>
</head>
<body>
    <h1>VUE-set 全局操作</h1>

    <div id='ele'>  
       <p v-text="count"></p>
        <ul>
            <li v-for="item in arr" v-text='item'></li>
        </ul>
    </div >
        <p>
            <button onclick="Add()">add</button>
        </p>
    <script>

        function Add(){
            //Vue.set(outData,'count',2);
            //app.count++;
            //outData.count++;
            ele.arr[1]='ddd';
            Vue.set(ele.arr,1,"arr");
        }

        //在构造器外部声明数据
        var outData={
            count:1,
            goods:"car",
            arr:['aaa','bbb','ccc'],
        }

        var ele=new Vue({
            el:'#ele',
            //引用外部数据
            data:outData
        })
        
    </script>

</body>
</html>

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

vue.set改变
用vue对象的方法添加
直接操作外部数据

<script>
        function Add(){
            Vue.set(outData,'count',2);//使用vue.set改变
            ele.count++;//使用vue对象改变
            outData.count++;//直接操作外部数据
       }

        var outData={
            count:1,
            goods:"car",
            arr:['aaa','bbb','ccc'],
        }

        var ele=new Vue({
            el:'#ele',
            data:outData
        })  
 </script>

引入vue.set的原因：

由于javascript的限制，vue不能自动检测以下变动的数组：

当你利用索引直接设置一个项时，vue不会为我们自动更新
当你修改数组的长度时，vue不会为我们自动更新

<body>
    <h1>VUE-set 全局操作</h1>

    <div id='ele'>  
       <p v-text="count"></p>
        <ul>
            <li v-for="item in arr" v-text='item'></li>
        </ul>
    </div >
        <p>
            <button onclick="Alert()">Alert</button>
        </p>
    <script>

        function Alert(){
            //ele.arr[1]='ddd';//该设置对于页面是没有刷新效果的
          Vue.set(ele.arr,1,"arr");
        }

        var outData={
            count:1,
            goods:"car",
            arr:['aaa','bbb','ccc'],
        }

        var ele=new Vue({
            el:'#ele',
            data:outData
        })
        
    </script>

</body>