vue.js - 为什么 vue watch 只触发一次？

Question

为什么watch只触发一次？如下代码，当点击'sync'按钮时，id和text同时改变，但只有id() watch触发，需要再次点击'sync'按钮才能触发text() watch，为什么？

Vue.component('test-bar', {
  props: ['id', 'text'],
  template: `
      <div>
        <div>child: {{id}} {{text}}</div>
        <button @click="on_click">sync</button>
      </div>
      `,
  watch: {
    id() {
      this.$emit('update:id', this.id)
      // this.$emit('update:text', this.text) // !!! notice here. only when i added this line will trigger text() watch
    },
    text() {
      this.$emit('update:text', this.text)
    }
  },
  methods: {
    on_click() {
      this.id = 1
      this.text = 'child text'
    }
  }
})

new Vue({
  el: "#app",
  data: {
    id: 0,
    text: 'parent text',
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <test-bar :id.sync='id' :text.sync='text'></test-bar>
  <div>parent: {{id}} {{text}}</div>
</div>

Answer 1

你不应该更新 props。当试图更新一个 Prop 时，Vue 会抛出一个错误并且你的流程会中断。所以在这行this.id = 1之后会抛出异常，下一行不会执行。正确的方法是使用 computed property带有 getter 和 setter。

类似的东西:

Vue.component('test-bar', {
  props: ['id', 'text'],
  template: `
  <div>
    <div>child: {{childId}} {{childText}}</div>
    <button @click="on_click">sync</button>
  </div>
  `,
  computed: {
    childId: {
      get () {
        return this.id
      },
      set (value) {
        this.$emit('update:id', value)
      }
    },
    childText: {
      get () {
        return this.text
      },
      set (value) {
        this.$emit('update:text', value)
      }
    }
  },
  methods: {
    on_click() {
      this.childId = 1
      this.childText = 'child text'
    }
  }
})

这是一个正在运行的 jsfiddle example

更简单的方法是只发出事件而不观察变化

on_click() {
  this.$emit('update:id', 1)
  this.$emit('update:text', 'child text')
}

JSfiddle example