属性响应
在前面的 属性绑定 中我们介绍了简单的属性响应机制,即如何将组件的属性值渲染到文本展示上。
ofa.js 不仅支持对基本属性值的响应,还支持对多层嵌套对象内部属性值的响应式渲染。
count: {{count}}
count2: {{obj.count2}}
所有绑定到 ofa.js 实例对象上的数据都会自动转换为响应式数据。响应式数据仅支持字符串、数字、布尔值、数组、对象等基本数据类型。对于函数、类实例等复杂数据类型,则需要作为非响应式属性进行存储,这些属性的变化不会触发组件的重新渲染。
非响应式数据
有时我们需要存储一些不需要响应式更新的数据,例如 Promise 实例、正则表达式对象或其他复杂对象,这时就需要使用非响应式属性。这些属性的变化不会触发组件的重新渲染,适用于存储不需要视图联动的数据。
非响应式属性的命名通常在属性名前添加下划线 _ 作为前缀,以示与响应式属性的区分。
count: {{count}}
count2: {{_count2}}
在点击Green增加按钮时,虽然 _count2 的数值实际上已经增加了,但由于它是非响应式属性,不会触发视图更新,因此界面上的显示并未改变。当点击Blue增加按钮时,由于 count 是响应式属性,会触发整个组件的重新渲染,这时才会同步更新Green的显示内容。
非响应式的对象数据,性能会比响应式的对象数据性能更好,因为非响应式数据不会触发组件的重新渲染。