Vue 3 Options API：能否将生命周期钩子数据传递给provide？

问题原因 #

provide()函数在组件实例初始化阶段执行，早于created钩子，此时table_columns还是初始的null。且provide()仅执行一次，传递的是当时的变量值而非响应式引用，后续对table_columns的重新赋值无法同步到已提供的值中。

解决办法 #

方案一：用响应式对象包裹数据（推荐，支持自动响应式更新）

通过对象容器保持引用稳定，后续仅更新容器内部属性，确保响应式同步：

data() {
  return {
    table_columns: { data: null } // 用对象作为容器，引用始终不变
  }
},

provide() {
  return {
    table_columns_data: this.table_columns // 提供容器对象的引用
  }
},

created(){
  this.table_columns.data = Object.entries(this.table_data.fields).filter(field => {
    return field[1].is_column;
  });
}

子组件注入后，通过table_columns_data.data访问最新值，后续数据变化会自动同步。

方案二：动态调用this.$provide更新值

在created钩子赋值完成后，手动调用this.$provide覆盖初始值：

data() {
  return {
    table_columns: null
  }
},

provide() {
  return {
    table_columns_data: this.table_columns // 初始提供null
  }
},

created(){
  this.table_columns = Object.entries(this.table_data.fields).filter(field => {
    return field[1].is_column;
  });
  // 动态更新provide的值
  this.$provide('table_columns_data', this.table_columns);
}

注意：此方式仅在调用$provide时更新一次，后续table_columns再变化需重新调用$provide才能同步。

方案三：使用computed属性提供响应式值

借助computed的响应式特性，让provide的值自动跟随table_columns变化：

data() {
  return {
    table_columns: null
  }
},

computed: {
    providedTableColumns() {
        return this.table_columns;
    }
},

provide() {
  return {
    table_columns_data: this.providedTableColumns // 提供computed响应式属性
  }
},

created(){
  this.table_columns = Object.entries(this.table_data.fields).filter(field => {
    return field[1].is_column;
  });
}

子组件注入后直接使用table_columns_data即可，无需额外处理，数据变化会自动同步。

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