Vue.set实际上是什么意思

　　介绍

这篇文章主要介绍了Vue.set实际上是什么意思,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

谈到Vue.set就要说响应式原理,所以得为你自己准备下这方面的理论知识。然而,一如即往,这并不难或者枯燥。准备点鳄梨和薯条,制作些鳄梨酱,然后我们再进入话题。

<强>数据和响应式原理

在一个Vue组件中,无论你何时创建一个数据()功能属性,都会返回一个对象.Vue在组件背后做了很多事情,来使得它具有响应式。

export  default  { 　　,数据(){ 　　return {才能 　　,,,红色:& # 39;热# 39; 　　,,,辣椒:& # 39;辣椒# 39; 　　,,} 　　,} 　　}

Vue要做的第一件事是使用我们超帅的RHCP(红辣椒乐队,一个超赞的乐队)数据,它遍历了返回{}对象的属性属性,然后为它们创建了唯一的getter和setter。具体情况已经超出了本文的范围,但是Vue掌握有个很赞的视频去解析这点。

创建这些属性的目的是使你在代码中访问这些属性时(例如通过执行this.red或使用。红色=热进行设置时),实际上是在调用Vue为你创建的getter和setter。

在SETGET这块神奇的土地上,Vue连接起了电脑属性,观察者,道具、数据等,从而变得响应式。以非常简单的方式,它被称为一个函数,该函数在每次setter改变时更新整个工作。

<强>陷阱

酷极了!这就是我们喜欢Vue的原因,它具有响应式和强大的幕后功能。但是也有一些阴暗面需要我们探讨。

在我们开始之前,我们更改下数据数据看发生什么。

数据(),{ 　　return {才能 　　,,,成员:,{} 　　,,} 　　}

好吧,到目前为止没什么看头,我们在数据中有一个成员属性,用来添加乐队成员的信息。现在,为了举例,我们添加一个方法,并假装从远程http请求中拉取一些信息,它将返回一个乐队信息的JSON对象。

数据(),{ 　　,return  { 　　,,成员:{} 　　,} 　　}, 　　方法:,{ 　　,getMembers (), { 　　const 才能;newMember =, { 　　,,,的名字:& # 39;跳蚤# 39; 　　,,,仪器:& # 39;低音# 39; 　　,,,baeLevel: & # 39; + + & # 39; 　　,,},//,Some  magical  method  that  gives  us  data  got  us 却;能够sweet 信息//,才能…… 　　,} 　　}

嗯。好吧,我们先停停然后思考下这个例子。如何将newMember对象添加到当前的成员属性中?这有许多方法可以解决当前的难题。

也许你会想,我们可以将成员转换成一个数组,然后将它推进去。这可行,但是这是在作弊,因为它破坏了我开始输入时细心构造的例子。

在这种情况下,我们成员是一个对象。好吧,简单,你会说,我们在成员上添加一新的属性,这样它还是一个对象。实际上,我们在成员上添加个名字属性。

getMembers (), { 　　const 才能;newMember =, { 　　,,,的名字:& # 39;跳蚤# 39; 　　,,,仪器:& # 39;低音# 39; 　　,,,baeLevel: & # 39; + + & # 39;,//, Totally  important  property  that  will  never 使用我方表示歉意 　　,,},//,Some  magical  method  that  gives  us  data  got  us 却;能够sweet 信息 　　 　　this.members才能[newMember.name],=, newMember; 　　以前,}

洛克# 39;焦油Ogar !(不胜则亡)

可是,不,因为——

。(魔这不是奥格瑞玛兽世界人物)
B。现在我们遇到问题了

如果你在浏览器上测试这段代码,你将看到你确实将新数据推入会员数据中了,但是此次的更改组件的状态将不会使得你的应用重新渲染。

仅将这些数据用于某些计算或某种内部存储的情况下,以这种方式进行操作不会影响你的应用程序。然而,这里应该是大大的转折但是如果你在自己应用上正在使用这种数据去展示数据,或者根据条件v或v-else来渲染,事情将变得有趣。

<>强实际使用Vue.set

所以,现在我们明白问题实际出在哪里了,我们可以学习什么是正确的解决方案。允许我向你介绍Vue.set。

Vue.set是一个工具,它允许我们向已经激活的对象添加新属性,然后确保这个新的属性也是响应的。

这完全解决了我们在另一个例子中遇到的问题,因为当我们设置成员的新属性时,它将自动挂接到Vue的响应式系统中,酷酷的getter/setter和Vue的魔法都在框架背后运行。

Vue.set实际上是什么意思