Vue2-组件化基础、生命周期和钩子函数

1、Vue2-组件化基础

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相
同的部分。
例如可能会有相同的头部导航。
但是如果每个页面都自开发，这无疑增加了我们开发的成本。所以我们会把页面
的不同分拆分成立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
在vue里，所有的vue实例都是组件。

写一个统计点了多少次的功能:

我们要经常使用这个功能，就可以将他抽取为一个组件：

全局声明注册一个组件

通过Vue的component方法来注册组件：

template：模板

以前是通过el来挂载div，现在是直接注册为组件，实现复用。

组件其实也是一个vue实例，因此它在定义时也会接收：data、methods、生命周期函等。

不同的是组件不会与页面的元素綁定，否则就无法复用了，因此没有el属性。
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了
data必须是一个函数，不再是一个对象。

局部声明注册一个组件

实例里面需要用到哪些组件，都需要写在components:{}里面，结构是k:v (定义名:组件名)，然后在要用的地方<定义名>使用即可。

2、生命周期和钩子函数

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

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

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

生命周期图示

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

案例：