Correct Posture of Vue Adding Responsive Attributes



By default, the reader of this article understands the simple underlying principle of Vue, and the unfamiliar reader can read it first:

  • Vue Response Principle You Don’t Know
  • Viewing Observer Mode from Vue Source Code

The Vue version used in this article is 2.0+. See here for an online example. By the way, the key code is also posted below.

  <div class="hello">
    <button @click="inputvalue.aaaa = 'aaaa is here'">show aaaa</button>
    <button @click="$forceUpdate()">forceupdate</button> {{inputvalue.aaaa}}
    <br />
    cccc {{inputvalue.cccc}}
    <input v-model="inputvalue.cccc" placeholder="with v-model" />
      @input="inputvalue.cccc = $"
      placeholder="with @input"
    <br />
    bbbb {{inputvalue.bbbb}}
    <input v-model="inputvalue.bbbb" placeholder="with v-model" />
      @input="inputvalue.bbbb = $"
      placeholder="with @input"

  export default {
    data() {
      return {
        inputvalue: {
          bbbb: '',

Raise questions

Recent projects have been exposed to a large number of dynamic new data, and feel it is necessary to find out when Vue will update the view and whether the view modification data will be reflected in the data model.

So I wrote a few simple examples as a comparison, combined with the knowledge of Vue principle that I studied a year ago, but now I have forgotten almost, and solved this problem.——

When is it safe to add object attributes dynamically (in other words, to ensure that the data is responsive)?

What is not a direct assignment?

First, explain the example.inputvalue.aaaaQuestions not shown.

This starts with Vue’s response principle. When initialized, Vue scans the data recursively and sets setter and getter.

The function of getter is to record the current caller when the data is readThe caller is the “subscriber” of the data.

If a view uses some data, it will be called when processing a page and become a subscriber to that data.

The function of setter is to remind his subscribers that the data has been updated when it is assigned.Subscribers then know to run corresponding update operations, such as view updates, watch functions.

Setter is often referred to as hijacking, and it feels like a good image. Here’s a simple way to use it.hijackIt refers to this act.

Since data is hijacked at initialization, you suddenly define itthis.inputvalue.aaaa = 'aaaa is here'Obviously, Vue will be caught off guard.Even if there are subscribers, this attribute is not aware of the fact that he has subscribers because he has not reached the “hijacking” stage.

In fact, printing out the data can simply determine whether the data has been hijacked. As shown below, BB has not been hijacked, AA and CC have been hijacked.

Correct Posture of Vue Adding Responsive Attributes

What are the coping strategies?

The simplest way is to write directly in data, that is, what attributes the page uses must be written on. For example, forinputvalue.aaaaAdd the aaaaaa attribute directly to the data.

But when you think about it, it’s probably not a “dynamic” addition.

Using set

Add an attribute to the responding object and make sure that the new attribute is also responsive and triggers view updates. It must be used to add new attributes to responding objects because Vue cannot detect common new attributes (such as this. myObject. newProperty =’hi’).

Vue.setOr Vue instance$setIt’s the same. In short, trigger a hijack manually, and then trigger the view to re-render when it’s updated!

However, in fact, set will fail in one case, which will be mentioned later.

Use forceUpdate

This method is a curve to save the nation.

If you don’t need bi-directional binding, you can use it when dynamically adding new properties$forceUpdate()。 This function acts as its name, forcing updates to re-render.

As mentioned above,Although you set the new data without notifying the page to re-render, the data has changed after all.So you only need to force the view to be updated to see the effect of the data modification.

Vue unidirectional binding

  @input=" = $"

You may never hear of Vue one-way bindings, but doing so is also a one-way bindings ____________.

When your input actually changesmyValue.propertyThe value of themyValue.propertyUpdate. When it really needs to be updatedforceUpdateThat’s all right.


If there are objects in the array, as long as a single object conforms to the above operation, there is no special need to pay attention to.

But the old tune repeats, the array update method still needs attention. You can trigger the update through the whole array reassignment and the wrapped methods of push (), pop (), shift (), unshift (), splice (), sort (), reverse ().

Exotic flowers


Contrast the aboveccccTwo input boxes:

<input v-model="inputvalue.cccc" placeholder="with v-model" />
  @input="inputvalue.cccc = $"
  placeholder="with @input"

Two operations are performed:

  1. Enter first in the with V-model box and then in the [email protected] box
  2. Enter first in the [email protected] box and then in the with V-model box

Operation 1, everything is normal; Operation 2, can not be updated.This proves that the popular saying that V-model is @input and: value grammatical sugar is wrong at least now (actually, I have tried several versions down, the two operations are inconsistent and confusing, but this is not the key point, let’s not tangle).

So what did V-model do?

It’s easy to understand the situation mentioned above after being pointed out by the big guys on stack overflow. There are two main points that make this distinction: one is the stack overflow, the other is the stack overflow, the stack overflow, and the other is the stack overflow.

  1. Set is triggered automatically when V-model processes object attributes-> Relevant source code
  2. Set doesn’t make it “responsive” again to existing attributes-> Relevant source code

So for operation one, V-model helps you set the data, and everything is normal; for operation two, @input first adds the attributes directly and statically, and when V-model arrives, set will not hijack the existing attributes.

This leads to a need for attention.If you assign a value directly first, you can’t hijack this property even if you use set again.This poor, weak attribute can no longer be a responsive one.

Reference link

  • Official Document – set
  • What did V-model do?