Question

点击按钮时，您会看到n越来越大，但用户界面仍然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>

Answer 1

预期行为

这是功能组件的预期行为以及使它们起作用的原因。来自docs：

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

由于功能组件仅仅是功能，因此它们的呈现成本要便宜得多。

说明

这意味着-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函数需要功能组件。）

vue.js数据绑定在功能组件中不起作用

1 个答案: