十三、Vue.set全局操作

最新推荐文章于 2024-07-04 09:46:22 发布

大话JAVA的那些事

最新推荐文章于 2024-07-04 09:46:22 发布

阅读量316

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.set

本文链接：https://blog.youkuaiyun.com/newbie_907486852/article/details/83445302

Vue 专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了Vue.set在Vue.js中的作用与使用场景，包括如何在构造器外部操作内部数据，以及解决JavaScript对数组变动检测的局限性。通过实例演示了如何使用Vue.set更新数组元素，确保视图能够正确响应数据变化。

Vue.set全局操作

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

1、引用构造器外部数据

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

2、为什么要有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>