vue中如何正确的使用watch？

Question

在组件传参的时候使用Object.assign，子组件使用watch监听传递过来的参数，参数变化时执行相应事件，并设置了immediate：true,但是现在在页面初次加载的时候事件会执行两次，不知道是什么导致的。

// 父组件
<new-line-charts
  :_id="'singleStage'"
  :text="`SINGLE STAGE`"
  :url="'/xxx'"
  :params="Object.assign({}, params, {'stageType': 'SINGLE'})"
  :styles="styles"></new-line-charts>

data() {
    return {
        params: {
            a: 2
            b: 1
        }
    }
}

// 子组件
watch: {
    'params': {
      handler() {
        this.getData() // 这里执行了两次
      },
      deep: true,
      immediate: true
    }
}

解决办法是设置immediate: false但是不知道为什么会导致第一次执行两次

Answer 1

• immediate:true 立即执行了一次 watch handler
• 随后又触发了一次 render，render 里会执行 Object.assign()， 而 Object.assign() 生成的是一个新对象（地址不一样），watch 检测到了改变，所以 watch handler 又执行了一次

以上就触发了两次 watch handler。

Answer 2

immediate:true,代表watch里面声明了之后会立马执行handler里面的函数
之后watch监听到params改变，再执行一次。 总共执行两次