首页 > 文章 > web前端 > 浅析Vue中的Vue.set和this.$set，看看使用场景！

浅析Vue中的Vue.set和this.$set，看看使用场景！

青灯夜游转载: 2022-03-04 16:41:123006浏览

本篇文章带大家聊聊Vue中的Vue.set和this.$set，介绍一下Vue.set和this.$set用法与使用场景，希望对大家有所帮助！

一、为什么有Vue.set

由于JavaScript的限制，Vue无法检测到data中数组和对象的变化，因此也不会触发视图更新。vuejs视频教程

二、解决方法

数组

1.使用Vue提供的变异方法

Vue对这些JS数组方法进行了封装，通过这些方法是可以检测到数组更新的。

2.将原数组整个替换

如下例中，是要实现vm.items[1] = 'excess'

<body>
<div id="app">
    <ul>
        <li v-for="(item, index) in items">
            {{ index }} : {{ item }}
        </li>
    </ul>
</div>

<script>
let vm = new Vue({
    el: &#39;#app&#39;,
    data: {
        items: [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
    },
    created() {
        this.items = [&#39;a&#39;, &#39;test&#39;, &#39;c&#39;]
    }
})
</script>
</body>

3.使用Vue.set（见后文）

对象

1.将原对象整个替换

如下例中，是要实现给object新增一个键值对{test: 'newthing'}

<body>
<div id="app">
    <ul>
        <li v-for="(value, name) in object">
            {{ name }} : {{ value }}
        </li>
    </ul>
</div>

<script>
let vm = new Vue({
    el: &#39;#app&#39;,
    data: {
        object: {
            title: &#39;How to do lists in Vue&#39;,
            author: &#39;Jane Doe&#39;,
            publishedAt: &#39;2016-04-10&#39;
        }
    },
    created() {
        this.object = {
            title: &#39;How to do lists in Vue&#39;,
            author: &#39;Jane Doe&#39;,
            publishedAt: &#39;2016-04-10&#39;,
            test: &#39;newthing&#39;
        }
    }
})
</script>
</body>

2.使用Vue.set（见后文）

三、Vue.set

对于数组

Vue不能检测以下数组的变动:

利用索引值直接设置一个数组项时，例如vm.list[0]=newValue
修改数组长度时，例如vm.list.length=newLength

举个栗子

var vm = new Vue({
  data: {
    items: [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
  }
})
vm.items[1] = &#39;x&#39; // 不是响应性的
vm.items.length = 2 // 不是响应性的

这时可以使用Vue.set或者this.$set

使用方法

Vue.set(target,index,newValue)

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// this.$set
vm.$set(vm.items, indexOfItem, newValue)

对于对象

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

举个栗子

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

使用方法

Vue.set(target,key,value)

Vue.set(vm.someObject, &#39;b&#39;, 2)

this.$set(this.someObject,&#39;b&#39;,2)

注意

Vue不允许动态添加根级响应式属性

const app = new Vue({
  data: {
    a: 1
  }
  // render: h => h(Suduko)
}).$mount(&#39;#app1&#39;)

Vue.set(app.data, &#39;b&#39;, 2)

只可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性

var vm=new Vue({
    el:&#39;#test&#39;,
    data:{
        //data中已经存在info根属性
        info:{
            name:&#39;小明&#39;;
        }
    }
});
//给info添加一个性别属性
Vue.set(vm.info,&#39;sex&#39;,&#39;男&#39;);

四、使用场景

当我们对data中的数组或对象进行修改时，有些操作方式是非响应式的，Vue检测不到数据更新，因此也不会触发视图更新。此时需要使用Vue.set()进行响应式的数据更新。

（学习视频分享：vuejs教程、web前端）

以上是浅析Vue中的Vue.set和this.$set，看看使用场景！的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript Object 封装 Length Property JS 对象 this

声明：

本文转载于：juejin.cn。如有侵权，请联系admin@php.cn删除

上一篇：手把手教你怎么实现一个vue双向绑定下一篇：一文详解Vue3怎么进行全局异常处理

查看更多