首页 > 其他分享 >Vue的set主要是做什么的

Vue的set主要是做什么的

时间:2023-06-21 17:45:00浏览次数:32  
标签:Vue 对象 什么 响应 set 数组 属性

这个时候可以用this.$set(),给新添加的对象属性,或数组元素添加getter,setter方法 简单说即是:当你发现你给对象加了一个属性,在控制台能打印出来,但是却没有更新到视图上时,也 许这个时候就需要用到this.$set()这个方法了

  methods:{
btn(){
Vue.set(this.student, 'age', 18);
Vue.set(this.items, 1, 'two');
console.log(this.student,this.items);
}
}

了解 Vue 响应式原理的同学都知道在两种情况下修改 Vue 是不会触发视图更新的。

  • 在实例创建之后添加新的属性到实例上(给响应式对象新增属性)

  • 直接更改数组下标来修改数组的值。

Vue.set 或者说是 $set 原理如下

因为响应式数据 我们给对象和数组本身新增了 ob 属性,代表的是 Observer 实例。 当给对象新增不存在的属性,首先会把新的属性进行响应式跟踪 然后会触发对象 ob的 dep 收集到的 watcher 去更新,当修改数组索引时我们调用数组本身的 splice 方法去更新数组

标签:Vue,对象,什么,响应,set,数组,属性
From: https://www.cnblogs.com/le-cheng/p/17496818.html

相关文章

  • vue中的data为什么是一个函数
    Vue中的data必须是个函数,因为当data是函数时,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,实例化几次就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变。简单来说,就是......
  • Vue项目优化
    代码层面的优化v-if和v-show区分使用场景computed和watch区分使用场景v-for遍历必须为item添加key,且避免同时使用v-if长列表性能优化事件的销毁图片资源懒加载路由懒加载第三方插件的按需引入优化无限列表性能服务端渲染SSRor预渲染......
  • Vue单项数据流是什么
    父级prop的更新会向下流动到子组件中,但是反过来则不行,防止从子组件意外改变父级组件的状态每次父级组件发生更新时,子组件中所有的prop都将会刷新为最新的值子组件想修改时,只能通过$emit派发一个自定义事件,父组件接收到后,由父组件修改 ......
  • 视频融合平台EasyCVR迁移数据库报错1146是什么原因?该如何解决?
    EasyCVR视频融合平台基于云边端协同架构,具有强大的数据接入、处理及分发能力。平台支持多协议接入,包括:国标GB28181、RTMP、RTSP/Onvif、海康Ehome、海康SDK、大华SDK、宇视SDK等,对外可分发多格式视频流,包括RTSP、RTMP、FLV、HLS、WebRTC等。我们在此前的文章中也介绍过关于EasyC......
  • 什么是Redis 雪崩、缓存"鸡"穿、缓存穿透?及出现的原因,如何预防
    Redis雪崩:在某个时间段,Redis的部分节点或者全部节点都挂掉了,导致Redis无法提供服务,请求全部转移到后端数据库,从而压垮数据库的情况。Redis雪崩通常由于某些原因导致缓存中的数据批量失效或者过期,导致后续请求都落到了数据库上,使得数据负载和请求量急剧增大,最终导致数据库的性能急......
  • 箭头函数和普通函数有什么区别?
    1、箭头函数更加简洁。2、箭头函数没有自己的this,只会在自己作用域的上一层继承this3、箭头函数继承来的this指向永远不会变,使用call()|apply()|bind()等方法不能改变4、箭头函数不能作为构造函数使用,没有自己的arguments|prototype......
  • ant design vue的customRender()方法中使用$createElement提示undefined
    antdesignvue的customRender()方法中使用$createElement提示undefined报错信息如下:TypeError:Cannotreadpropertiesofundefined(reading'$createElement')原因:如果index.vue文件中是从另一个columns.js的文件中引用的列配置,在columns.js文件中的customRender()方法中使......
  • 不是问题得问题 burpsuite为什么没有显示我要的文件
    问题:我在web访问了png和css文件。但是burp没有先显示,显示是灰色的,表示网页中有链接但是没有请求发出。原因:一种是过滤器过滤掉了,还有一种是浏览器有缓存并没有真正访问下载文件解决方法:第一种情况 在过滤器中点击全部显示,点击应用第二种情况 点击清除数据 ......
  • API在什么用途中能达到什么效果
    API是应用程序接口(ApplicationProgrammingInterface)的缩写,它是一组用于实现不同软件之间相互通信的规范和工具。API的主要作用是提供一种标准的方式来实现应用程序之间的交互和数据通信,可以使开发者更加方便地开发出更加强大的应用程序。    测试地址:点击免费测试以下......
  • 【vue3】实现el-tree组件
     禾小毅csdn博客【vue3】实现el-tree组件,将不同层级的箭头修改成自定义图标的组件封装及调用【vue3】实现简易的“百度网盘”文件夹的组件封装实现【vue3】实现公共搜索组件,在当前页搜索的路由跳转不能改变当前值的操作,使用bus/event-emitter派发器......