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

Posted

技术标签:

【中文标题】如何在 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" />

因为valueformat 被定义为属性,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】:

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

它会做你想做的。

【讨论】:

不幸的是,这不起作用:您只是添加了对动态属性的引用,即使您删除了this.dinamicProp,它仍然会被观察到。 使用 slot 并在 slot 中传递静态数据? 插槽选项可​​用于单个和纯文本属性。如果我需要传递几个属性并且其中一些可能是对象,我将不得不解析复杂的文本,这将违背最初的目的。 作为自定义数据传递。 另外,您可以使用 NAMED 插槽,这将使您能够使用多个数据

以上是关于如何在 vue.js 组件属性中禁用数据观察的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js - 如何访问子组件的计算属性(Vuetify 数据表)

使用 Vuex 在 Vue.js 中的计算属性上未从观察者更新数据变量

如何在生产 Vue.js 中禁用源映射或调试模式 - Webpack

如何在 Vue.js 中保留自定义组件标签名称

如何在 Vue.js 中声明反应属性

如何调用具有不同数据属性的组件? (vue.js 2)