如果你已经使用 Vue.js 了很长一段时间,甚至读过 Hello World] 示例,你可能想知道为什么地球上的属性如数据需要函数,或者为什么一切都被宣布为单独的块,但在运行时安装到组件上。
核心概念
一方面,Vue组件大多是静态的! 是的! 一个组件声明,包括其方法,属性定义和计算属性,在应用程序中的该组件的所有实例之间共享。
原因:保存记忆力
许多框架,如 Angular 2 或 (有时) React,使组件的每个实例成为一个单独的对象。 Angular 2 是每个组件是类的实例的极端情况,这意味着每个组件所需的一切都是对每个组件的初始化。
Vue 通过将数据作为返回对象的函数来避免这种陷阱,允许单独的组件具有独立的内部状态,而无需完全重新实例整个组件。
原因:静态成分
视图2完全拥抱了快速、轻量级的静态组件的想法,这些组件没有内部状态或数据,通常在外部状态的变化中进行一次或仅进行一次渲染。
若要利用此类功能,您可以在模板中使用 v-once 来只返回一个属性一次,或声明组件在组件定义中具有功能性: true。
潜在的混乱
人们经常注意到,虽然您在数据中声明组件状态,计算属性在计算中,方法在方法中,但他们都访问了 this.thing而不是 this.type.thing(例如, this.myMethod()而不是 this.methods.myMethod()。
再次,这是因为您的组件定义实际上只是一个定义. 您运行的方法的实际组件是不同的. 视图需要这些计算,方法,特性和数据定义,以便知道如何组装组件,但为了方便,它将它们绘制到组件的根部位,而不是这些属性。
<$>[注] 作为侧注,您实际上可以在运行时访问 this.$data.prop, this.$methods.method(),但不建议这样做。
希望这篇文章能帮助你解决这个问题:)