Vue 2中如何临时禁用组件的computed属性更新？

核心思路是覆写框架默认的组件更新判定逻辑，引入自定义布尔标识位拦截更新请求，仅标识位为真时才执行属性比对、触发更新。 #

React 实现 #

函数组件 #

配合 React.memo 的第二个自定义比较参数实现：

import React, { useState } from 'react'

// 子组件定义
const StaticChild = React.memo(
  (props) => {
    // 组件原有渲染逻辑
    return <div className="static-content">{props.renderContent}</div>
  },
  (prevProps, nextProps) => {
    // 标识位为false时直接判定props无变化，跳过更新
    if (!nextProps.allowUpdate) return true
    // 标识位为true时正常比对需要响应的属性
    return prevProps.renderContent === nextProps.renderContent
  }
)

// 父组件调用示例
function Parent() {
  const [parentState, setParentState] = useState(0)
  const [allowChildUpdate, setAllowChildUpdate] = useState(false)
  const [childContent, setChildContent] = useState('初始内容')

  return (
    <div>
      <button onClick={() => setParentState(prev => prev + 1)}>父组件状态更新</button>
      <button onClick={() => {
        setChildContent('更新后的内容')
        setAllowChildUpdate(true)
        // 单次更新完成后重置标识位
        setTimeout(() => setAllowChildUpdate(false), 0)
      }}>更新子组件内容</button>
      <StaticChild allowUpdate={allowChildUpdate} renderContent={childContent} />
    </div>
  )
}

类组件 #

通过 shouldComponentUpdate 生命周期实现：

class StaticChild extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (!nextProps.allowUpdate) return false
    return this.props.renderContent !== nextProps.renderContent
  }

  render() {
    return <div className="static-content">{this.props.renderContent}</div>
  }
}

Vue 实现 #

Vue3 #

通过 onShouldUpdate 生命周期钩子拦截更新：

<!-- 子组件 StaticChild.vue -->
<script setup>
import { onShouldUpdate } from 'vue'
const props = defineProps(['allowUpdate', 'renderContent'])

onShouldUpdate((oldProps, newProps) => {
  if (!newProps.allowUpdate) return false
  return oldProps.renderContent !== newProps.renderContent
})
</script>

<template>
  <div class="static-content">{{ renderContent }}</div>
</template>

Vue2 #

通过 beforeUpdate 钩子拦截：

// 子组件定义
export default {
  props: ['allowUpdate', 'renderContent'],
  beforeUpdate() {
    if (!this.allowUpdate) return false
  },
  render(h) {
    return h('div', { class: 'static-content' }, this.renderContent)
  }
}

注意事项 #

• 仅比对子组件渲染依赖的属性，避免无关props变更触发不必要的更新
• 单次子组件更新完成后及时重置标识位为false，避免后续父组件更新连带触发子组件重渲染
• 该逻辑仅拦截由props变更触发的更新，子组件内部自身状态变更的更新不受影响

内容的提问来源于stack exchange，提问作者amokrunnr