创建一个实例
每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的:
数据与方法
当Vue实例按照上述方式被创建时,Vue的响应式系统中就加入了data对象,在使用中可以直接通过属性的调用方式进行使用,并且当这些属性值发生变化时,视图层会实时响应,自动匹配更新为新的值。
响应式:当实例被创建时data中存在的属性改变时,视图才会进行重新渲染。
所以,在创建Vue实例之外的地方添加新的属性时,这些属性并非响应式,任何改动都不会触发视图的重新渲染。所以,如果我们需要用到一些值,哪怕暂时性的不展示,也最好在创建实例时令它为空或null,设置一些相应类型的初始值,比如:
例外: Object.freeze() 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,这也意味着响应系统无法再追踪变化。如下:
除了数据属性,Vue实例还暴露了一些有用的实例属性与方法,他们都带有前缀$,以便于用户定义的属性区分,例如:
在官网中可以查看更详细具体的API教程。
实例生命周期钩子(官网内容,自我学习并使用)
每个Vue实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听watch、编译模版、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给予了用户在不同阶段添加自己代码的机会。
比如created钩子可以用来在一个实例被创建之后执行代码:
也有其他的钩子,在生命周期的不同阶段被调用,这个在后面做介绍。
生命周期钩子的this上下文指向调用它的Vue实例。
警告⚠️:不要再选项属性或回调上使用箭头函数(ES6)。因为箭头函数是和父级上下文绑定在一起的,在箭头函数中使用this得不到你想要的结果,经常导致类型错。
生命周期
下面介绍实例的生命周期,这里先做个内容介绍,不需要一下子就懂,在后面不断深入的学习和使用中,慢慢剖析和理解,理论与实践相印证,这些价值会在未来体现出来。
生命周期是个非常重要的概念,要好好的理解和使用,同样的过程,在React中也是类似的。
本人也是前端爱好者,最近在看VUE的官网教程,内容中有很多是官网的指引,这些东西无法避免,我觉得官网的内容很好,我自己总结和实践去阐述自己的理解,并用自己的实战代码为大家展示出来。继而配合官网的章节教程,自己的一些实践也可以按照合理的学习路线走下去,希望知识不论在哪里都可以被合理地接受。
有意见和建议的朋友可以私信我,我会及时处理。