The front end of the life cycle basis -Vue

Chapter 10 Vue life cycle

Vue each instance when it is created to go through a series of initialization process - for example, the need for data monitoring, compiling templates, examples will be mounted to the DOM and DOM updates when the data changes. Some will also run in this process is called the life cycle of the hook function, which gives the user the opportunity to add your own code at different stages.

Such createdhooks may be used to execute code after one instance is created:

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

There are also some other hook is invoked at different stages of the life cycle of the instances, such as mounted, updatedand destroyed. Lifecycle hook thiscontext points to call its Vue instance.

The following figure shows the life cycle instance. You do not immediately understand everything, but as you continue to learn and use, its reference value will be higher.

<div id="app">
    {{ msg }}
    <input type="text" ref="txt" v-model="msg">
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: 'hello vue',
            dataList: []
        },
        // 在vue对象初始化过程中执行
        beforeCreate(){
            console.log('beforeCreate');
            console.log(this.msg);// undefined
        },
        // 在vue对象初始化完成后执行
        created() {
            console.log('created');
            console.log(this.msg);//hello vue
        }
        // ……
    });
</script>