vue中vm.$set函数的详细使用方法

本文探讨了在Vue.js中为何需要使用vm.$set来确保数据变化时页面实时渲染。通过举例说明,解释了直接通过下标操作数组属性无法触发响应式更新的问题,并详述了vm.$set的使用方法,包括改变数组值和对象属性。同时,文章揭示了通过下标操作数组中对象的响应式原理,并指出vm.$set在对象属性响应式设置中的作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、为什么要使用

想必大家都遇到过这样一个问题,就是在数组数据变化了,但是页面不能实时的进行渲染。为什么会出现这个问题呢?首先看看Vue.js官网教程中的说法:
在这里插入图片描述
既然这个问题频频出现,那么为什么vue不提供对数组属性的监听呢?来看看github上大佬的回答:
在这里插入图片描述
我还记得当时看过的一篇文章,如果vue提供了对数组属性的监听会有什么后果,有一个老外的回答是:“Oh,it’s very terrible !”。可见这个操作是有多影响性能。

二、不是响应性的例子

  • 1.代码
<template>
  <div id="app">
    <ul>
      <li v-for="item in list" :key="item">{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data(){
    return{
      list:['1','2','3']
    }
  },
  mounted(){
    this.list[0] = '2';
    console.log(this.list)
  }
}
</script>
  • 2.打印结果
    在这里插入图片描述

三、vm.$set的使用

既然vue不能检测以下标形式来操作数组属性值的变动,但是提供vm.$set的API来供我们使用。详情可见官网:vue官方教程

  • 1.vm.set的三个参数
    在这里插入图片描述
  • 2.使用$set改变数组的值

在这里插入图片描述

四、数组下标操作会碰到的误区

误区一:数组通过下标操作数组中的对象是响应式的。

在这里插入图片描述
不是说通过下标操作数组属性不是响应式的吗?那页面为什么会跟着改变呢?其实在vue的内部针对于数组中对象是会通过Object.defineProperty来对所有的属性进行劫持,来完成响应式的,所以数组中对象元素都是响应式的,这里并没有通过数组下标去改变值,而是获取相应的对象,而这个对象是响应式的。

误区二:利用下标操作数组属性也是响应式的?

在这里插入图片描述
在这里就会有疑问,刚刚才讲完通过下标来操作数组的值不是响应式的,现在立马又来推翻?

  • 1.其实,在 this.list[0] = 0;之后,data中的数据是已经进行了改变,但实际上视图时没有进行更新的。
  • 2.执行到this.objList[0].name = ‘张小三’;的时候,vm会发现这是响应式操作,就会执行内部的observe中的setter,然后将通知Dep(订阅器)发生了变化,最终更新视图。
  • 3.在对象的更新过程中,检测到数组list也进行了变化,但是视图没有进行更新,此时vm会将list的变化也更新到视图。

五、vm.$set改变对象的属性

在前面就可以看到,不是对象的属性都会被劫持,从而是响应式的吗?并且我们通过obj.name也可以看到具体的效果,那么为什么vm.$set提供了对对象的属性操作呢?
其实文档讲的已经非常的明白了,就没有必要搬文档了:vue深入理解响应式。所以说多看看文档还是很有用处的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值