[Vue] v-model bound objects are not updated in real time

Original link: Make a big tree

In a project I recently participated in, the vue.js framework was used in the front end. During this period, there was a The function requires dynamic to add properties to a bound object. However, in practical applications, a problem arises: after adding attributes to the object, the content of the component bound to the object does not change. The component must be refreshed again before its content changes to the changed content.

At first I thought the attribute was not added successfully, because in my impression v-model is two-way binding and will not be in a non-updated state. After I checked the monitoring in Devtools, I found that the corresponding object did have the specified attributes added.

So, I went to check the official documents and found the official explanation: How Vue.js tracks changes

Official explanation

When you pass an ordinary JavaScript object into a Vue instance as data option, Vue will traverse all properties of this object and use Object.defineProperty to convert all these properties into getter/setter. Object.defineProperty is a feature in ES5 that cannot be shimmed, which is why Vue does not support IE8 and lower browsers.

Each component instance corresponds to a watcher instance, which will record the "touched" data properties as dependencies during the component rendering process. Later, when the dependency's setter is triggered, the watcher will be notified, causing its associated component to re-render.

Notes on detecting changes

Due to JavaScript limitations, Vue cannot detect changes to arrays and objects. Still, there are ways to get around these limitations and keep them responsive.

For objects

Vue cannot detect the addition or removal of properties. Since Vue will perform getter/setter conversion on the property when initializing the instance, the property must exist on the data object in order for Vue to convert it to reactive. For example:

<span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;">var vm = new Vue({<br/>  data:{<br/>    a:1<br/>  }<br/>})<br/><br/>// `vm.a` 是响应式的<br/><br/>vm.b = 2<br/>// `vm.b` 是非响应式的<br/></code>

For already created instances, Vue does not allow dynamic addition of root-level reactive properties. However, you can add reactive properties to nested objects using the Vue.set(object, propertyName, value) method. For example, for:

<span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;">Vue.set(vm.someObject, <span class="hljs-string" style="color: #D69D85; line-height: 26px;">&#39;b&#39;</span>, 2)<br/></code>

You can also use the vm.$set instance method, which is also an alias for the global Vue.set method:

<span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;">this.<span class="hljs-variable" style="color: #BD63C5; line-height: 26px;">$set</span>(this.someObject,<span class="hljs-string" style="color: #D69D85; line-height: 26px;">&#39;b&#39;</span>,2)<br/></code>

Sometimes you may need to assign multiple new properties to existing objects, such as using Object.assign() or _.extend(). However, new properties added to the object in this way will not trigger an update. In this case, you should create a new object with the properties of the original object and the object you want to mix in.

<span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;">// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`<br/>this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })<br/></code>

This is a solution to object assignment. After adopting the official solution this.$set(object, key, value), the real-time update effect is indeed achieved. At the same time, for arrays and other situations, you can check the remaining official documents

Why is this happening?

As the official said "Due to JavaScript limitations, Vue cannot detect changes to arrays and objects." , but why What will happen?

借用 Segmentfault UKer 的回答：

ECMAScript中有两种属性：数据属性 和 访问器属性; 数据属性的描述符为：Configurable，Enumerable，Writable，Value； 访问器属性的描述符为：Configurable， Enumerable，set，get。

当我们使用new Vue(obj),其内部发生了大体如下代码的转换，即，将数据属性转换为了访问器属性

<span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">function</span> Vue(obj){<br/>    obj.data.keys().forEach((prop, index) => {<br/>      Object.defineProperty(obj.data, prop, {<br/>        <span class="hljs-function" style="color: #DCDCDC; line-height: 26px;"><span class="hljs-title" style="color: #DCDCDC; line-height: 26px;">set</span></span>(){<br/>          //可以在此处进行事件监听<br/>        },<br/>        <span class="hljs-function" style="color: #DCDCDC; line-height: 26px;"><span class="hljs-title" style="color: #DCDCDC; line-height: 26px;">get</span></span>(){<br/>    <br/>        }<br/>      })<br/>    })<br/>    <span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">return</span> obj;<br/> }<br/></code>

但是当我们后面再次使用普通的赋值，仅仅是赋值了一个数据属性的，这个属性是不会具有访问器属性的事件监听功能的。

至此，v-model 绑定数据不实时更新的问题方才得到了解决。