vue箭头函数_前端学习计划之VUE学习（二）

创建一个实例

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的：

数据与方法

当Vue实例按照上述方式被创建时，Vue的响应式系统中就加入了data对象，在使用中可以直接通过属性的调用方式进行使用，并且当这些属性值发生变化时，视图层会实时响应，自动匹配更新为新的值。

响应式：当实例被创建时data中存在的属性改变时，视图才会进行重新渲染。

所以，在创建Vue实例之外的地方添加新的属性时，这些属性并非响应式，任何改动都不会触发视图的重新渲染。所以，如果我们需要用到一些值，哪怕暂时性的不展示，也最好在创建实例时令它为空或null，设置一些相应类型的初始值，比如：

例外： Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，这也意味着响应系统无法再追踪变化。如下：

除了数据属性，Vue实例还暴露了一些有用的实例属性与方法，他们都带有前缀$，以便于用户定义的属性区分，例如：

在官网中可以查看更详细具体的API教程。

实例生命周期钩子(官网内容，自我学习并使用)

每个Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听watch、编译模版、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给予了用户在不同阶段添加自己代码的机会。

比如created钩子可以用来在一个实例被创建之后执行代码：

也有其他的钩子，在生命周期的不同阶段被调用，这个在后面做介绍。

生命周期钩子的this上下文指向调用它的Vue实例。

警告⚠️：不要再选项属性或回调上使用箭头函数(ES6)。因为箭头函数是和父级上下文绑定在一起的，在箭头函数中使用this得不到你想要的结果，经常导致类型错。

生命周期

下面介绍实例的生命周期，这里先做个内容介绍，不需要一下子就懂，在后面不断深入的学习和使用中，慢慢剖析和理解，理论与实践相印证，这些价值会在未来体现出来。

生命周期是个非常重要的概念，要好好的理解和使用，同样的过程，在React中也是类似的。

本人也是前端爱好者，最近在看VUE的官网教程，内容中有很多是官网的指引，这些东西无法避免，我觉得官网的内容很好，我自己总结和实践去阐述自己的理解，并用自己的实战代码为大家展示出来。继而配合官网的章节教程，自己的一些实践也可以按照合理的学习路线走下去，希望知识不论在哪里都可以被合理地接受。

有意见和建议的朋友可以私信我，我会及时处理。