Vue.js新手遇数据更新异常：需特定赋值触发Watcher？

Hey there! Great question—this is one of the most common "gotchas" when you're getting started with Vue.js, so let's unpack what's happening here.

First, let's clarify the core of Vue's reactivity system: it relies on assignment operations to trigger Watchers and update the DOM. That means whether you're working with objects or primitive values (like numbers, strings), you need to use an assignment (like variable = value or this.variable++) to let Vue know something changed.

Why your object-based code worked #

When you were using an object (say, something like data() { return { counter: { value: 0 } } }), every time you updated this.counter.value++, Vue could detect that change. Here's why:

• Vue automatically sets up getters and setters for every property in your reactive objects (in Vue 2, this uses Object.defineProperty; in Vue 3, it uses Proxies).
• When you assign a new value to an existing object property (even with ++, which is just shorthand for counter.value = counter.value + 1), the setter fires, telling Vue's Watchers to trigger a DOM update.

Why removing the object broke things #

If your updated code stopped working, it's almost certainly because you weren't following Vue's reactivity rules for primitive values. Common mistakes here include:

• Not declaring the variable as reactive: If you created a plain variable (like let count = 0) instead of putting it in data() (Options API) or wrapping it in ref() (Composition API), Vue has no way to track its changes.
• Forgetting to use this (Options API): If you tried to update count instead of this.count, you were modifying a local variable instead of the reactive one in your Vue instance.
• Overlooking .value (Composition API): If you used ref() but forgot to access/update via .value (like count++ instead of count.value++), Vue can't pick up the change.

So, do you need variable = "value" style assignments? #

Short answer: Yes, in one form or another. Vue's reactivity system is built around detecting when reactive properties are assigned new values. That includes:

• Direct assignments: this.count = 5 or count.value = 5 (Composition API with ref)
• Shorthand assignments: this.count++, this.count += 1
• Object property assignments: this.user.name = "Alice"

Fixes to get your non-object code working #

Depending on which Vue API you're using:

• Options API: Make sure your variable is in the data() function, and always update it via this:

  data() {
    return {
      count: 0
    };
  },
  mounted() {
    setInterval(() => {
      this.count++; // This triggers the Watcher!
    }, 1000);
  }
  

• Composition API: Wrap primitive values in ref() (since reactive works best for objects/arrays):

  import { ref, onMounted } from 'vue';
  
  export default {
    setup() {
      const count = ref(0);
      
      onMounted(() => {
        setInterval(() => {
          count.value++; // Need .value here to trigger the update
        }, 1000);
      });
      
      return { count };
    }
  }
  

The key takeaway is that Vue can't detect changes to variables it doesn't know about, and it relies on assignment to signal that a reactive value has changed. Stick to these rules, and your updates will work consistently whether you're using objects or primitives!

内容的提问来源于stack exchange，提问作者Martin Kováčik