Vue.set和this.$set

最新推荐文章于 2023-06-06 16:36:46 发布
最新推荐文章于 2023-06-06 16:36:46 发布
阅读量152 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36657291/article/details/129023266
版权
Vue.set和this.$set都利用了observer/index中的set函数，Vue.set是在Vue构造函数上绑定，用于添加属性；而this.$set则是绑定在Vue实例的原型上，主要用于修改属性。
摘要由CSDN通过智能技术生成

Vue.set()和this.$set()这两个api的实现原理基本一模一样，都是使用了set函数。set函数是从 ../observer/index 文件中导出的，区别在于Vue.set()是将set函数绑定在Vue构造函数上，this.$set()是将set函数绑定在Vue原型上。

我们先来看看Vue.set()的源码：

import { set } from '../observer/index'

Vue.set = set

再来看看this.$set()的源码：

import { set } from '../observer/index'

Vue.prototype.$set = set

Vue.set可以添加属性，this.$set则是修改属性

HUAI-
关注
专栏目录
从vue源码看Vue.set()和this.$set()
diewan6825的博客
08-30 2906
前言 最近死磕了一段时间vue源码，想想觉得还是要输出点东西，我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的。 Vue.set()和this.$set()应用的场景 平时做项目的时候难免不会对数组或者对象进行这样的骚操作操作，结果发现，咦~~，他喵的，怎么页面没有重新渲染。 const vueInstance = new Vue({ ...
vue中 this.$set的用法详解
10-16
在Vue.js框架中，`this.$set` 是一个关键的方法，用于处理响应式数据更新的问题。在某些情况下，当你尝试直接修改对象的属性或数组的元素时，Vue可能无法检测到这些变化，进而不会自动更新视图。`this.$set` 方法...
Vue.set() this.$set()引发的视图更新思考及注意事项
12-09
引文 vue文档列表渲染中有条注意事项： 这里提到的两种情况实际改变了数据但是没有触发视图更新。 由此引出Vue.set()，先上文档API：   this.$set()和Vue.set()本质方法一样，前者可以用在methods中使用。 set方法调用时，可以触发页面全部重新渲染。 比如在vue中有个data数组arr： //arr=[1,2,3] arr[1]='b' console.log(arr) // [1,2,3] Vue.set(arr,2,'c') console.log(arr) // [1,b,c]
vue.set this.$set的作用
weixin_51747462的博客
06-06 510
vue.set this.$set的作用 通过数组下标修改数组属性值时，页面不渲染问题
this.$set()和Vue.set()
qq_43654065的博客
04-08 178
在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到识图上去；当我们去看vue文档时，会发现这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发识图更新。 <div id="app"> <template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ st
Vue中Vue.set和this.$set的使用
qq_59076775的博客
01-12 2777
一.背景 vue初始化实例对象的时候会把属性转位setter/getter。这样数据才会是动态响应的(即data中的数据是动态响应的),vue才能监听到属性的添加，删除，修改(受ES5的限制)。 二.原理 (1)vue.set源码 import { set } from '../observer/index' ... Vue.set = set ... (2)this.$set源码 import { set } from '../observer/index' ... Vue.prototy
Vue.set和this.$set的区别
weixin_44061022的博客
05-18 2368
先说明一下，单文件设计中，Vue.set和this.$set的没什么区别。 标题直接改动数组并不能驱动视图更新 this.three[i].isShow = true; //你需要在原数组上改动 Vue.set( this.three, i, this.three[i] ); //使用Vue.set方法才能更新视图 三个参数依次是：数组，索引，新数据 三个参数也可以是 对象，key，value（新数据） ...
【JavaScript源代码】Vue.set()和this.$set()使用和区别.docx
12-29
Vue.set()和this.$set()的主要用途是在Vue实例创建后，添加或修改数据对象的属性，并确保这些变更能够被Vue的响应式系统检测到，从而更新对应的视图。这两种方法的使用场景和区别如下： 1. **Vue.set()**： - 可以...
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
在这个例子中，`$.ajax`的`success`回调函数中的`this`并没有指向Vue实例，而是指向了回调函数本身，因此无法调用`this.$set`。 ### 报错原因 在JavaScript中，函数内部的`this`值取决于函数的调用方式。在上述...
从vue源码解析Vue.set()和this.$set()
10-18
主要介绍了从vue源码看Vue.set()和this.$set()的相关知识,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的。感兴趣的朋友跟随小编一起看看吧
Vue进阶（九十八）：Vue.set() 和 this.$set()
IT全栈 华强工作室
02-29 9260
场景 有时候我们会看到如下代码： 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给对象赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 如下代码，给 student对象新增 age 属性。 data () { return { student: { ...
Vue.set()和this.$set()介绍
dingwen
08-27 291
文章目录1.场景2.使用2.1 `this.$set()`2.2 `Vue.set()` 1.场景 当生成Vue实例之后，再次给数据赋值或者新增数据对象属性时，数据可以正常改变，但是视图不会更新。 data () { return { student: { name: '', sex: '' } } } mounted () { // ——钩子函数，实例挂载之后 this.student.age = 24 } // 数据能够正常更新 但是不会触发视
4.7vue.set（）与this.$set（）用法与区别- flex布局- grid网格布局-js中Attribute()方法对象对类的操作-js中字符串和数组的常用方法-jQuery中常用的方法
weixin_69333225的博客
04-12 785
vue.set（）与this.$set（）用法与区别- flex布局- grid网格布局-js中Attribute()方法对象对类的操作-js中字符串和数组的常用方法-jQuery中常用的方法
Vue.set()和this.$set()的区别和联系，什么场景该用哪一个，清晰明了
黑客与画家
03-20 1194
之前了解这个方法的时候，感觉这一辈子也用不到这个方法，因为当时没有应用场景，但是还真有用的时候????，我相信你们也有用到时候。 从三个方面给大家说一下这个this.set:1.this.set: 1.this.set:1.this.set实现什么功能，为什么要用它？ 2.怎么用它？ 3.应用场景 1.this.set实现什么功能，为什么要用它？当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.set实现什么功能，为什么要用它？ 当你发现你给对象加了
Vue.set()和this.$set()
weixin_44064357的博客
04-10 383
场景 有时候我们会看到如下代码： 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给对象赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 如下代码，给 student对象新增 age 属性。 data () { return { student: { ...
vue.set（）与this.$set（）用法与区别
热门推荐
编码世界
01-05 1万+
vue初始化实例对象的时候会把属性转为setter/getter，这样数据才会是动态响应的（即data中的数据是动态响应的），vue才能够监听到属性的添加、删除、修改（受ES5的限制）
this.$set/Vue.set
sunlizhen的专栏
05-08 212
首先声明this.$set和Vue.set的原理是相同的；都是使用了set函数。set函数是从 …/observer/index 文件中导出的，区别在于Vue.set()是将set函数绑定在Vue构造函数上，this.$set()是将set函数绑定在Vue原型上。 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给对象赋值时，有时候并不会自动更新到视图上去； 当我...
vue.set和 this.$set
最新发布
10-12
vue.set和this.$set都是用来在Vue实例中设置响应式属性的方法。它们的作用是相同的，但是使用方式略有不同。 vue.set的使用方式如下： ``` Vue.set(obj, propertyName, value) ``` this.$set的使用方式如下： ``` this.$set(obj, propertyName, value) ``` 其中，obj是要设置属性的对象，propertyName是要设置的属性名，value是要设置的属性值。 这两个方法的作用是将一个非响应式的对象变成响应式的对象，并且能够触发视图更新。 需要注意的是，如果要在嵌套对象中设置属性，需要使用点号或方括号来访问属性。例如： ``` this.$set(obj.nestedObj, 'propertyName', value) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值