【Vue面面观】Vue组件data选项为什么必须是个函数而Vue的根实例则没有此限制?

Vue组件data选项为什么必须是个函数而Vue的根实例则没有此限制?

源码追溯:src\core\instance\state.js--initData()

函数每次执行都会返回全新data对象实例

结论

Vue组件可能存在多个实例,如果使用对象形式定义data,则会导致它们共用一个data对象,那么状态变更将会影响所有组件实例,这是不合理的;
采用函数形式定义,在initData时会将其作为工厂函数返回全新data对象,有效规避多实例之间状态污染问题。
而在Vue根实例创建过程中则不存在该限制,也是因为根实例只能有一个,不需要担心这种情况。

猜你喜欢

转载自www.cnblogs.com/danker/p/12965734.html
今日推荐