您的当前位置:首页>全部文章>文章详情

【Vue】vue中的$set的作用

CrazyPanda发表于:2024-05-13 23:34:50浏览:247次TAG:

$set 的作用是响应式地设置对象或数组的属性,确保更改被 vue.js 追踪和更新,从而触发视图重新渲染。其用法包括:vue.set(target, key, value),适用于直接赋值不起作用、添加或删除对象或数组属性的情况。

Vue.js 中 $set 的作用

$set 是 Vue.js 中一个用于响应式地设置对象或数组属性的函数。它的主要作用是确保对对象或数组的更改能够被 Vue.js 追踪和更新,从而触发视图的重新渲染。

如何使用 $set

$set 函数有以下用法:

Vue.set(target, key, value)
  • target:要设置属性的对象或数组。

  • key:要设置的属性的键。

  • value:要设置的新值。

什么时候使用 $set

在以下情况下需要使用 $set:

  • 当直接属性赋值不起作用时:如果直接给对象或数组属性赋值,但视图未更新,则需要使用 $set。

  • 当添加或删除对象或数组中的属性时:要向对象或数组添加或删除属性,必须使用 $set。

示例

假设我们有一个包含 name 属性的对象:

const person = { name: 'John' };

如果我们想更改 name 属性,可以使用以下代码:

Vue.set(person, 'name', 'Mary');

这样,Vue.js 将追踪到 name 属性的更改,并更新视图以显示新的值。

需要注意的事项

  • 如果尝试设置不存在的属性,$set 会自动创建该属性。

  • 如果尝试设置一个不可写的属性(使用 Object.defineProperty 定义),$set 将抛出一个错误。

  • $set 是一个 Vue.js 特定函数,只适用于 Vue.js 实例中反应式的对象和数组。


猜你喜欢

【VUE】vue3组件间的通信,父组件调用子组件方法
文章目录一、父组件数据传递N个层级的子组件二、使用v-model指令实现父子组件的双向绑定三、父组件props向子组件传值四、子组件emit向父组件传值五、通过expose和ref来实现父组件调用子组件的方法vue3 provide 与 injectA组件名称 app.vueB组件名称 provideB.vueC组件名称 provideCSetup.vue父组件名称 app.vue子组件名称 v-modelSetup.vue子组件 propsSetup.vue父组件 app.vuevue3 ev
发表于:2024-03-10 浏览:558 TAG:
【Vue】Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(上)
文章目录📋前言🎯关于 Print.js🧩PDF 打印🧩网页(HTML)打印🧩图像打印🧩JSON 打印🧩下载并安装使用🧩相关配置🎯 Vue3 中使用 Print.js 实战🎯Vue3 + Nodejs + Print.js 模拟打印实战案例🧩启动 Nodejs 服务🧩启动 Vue 项目📝最后📋前言今天久违的更新一下关于 Vue 的文章了,本篇文章是基于 Vue3 + Node.js + ElementPlus 的实战项目分享,实战内容包括有打印插件 Print.js 的
发表于:2023-12-10 浏览:327 TAG:
【VUE】Vue3 实现文件预览 Word Excel pdf 图片 视频等格式 大全!!!!
先上效果图  插件安装先说 word 文件是docx-preview插件          excel文件是用 xlsx 插件    介绍后端返回的数据因为在拦截器处 做了对数据的处理 最后你调接口拿到的数据是 一个对象 里面包含:url : blob对象转换的用于访问Blob数据的临时链接。这个链接可以被用于在网页中展示二进制数据,比如显示图像或者播放音视频文件blobs:&
发表于:2023-12-28 浏览:293 TAG:
【Vue】vue2应用与vue3的不同之处
上一篇,我使用了vue2创建了一个应用,这次我使用vue3创建一个应用,看一下两者有什么不同。如下,是我用cue3创建的应用目录发现和vue2应用的目录一模一样,然后我用对比工具对比了两者的文件。1. 文件区别下面是package.json文件的区别,首先vue版本不同,对应的扩展组件也不同。下面是main.js的不同然后是APP.vue的不同2. 全局实例改变2.x 全局 API3.x 实例 API (app)Vue.configapp.configVue.config.productionT
发表于:2024-04-23 浏览:338 TAG:
【Vue】yarn 运行vue3项目开发模式
要在YARN中以Vue.js 3的开发模式运行项目,可以按照以下步骤进行操作:确保已经安装了Node.js和YARN。如果没有安装,请先安装这两个工具。打开命令提示符或终端并导航到Vue.js 3项目所在的文件夹。使用以下命令来初始化新的YARN项目(如果还未创建):yarn init -y接下来,需要安装Vue CLI脚手架工具。运行以下命令来全局安装Vue CLI:npm install -g @vue/cli然后,通过以下命令将Vue CL
发表于:2024-02-08 浏览:290 TAG:
【Vue】Vue中使用Vuex管理全局状态详解和示例
vue.js是一种流行的前端框架,它提供了很多方便的功能,但当应用变得越来越复杂时,我们很快就会发现向子组件传递大量数据变得非常困难。这就是为什么vuex在vue中变得如此重要的原因。vuex是一个全局状态管理器,使得数据和状态的共享变得更容易。在本文中,我们将深入了解vuex的工作原理并演示如何将其集成到您的vue应用程序中。什么是VuexVuex是一个用于Vue.js应用程序的状态管理模式和库,常用于解决跨层级、多组件、多页面共享状态问题。它将应用程序的状态集中存储到一个单一的store中,
发表于:2024-04-29 浏览:309 TAG:
【Vue】Vue中如何使用v-for指令循环输出对象
在vue中,v-for是一种指令,在模板中使用它可以对数组或对象进行循环操作。v-for指令用于循环渲染数据,它是vue中非常有用的指令之一。在vue中,使用v-for指令循环输出对象的方式和循环输出数组的方式类似,只需要稍作区别即可。如何使用v-for指令循环输出对象呢?下面我们将分以下几个部分进行讲解。一、v-for指令的基本使用v-for指令的基本语法如下:<div v-for="(item,index) in items">{
发表于:2024-04-30 浏览:370 TAG:
【Vue】深入剖析:Vue核心之虚拟DOM
转载:https://www.cnblogs.com/caihongmin/p/17510878.html前言使用 Vue 做项目也有两年时间了,对 Vue 的 api也用的比较得心应手了,虽然对 Vue 的一些实现原理也耳有所闻,例如 虚拟DOM、flow、数据驱动、路由原理等等,但是自己并没有特意去探究这些原理的基础以及 Vue 源码是如何利用这些原理进行框架实现的,所以利用空闲时间,进行 Vue 框架相关技术原理和 Vue 框架的具体实现的整理。如果你对 Vue 的实现原理很感兴趣,那么就
发表于:2024-05-25 浏览:281 TAG:
【Vue】Antd Pro Vue的使用(二)—— 全局配置及登录
1. 默认语言设置 Antd Pro Vue安装好之后,默认使用的是英文,我们需要把它设置为中文简体。找到/src/core/bootstrap.js文件,把最后一行 en-US 修改为 zh-CN,然后一定要清除浏览器缓存,修改才能生效修改后修改后的页面2. 请求服务端接口Antd Pro Vue封装好的有请求方法,在/src/api/文件夹,我们把自己的接口写到这里面就可以任意调用。Antd Pro Vue安装好之后,默认使用的是mock数据,我们要使用自己的接口,要把mock去掉
发表于:2024-04-25 浏览:460 TAG:
【Vue】Antd Pro Vue的使用(九) —— 抽屉a-drawer的操作按钮设置
在antd pro vue2中,a-drawer默认是没有操作按钮的,只有右上角的关闭'X'号,需要自己配置提交和取消按钮提交方法对应@submit方法,取消方法对应@close方法(a-model对应的取消方法是@cancel),都是父页面传过来的方法<a-drawer     :title="model ? '编辑类型' : '新建类型'"
发表于:2024-05-10 浏览:329 TAG: