AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue.set（）与this.$set（）用法与区别

2022-11-26 177
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue.set（）与this.$set（）用法与区别

背景

vue初始化实例对象的时候会把属性转为setter/getter，这样数据才会是动态响应的（即data中的数据是动态响应的），vue才能够监听到属性的添加、删除、修改（受ES5的限制）


原理

vue.set源码
import { set } from '../observer/index'
...
Vue.set = set
...


this.$set源码


import { set } from '../observer/index'
...
Vue.prototype.$set = set
...


区别

vue.set

  • vue.set可以设置实例创建之后添加的新的属性（即在data中未声明，vue实例创建时在beforeCreate之后，created之前，监听data对象数据变化，并初始化vue内部事件）
  • vue.set不允许添加根级响应式属性，只可以向嵌套对象添加响应式属性
  • vue.set是将set函数绑定在vue构造函数

this.$set

  • this.$set只能设置实例创建后存在的数据（数据已经在data中）
  • 将set函数绑定在vue原型上


文章标签：
JavaScript
关键词：
Set用法
VUE.js区别
Set用法区别
vue用法
猫先生c
目录
相关文章
光明顶阳顶天
|
1月前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
总的来说，Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进，使其更适应现代前端开发的需求和趋势。但需要注意的是，在迁移过程中可能需要对一些代码进行调整和适配。
光明顶阳顶天
112 60
chian-ocean
|
1月前
|
存储 C++ 容器
【C++】map、set基本用法
本文介绍了C++ STL中的`map`和`set`两种关联容器。`map`用于存储键值对，每个键唯一；而`set`存储唯一元素，不包含值。两者均基于红黑树实现，支持高效的查找、插入和删除操作。文中详细列举了它们的构造方法、迭代器、容量检查、元素修改等常用接口，并简要对比了`map`与`set`的主要差异。此外，还介绍了允许重复元素的`multiset`和`multimap`。
chian-ocean
33 3
【C++】map、set基本用法
光明顶阳顶天
|
3月前
|
JavaScript
在 Vue 3 组件通信方式中，Provide / Inject 与 Vuex 的区别是什么？
在 Vue 3 组件通信方式中，Provide / Inject 与 Vuex 的区别是什么？
光明顶阳顶天
195 65
chnjames
|
2月前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南：in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令，但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似，但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异，你将能够编写更加高效、简洁的 Vue.js 代码，灵活应对各种数据结构的遍历需求。
chnjames
129 6
mao29955
|
2月前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项，它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别，可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中，要根据具体情况灵活选择使用，以满足不同的需求。
mao29955
32 2
杀死一只知更鸟debug
|
3月前
|
SQL XML Java
mybatis复习03，动态SQL，if，choose，where,set,trim标签及foreach标签的用法
文章介绍了MyBatis中动态SQL的用法，包括if、choose、where、set和trim标签，以及foreach标签的详细使用。通过实际代码示例，展示了如何根据条件动态构建查询、更新和批量插入操作的SQL语句。
杀死一只知更鸟debug
104 2
mybatis复习03，动态SQL，if，choose，where,set,trim标签及foreach标签的用法
html的七十二变
|
2月前
|
存储 JavaScript 前端开发
Set、Map、WeakSet 和 WeakMap 的区别
在 JavaScript 中，Set 和 Map 用于存储唯一值和键值对，支持多种操作方法，如添加、删除和检查元素。WeakSet 和 WeakMap 则存储弱引用的对象，有助于防止内存泄漏，适合特定场景使用。
html的七十二变
41 2
GuGuStudy
|
2月前
|
存储 缓存 Java
【用Java学习数据结构系列】HashMap与TreeMap的区别，以及Map与Set的关系
【用Java学习数据结构系列】HashMap与TreeMap的区别，以及Map与Set的关系
GuGuStudy
44 1
明月何时照我还呀
|
3月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么？
React 和 Vue.js 框架的区别是什么？
明月何时照我还呀
51 11
蓝易云
|
3月前
|
JavaScript 前端开发 API
Vue2与Vue3插槽使用的区别及案例
Vue 3在插槽功能上的改进，体现了其对开发体验的持续优化。通过简化API、加强动态特性和提升性能，Vue 3使得插槽的使用更加灵活和高效。这些改进不仅有助于减轻开发者的负担，还为组件之间的高级交互和内容复用打开了新的可能性。随着Vue生态系统的不断成熟，我们有理由相信，Vue将继续为前端开发提供强大且易用的工具。
蓝易云
80 3

热门文章

最新文章

  • 1
    Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
  • 2
    Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
  • 3
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
  • 4
    在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
  • 5
    Vue3中使用provide/inject来避免v-model的循环引用
  • 6
    Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
  • 7
    除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
  • 8
    你对Collection中Set、List、Map理解？
  • 9
    只会“有序无序”？面试官嫌弃的List、Set、Map回答！
  • 10
    vue3使用pinia中的actions，需要调用接口的话
  • 1
    Java一分钟之-集合框架进阶：Set接口与HashSet
    59
  • 2
    【JAVA基础篇教学】第九篇：Java中Set详解说明
    126
  • 3
    编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
    508
  • 4
    C++：map&set 对红黑树的封装
    48
  • 5
    Map与Set的经典OJ题
    58
  • 6
    Map与Set
    57
  • 7
    C++：STL - set & map
    62
  • 8
    问题：Android requires .class compatibility set to 5.
    36
  • 9
    Redis数据类型 Hash Set Zset Bitmap HyperLogLog GEO
    66
  • 10
    探索 Elasticsearch 8.X Terms Set 检索的应用与原理
    128

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 对象和接口-2：常见用法
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)