$set解决vue中修改数组或对象视图不更新的问题

最新推荐文章于 2024-07-31 10:28:23 发布

hhhhhhhssss

最新推荐文章于 2024-07-31 10:28:23 发布

阅读量1.7k

点赞数

分类专栏：项目细节文章标签： vue js

本文链接：https://blog.csdn.net/hhhhhhhssss/article/details/118790500

版权

在Vue 2.x中，由于defineProperty的限制，直接修改数组或对象可能导致视图不更新。本文通过案例介绍如何使用`$set`或`Vue.set()`解决这个问题，确保视图正确响应数据变化。

摘要由CSDN通过智能技术生成

文章目录

前言
一、案例
二、解决方法
- $set
总结

前言

相信大家和我一样，在开发中总是遇到一个问题。

为啥我修改v-for遍历的数组，视图却没有更新？？？当我点击其他操作重新渲染后，又更新了？？？这不会是vue出bug了吧
在这里插入图片描述
这项问题其实正是由vue的双向绑定造成的，vue在2.x的版本中还在使用defineProperty方法，这就是defineProperty中的一个问题。所以在vue3.0中，使用了proxy取代了defineProperty。对此本文不多做解释，有兴趣的朋友可以去查阅下资料。

回到正题，让我们看看怎么在2.x中解决这个问题吧！

一、案例

为了方便我们了解问题，我写了一个测试代码

<template>
<div id="app">
  <div>
    <button type="" @click="change">改变数组</button>
    <p>{
  {student.name}}</p>
    <p>{
  {student.age}}</p>
    <span v-for="(item,index) in info" :key="index" style=&