【前端基础知识】Vue中的变量不是响应式的吗?属性赋值后视图不变化的原因是什么?

这篇具有很好参考价值的文章主要介绍了【前端基础知识】Vue中的变量不是响应式的吗?属性赋值后视图不变化的原因是什么?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【前端基础知识】Vue中的变量不是响应式的吗?属性赋值后视图不变化的原因是什么?

🤔问题

Vue是一款在国内非常流行的框架,采用MVVM架构,它提供了一种响应式的数据双向绑定机制,使得开发者可以更方便地管理模型和视图。但是在Vue2中,由于使用了Object.defineProperty来追踪属性变化,但是它只能追踪已经存在的属性,无法追踪动态添加的属性,导致我们动态添加了属性后视图也无法更新。这个时候就需要$set的帮助了。

注:Vue3使用的是Proxy去监听属性变化,所以不会有这个问题。但是为了保持向后兼容性,Vue3仍然保留了这个方法,可以使用,但已经不是必需的!

📝回答

$set是Vue提供的一个全局方法,它的作用是在响应式对象上添加一个属性,并确保这个属性是响应式的。这意味着,当这个属性的值发生变化时,Vue会自动更新视图。

$set方法的语法如下:

/**object*/

//this
this.$set(object, propertyName, value)

//vue
Vue.set(object, propertyName, value)
/**Array*/

//this
this.$set(array, index, value)

//vue
Vue.set(array, index, value)

其中,object是要添加属性的对象,propertyName是要添加的属性名,value是要添加的属性值。

举个🌰栗子,假设我们有一个data对象:

data: {
  user: {
    name: '张三',
    age: 18
  }
}

如果我们想要添加一个新的属性gender,我们可以使用$set方法:

Vue.set(this.user, 'gender', '男')

这样,我们就成功地向user对象中添加了一个gender属性,Vue也会自动更新视图。

🎨使用场景

需要注意的是,$set方法不仅可以用于添加或修改对象属性,而且可以用于数组,并且数组可以使用Vue提供的变异方法,如push、pop、splice等。

动态添加属性

在Vue中,如果我们想要动态地添加一个属性,我们通常会使用以下方式:

this.obj.newProp = 'new value';

但是,这种方式会导致新添加的属性不是响应式的,也就是说,当这个属性的值发生变化时,视图不会自动更新。这时,我们就需要使用$set方法来确保新添加的属性是响应式的:

this.$set(this.obj, 'newProp', 'new value');

这样,当newProp的值发生变化时,视图会自动更新。

动态添加数组元素

在Vue中,如果我们想要动态地添加一个数组元素,我们通常会使用以下方式:

this.arr.push('new item');

我们也可以使用$set方法来确保新添加的元素是响应式的:

this.$set(this.arr, this.arr.length, 'new item');

这样,当新元素被添加到数组中时,视图会自动更新。

❌注意事项

虽然$set方法可以解决动态添加属性和数组元素的问题,但是我们需要注意以下几点:

$set只能在响应式对象上使用

$set方法只能在响应式对象上使用,如果我们在非响应式对象上使用$set方法,它将不起作用。

$set不能用于根级别的属性

$set方法不能用于根级别的属性,也就是说,我们不能使用$set方法来添加或修改组件的根级别属性。如果我们需要修改根级别属性,我们应该在组件的data选项中声明这些属性。

$set的性能问题

$set方法会对性能产生一定的影响,因为它需要遍历整个对象来确保新添加的属性是响应式的。因此,我们应该尽量避免频繁地使用$set方法。

📄总结

$set方法是Vue提供的一个全局方法,它的作用是在响应式对象上添加一个属性,并确保这个属性是响应式的。$set方法的使用场景包括动态添加属性和数组元素。但是,我们需要注意$set方法只能在响应式对象上使用,不能用于根级别的属性,并且会对性能产生一定的影响。文章来源地址https://www.toymoban.com/news/detail-428293.html

到了这里,关于【前端基础知识】Vue中的变量不是响应式的吗?属性赋值后视图不变化的原因是什么?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue前端】vue使用笔记0基础到高手第2篇:Vue进阶知识点介绍(附代码,已分享)

    本系列文章md笔记(已分享)主要讨论vue相关知识。Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。Vue.js是一个构建

    2024年02月19日
    浏览(44)
  • web开发学习笔记(10.postman请求响应,后端接口基础知识)

    1.springboot使用get请求接受简单参数 上述写法不去别get或者post请求 2.postman各种提交方式的区别 1、form-data:                     就是http请求中的 multipart/form-data ,它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件。当上传

    2024年01月20日
    浏览(55)
  • python基础知识(二):变量和常用数据类型

    变量是值可以改变的量,其定义方法如下,通过赋值运算符将变量名和变量值连接: 例如: 其中将值\\\"Hello Python world!“通过赋值运算符”=\\\"赋值给变量message。 (1) 变量名只能包含字母、数字和下划线。变量名可以字母或下划线打头,但不能以数字打头,例如,可将变量命名为

    2024年02月06日
    浏览(46)
  • C++ 基础知识笔记(一)变量和数据的输入输出

    C++的基础知识包括如下内容: 变量和数据的输入输出 数据类型和运算符 比较运算符和布尔类型 if-else 选择语句、多分支语句 switch 分支语句 逻辑运算符 for 循环 for 循环进阶 数组 数组进阶 while 循环 格式化输入输出 浮点数和数据类型转换 字符串和字符数组 string 类型的字符

    2024年02月09日
    浏览(46)
  • 一、Go基础知识2、iota、匿名变量与变量作用域的小细节

    1、iota是特殊常量,可以理解为是一个可被编译器修改的常量。 2、iota中有一个计数器,会自动加1,自增类型默认是int类型。 3、如果中断了iota则必须显示恢复。参考示例二。 4、iota简化了const类型的定义。 5、每次出现const的时候,iota归零。 示例一: 运行结果: 两个const打

    2024年02月05日
    浏览(36)
  • HTTP基础:学习HTTP协议的基本知识,了解请求和响应的过程

    HTTP(Hypertext Transfer Protocol,超文本传输协议)是一种用于传输超媒体文档(如HTML)的应用层协议,它是Web中最基本的协议。 HTTP请求和响应都是由客户端和服务器之间进行的。 一个完整的HTTP请求由以下几个部分组成: 请求行:包括请求方法(GET、POST等)、请求的URI和HTTP协

    2024年02月12日
    浏览(46)
  • 100天精通Python丨基础知识篇 —— 05、7大基础数据类型详解(变量、列表、集合、字典、元组)

    《100天精通Python专栏 - 快速入门到黑科技》 是由 CSDN 内容合伙人丨全站排名 Top 4 的硬核博主 不吃西红柿 倾力打造,专栏分为基础知识篇和黑科技应用篇。 基础知识篇 以理论知识为主,旨在帮助没有语言基础的小伙伴,学习我整理成体系的精华知识,快速入门构建起知识框

    2023年04月18日
    浏览(63)
  • 前端算法基础知识

    数组 数组是一种线性数据结构,可以存储同类型的数据元素。数组具有随机访问性,可以通过下标访问其中的元素,时间复杂度为O(1)。 链表 链表也是一种线性数据结构,不同于数组,链表中的元素不是连续存储的,每个元素包含一个指向下一个元素的指针。链表不支持随机

    2024年02月03日
    浏览(35)
  • 前端基础知识

    创建工作区 es6基础 vue axios 切换node.js 初始化项目 修改访问接口 代码编写 将token放到请求头中传递 下载npm 下载需要的nodejs (nvm install 10.23.0 ) ,然后 use 选择下载的nodejs ( nvm use 10.23.0 ) 查看npm下的所有nodejs : nvm ls 修改成本地的 举例说明: 勾选复选框 点击批量删除 发

    2024年02月12日
    浏览(47)
  • 前端Cookie基础知识

    一、简介 ​ Cookie (也称为 HTTP Cookie 、 Web Cookie 、浏览器 Cookie 等等)是服务器发送到用户浏览器并保存在本地的一小块数据,该数据通常是用户账号相关的信息,不同浏览器对 Cookie 的数量和大小限制不同,但一般来说,单域名下设置的 cookie 不能超过30个,单条 cookie 的大

    2024年02月12日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包