Vue.set全局操作

最新推荐文章于 2022-09-14 21:48:58 发布

活在当下_未来可期

最新推荐文章于 2022-09-14 21:48:58 发布

阅读量624

点赞数

分类专栏： web前端文章标签：数据 Vue-set 构造器

本文链接：https://blog.csdn.net/Paranoid99/article/details/78652589

版权

web前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
Vue.set全局操作

Vue.set全局操作Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。一、引用构造器外部数据：什么是外部数据，就是不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用就可以了。外部数据的加入让程序更加灵活，我们可
复制链接

扫一扫