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

阅读 273
评论
    8 个回答

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

      • 144

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

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

          • 15.5k

          的确是能复现的

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

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

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

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

              • 795

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

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

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

                  该答案已被忽略,原因:无意义的内容 - 赞、顶、同问等毫无意义的内容

                    撰写回答

                    登录后参与交流、获取后续更新提醒