时间戳

首页 > 解决方案 > Vue 数据绑定在功能组件中不起作用

javascript - Vue 数据绑定在功能组件中不起作用

问题描述

单击按钮时，您会看到n变大，但 UI 仍然存在1

<script>
let n = 1
function add() {
  console.log(n)
  return ++n
}
export default {
  functional: true,
  render(h, ctx) {
    return (<div>
      <h1>{n}</h1>
      <button onClick={add}>click</button>
    </div>)
  }
}
</script>

标签： javascriptvue.jsvuejs2observable

解决方案

预期行为

这是功能组件的预期行为以及使它们起作用的东西。从文档：

...我们可以将组件标记为功能性的，这意味着它们是无状态的（没有反应性数据）

由于功能组件只是功能，因此它们的渲染成本要低得多。

解释

这意味着什么——并且原因n不是反应性的——n是不是observable也没有依赖管理/监视。这种缺乏依赖开销也是功能组件性能提升的原因。您以可观察性为代价获得速度，如果您不需要它，这是一个很好的权衡。如果这样做，就没有理由使用功能组件。

如何进行

因此，您可以继续简单地使用非功能性组件，或者，推理是否可以进一步细分您的功能性组件并将仅反应部分封装到非功能性子组件中。

其他想法

如果您手动将可观察性添加到您的功能组件，您将获得您想要的行为，尽管没有理由使用非功能组件来执行此操作。注意使用observable：

import Vue from 'vue';
let state = Vue.observable({n: 1});

function add() {
  console.log(state.n)
  return ++state.n
}

export default {
  functional: true,
  render(h, ctx) {
    return (<div>
      <h1>{state.n}</h1>
      <button onClick={add}>click</button>
    </div>)
  }
}

（注意：你也可以render在普通组件中使用函数。我这样说是为了防止你误解函数需要函数组件render。）

推荐阅读