• 面试题七：Vue.set()的使用

    一、为什么使用Vue.set()

    因为受现代JS的限制，vue不能检测到对象属性的添加或删除。值必须在data对象上存在才能让vue转换它，这样它才能是响应的。vue不允许在已经创建的实例上动态添加新的根级响应式属性，不过可以使用Vue.set()方法将响应式属性添加到嵌套的对象上。

     二、Vue.set( )和this.$set( )的区别

    Vue.set  : 使用Vue.set( )必须在组件中引入VUE

     this.$set  : 直接在组件中使用就可以

    三、使用

    问题展示

    如果在实例创建之后添加新的属性到实例上，它不会触发视图更新
    因此比如我们修改一个数组其中的一个值，或者添加一条数据时，数据变化了,但是视图没有渲染。

    例子：

    1. for="item in items"
    2.          :key="item">{{item}}
  • <button @click="add">添加button>
  1. add () {
  2.       this.items[1] = 3;
  3.  
  4. }

 页面  ：

控制台：  

上图控制台的数据已经改变了但是视图却没有渲染上

解决方法

我们可以选择两种方式第一种是Vue.set( ),第二种是this.$set( ) 我使用的是第二种方式

  1. for="item in items"
  2.          :key="item">{{item}}
  • <button @click="add">添加button>
    1. add () {
    2.       console.log(this.items);
    3.       this.$set(this.items, 1, 2);
    4.     },

    页面 ： 

       控制台： 

     

    三个参数：

    第一个参数：要修改的对象（数组|对象）
    第二个参数 ：属性(属性的名字|对象的名字)
    第三个参数 ：修改的值(数据的值)

  • 相关阅读:
    Android AIDL跨进程通信基础（多端情况）
    CSS书写规范笔记
    java计算机毕业设计网上书城网站源码+系统+数据库+lw文档+mybatis+运行部署
    自动化管理管理工具----Ansible
    代码随想录Day57、58 | 392.判断子序列 | 115. 不同的子序列 | 583. 两个字符串的删除操作 | 72. 编辑距离
    看完这篇 教你玩转渗透测试靶机Vulnhub——DriftingBlues-7
    MyBatis详解（一）
    通用密钥,无需密码,在无密码元年实现Passkeys通用密钥登录(基于Django4.2/Python3.10)
    SpringCloud Alibaba(六) - Seata 分布式事务锁
    算法——查找
  • 原文地址：https://blog.csdn.net/2201_75705263/article/details/133744942