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

问题

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时间

阅读 252
评论
    8 个回答

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

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

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