如何在 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" />
因为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 插槽,这将使您能够使用多个数据以上是关于如何在 vue.js 组件属性中禁用数据观察的主要内容,如果未能解决你的问题,请参考以下文章
Vue.js - 如何访问子组件的计算属性(Vuetify 数据表)
使用 Vuex 在 Vue.js 中的计算属性上未从观察者更新数据变量