如何在 vue.js 组件属性中禁用数据观察

Posted 2023-02-23

【中文标题】如何在 vue.js 组件属性中禁用数据观察

【英文标题】：How to disable data observation in vue.js component property

【发布时间】：2017-06-15 11:33:25

【问题描述】：

我想创建一个 Vue.js 组件，它从其父组件接收属性，例如：

<table-cell :value="foo" format="date" />

因为value 和format 被定义为属性，Vue 会自动将观察者注册到它们的值。一般来说这很好，但对于我的用例，我肯定知道这些值不会改变，因此不需要观察它们。

鉴于我的表格单元组件可以在一个具有 1,000 行和 10 列的表格中，这两个属性将创建 20,000 个观察者，我想避免所有这些开销（而我真正的表格单元组件有更复杂属性）。

有什么方法可以禁止组件属性被观察以避免浪费 CPU 和内存资源？

更新： 我找到了一个使用 functional 组件方法的低级解决方案，在此解释：https://vuejs.org/v2/guide/render-function.html#Functional-Components

我已经用这个 JSFiddle 对其进行了测试：https://jsfiddle.net/50wL7mdz/12143/

我想知道这是否是正确的方法......

【参考方案1】：

用我认为像<your-component :data-value='foo' :data-format='date'>这样的自定义数据传递它

它会做你想做的。

【讨论】：

不幸的是，这不起作用：您只是添加了对动态属性的引用，即使您删除了this.dinamicProp，它仍然会被观察到。

使用 slot 并在 slot 中传递静态数据？

插槽选项可​​用于单个和纯文本属性。如果我需要传递几个属性并且其中一些可能是对象，我将不得不解析复杂的文本，这将违背最初的目的。

作为自定义数据传递。

另外，您可以使用 NAMED 插槽，这将使您能够使用多个数据