vue2视频教程系列第十九节-生命周期函数(1)

vue视频教程系列第十九节-生命周期函数-beforeCreate、created

什么是生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

需要注意的一点的是：

不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的Vue 实例，经常导致Uncaught TypeError: Cannot read property of undefined 或Uncaught TypeError: this.myMethod is not a function 之类的错误。

我们看下生命周期函数之beforeCreate和created的图示

我们利用一个小实例来理解一下：

首先，我们在data里创建一个数据：

data() {

        return {

          title: "Hello World!"

        }

},

接下来，我们创建一个beforeCreate:

created () {

      console.log(this.title)

}

看看控制台里是否能输出数据。我们会发现在控制台输出的是undefined。为什么呢？因为在这个过程的时候，data是没有被注入的，也就是还没有初始化呢，所以当然拿不到数据。

接下来我们改下，将beforeCreate改成created，看看结果，发现可以拿到数据。Why？这个阶段data已经初始化完毕，当然就可以拿到数据了！

所以，当我们想取data里的数据的时候，记得一定要在created里面取噢，通常调用ajax获取页面初始化所需的数据就是在这里噢。再早些时候是获取不到数据的！

欢迎关注微信前端交流群：duzhan2018