vue中点击事件，不仅会触发自己的回调，还会触发其他方法的执行

Question

问题

vue中点击事件，不仅会触发自己的回调，还会触发其他方法的执行
(预期是只触发自己的回调)

代码

...
<p>方法时间: {{ getTime() }}</p>
<button @click="setFullName">setFullName</button>
...

methods:{
    getTime () {
      console.log('触发method时间')
      return Date.now()
    },
    setFullName () {
      console.log('触发name改变')
      this.fullName = 'John Doe'
    }
}

结果

点击setFullName按钮后，运行结果:
console: 触发name改变
console: 触发methond时间

Answer 1

查了官网说，vue2.x中只要组件使用的众多状态中有一个发生变化，那么整个组件就要重新渲染
在这里vue做了优化：如果组件只有一个节点发送了变化，如果直接重新渲染整个组件的所有节点，会造成很大的性能浪费，因此vue使用了vnode，并对其进行缓存，在发生变化时，将上一次缓存的vnode和当前新创建的vnode进行对比，只更新发生变化的节点

Answer 2

的确是能复现的。

至于问题是 vue 的渲染机制导致的，解决方案就是划分组件。

Answer 3

因为你使用的是函数 getTime()，当组件被重新渲染的时候，这里的值就要重新取一次，所以函数就要重新执行一次。解决方案有两种：

1. 使用 computed，缓存计算结果
2. 提取组件，避免整个组件被渲染

这里如果不注意的话也会有问题，比如你的函数计算量很大，可能会拖慢整个渲染过程。

Answer 4

代码不够全,如果是看得到的代码,你说的情况绝对不可能发生,你需要贴出更多的代码

Answer 5

用你的demo试了半天没还原场景，应该是按楼上的说法，你缺少更关键的代码展示，这部分导致视图重新刷新。

Answer 6

是由于页面更新导致getTime重新执行了，你需要 computed 缓存下来结果

Answer 7

是不是父元素监听到冒泡了？

Answer 8

首先getTime你在你点击之前就已经触发了，你在页面上getTime()引用就直接回调了打印出了触发methond时间，你点击按钮只触发了setFullName方法得回调，并没有触发getTime的，你在点击事件之前可以先看一下输出，然后再清空console，再点点击事件看一下输出就知道了