当前位置 主页 > 服务器问题 > win服务器问题汇总 >
谈到Vue.set就要说响应式原理,所以得为你自己准备下这方面的理论知识。然而,一如即往,这并不难或者枯燥。准备点鳄梨和薯条,制作些鳄梨酱,然后我们再进入话题。
数据和响应式原理
在一个Vue组件中,无论你何时创建一个data()功能属性,都会返回一个对象。Vue在组件背后做了很多事情,来使得它具有响应式。
export default { data() { return { red: 'hot', chili: 'peppers' } } }
Vue要做的第一件事是使用我们超帅的RHCP(Red Hot Chili Peppers, 一个超赞的乐队)data,它遍历了return {}对象的属性properties,然后为它们创建了唯一的getter和setter。具体情况已经超出了本文的范围,但是Vue Mastery有个很赞的视频去解析这点。
创建这些属性的目的是使你在代码中访问这些属性时(例如通过执行this.red或使用this.red=hotter进行设置时),实际上是在调用Vue为你创建的getter和setter。
在SETGET这块神奇的土地上,Vue连接起了computer properties, watchers, props,data等,从而变得响应式。以非常简单的方式,它被称为一个函数,该函数在每次setter改变时更新整个工作。
陷阱
酷极了!这就是我们喜欢Vue的原因,它具有响应式和强大的幕后功能。但是也有一些阴暗面需要我们探讨。
在我们开始之前,我们更改下data数据看发生什么。
data() { return { members: {} } }
好吧,到目前为止没什么看头,我们在data中有一个member属性,用来添加乐队成员的信息。现在,为了举例,我们添加一个方法,并假装从远程http请求中拉取一些信息,它将返回一个乐队信息的JSON对象。
data() { return { members: {} } }, methods: { getMembers() { const newMember = { name: 'Flea', instrument: 'Bass', baeLevel: 'A++' }; // Some magical method that gives us data got us this sweet info // ... } }
嗯。好吧,我们先停停然后思考下这个例子。如何将newMember对象添加到当前的member属性中?这有许多方法可以解决当前的难题。
也许你会想,我们可以将member转换成一个数组,然后将它push进去。这可行,但是这是在作弊,因为它破坏了我开始输入时细心构造的例子。
在这种情况下,我们member是一个object。好吧,简单,你会说,我们在member上添加一新的属性,这样它还是一个object。实际上,我们在member上添加个name属性。
getMembers() { const newMember = { name: 'Flea', instrument: 'Bass', baeLevel: 'A++' // Totally important property that we will never use }; // Some magical method that gives us data got us this sweet info this.members[newMember.name] = newMember; }
Lok'tar Ogar!(不胜则亡)
可是,不,因为-
A. 这不是Orgrimmar(魔兽世界人物)
B. 现在我们遇到问题了
如果你在浏览器上测试这段代码,你将看到你确实将新数据推入member数据中了,但是此次的更改组件的状态将不会使得你的应用重新渲染。
仅将这些数据用于某些计算或某种内部存储的情况下,以这种方式进行操作不会影响你的应用程序。然而,这里应该是大大的转折HOWERVER,如果你在自己app上正在使用这种数据去展示数据,或者根据条件v-if或v-else来渲染,事情将变得有趣。
实际使用Vue.set