创建一个Vue实例

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

var vm = new Vue({
          //实例的数据、方法
        })

2.我们也可以通过创建组件的方法创建一个实例：

 Vue.component('todo-item', {
             //实例的数据、方法
        })

一个vue的程序就是由多个组件构成的，也就是说是由多个Vue实例构成的。

Vue实例的生命周期函数

Vue生命周期

• new Vue（）创建一个Vue实例的对象
  生命周期函数就是Vue实例在某一个时间点会自动执行的函数
• Init Events and Lifecycle：
  只初始化了空的Vue实例，这个对象只有一些默认的事件和默认的生命周期的内容（最基础的初始化）
• beforeCreate：
  在基础的初始化完成后，Vue会自动执行此函数，此时data和methods中的数据均未初始化

var vm = new Vue({
            el:'#app',
            beforeCreate:function () {
                console.log("beforeCreate");
            }
        })

控制台查看beforeCreate函数

• Init injections & reactivity：
  处理外部的注入，包括双向绑定，处理完成后代表Vue的基本的初始化就都完成了，data和methods数据的初始化已经完成
• created：
  Vue实例初始化完成后Vue会自动执行此函数，这是最早能够调用data和methods数据的函数。

var vm = new Vue({
            el:'#app',
            beforeCreate:function () {
                console.log("beforeCreate");
            },
            created:function () {
                console.log("created");
            }
        })

控制台查看created

• Has 'el' option? :
  条件选项，判断实例里是否有el选项
  若存在el，实例将立即进入编译过程；若不存在el，需要显式调用 vm.$mount() 手动开启编译。

<div id="app">{{message}}</div>
//使用el挂载
 <script>
        var vm = new Vue({
            el:'#app',
            data:{
                message:'test'
            }
        })
</script>
//使用$mount()开启手动编译
 <script>
        var vm = new Vue({
            data:{
                message:'test'
            }
        }).$mount('#app')
</script>

页面展示

• Has 'template' option?
  条件选项，判断实例里是否有template选项
  若没有，Compile el's outerHTML as template，将el挂载点的HTML作为template进行页面渲染；
  若有，Compile template into render function，使用实例里面的template进行页面渲染

//使用el挂载点的HTML，即 <div id="app">{{message}}</div>作为模板
 <div id="app">{{message}}</div>
 <script>
        var vm = new Vue({
            el:'#app',
            data:{
                message:'Hello Word'
            }
        })
 </script>
//使用实例中的template
<div id="app"></div>
 <script>
        var vm = new Vue({
            el:'#app',
            template:'<div>{{message}}</div>',
            data:{
                message:'Hello Word'
            }
        })
 </script>

两种方式的页面展示相同

• beforeMount：
  页面渲染完成后，数据即将挂载到页面上之前，Vue自动执行此函数

var vm = new Vue({
            data:{
                message:'Hello Word'
            },
            beforeCreate:function () {
                console.log("beforeCreate");
            },
            created:function () {
                console.log("created");
            },
            beforeMount:function () {
                console.log("beforeMount");
            }
        })

控制台查看beforeMount

• Create vm.$el and replace "el" with it:页面挂载
• Mounted：页面挂载之后执行的方法

 <div id="app"></div>
    <script>
        var vm = new Vue({
            el:'#app',
            template:'<div>{{message}}</div>',
            data:{
                message:'Hello Word'
            },
            beforeCreate:function () {
                console.log("beforeCreate");
            },
            created:function () {
                console.log("created");
            },
            beforeMount:function () {
                console.log(this.$el);  //显示的是未挂载之前的页面渲染
                console.log("beforeMount");
            },
            mounted:function () {
                console.log(this.$el);//显示的是挂在后的页面渲染
                console.log("mounted");
            }
        })
    </script>

Mounted中的方法是在页面挂载后执行

• beforeDestroy和destroyed：
  触发时机：when vm.$destoroy() is called,即当Vue实例调用销毁方法vm.$destroy()后被触发，beforeDestroy函数在实例即将被销毁时调用，destroyed函数在Vue实例销毁后调用

<div id="app"></div>
    <script>
        var vm = new Vue({
            el:'#app',
            template:'<div>{{message}}</div>',
            data:{
                message:'Hello Word'
            },
            beforeCreate:function () {
                console.log("beforeCreate");
            },
            created:function () {
                console.log("created");
            },
            beforeMount:function () {
                console.log(this.$el);
                console.log("beforeMount");
            },
            mounted:function () {
                console.log(this.$el);
                console.log("mounted");
            },
            beforeDestroy:function () {
                console.log("beforeDestroy");
            },
            destroyed:function () {
                console.log("destroyed");
            }
        })
    </script>

控制台不显示beforeDestroy和destroyed中调用方法
控制台不显示beforeDestroy和destroyed中调用的方法，应为Vue实例创建后，并未调用vm.$destroy()对实例进行销毁，而beforeDestroy函数是在Vue实例即将被销毁时执行，destroyed函数是在Vue实例被销毁后执行，此时我们在控制台将Vue实例销毁，就会先执行beforeDestroy函数后执行destroyed函数
销毁Vue实例方法 vm.$destroy()
销毁Vue实例后的控制台显示

• beforeUpdate和updated:
  触发时机：when data changes，即当数据发生变化后进行页面渲染之前执行beforeUpdate，在页面渲染之后执行updated

<div id="app"></div>
    <script>
        var vm = new Vue({
            el:'#app',
            template:'<div>{{message}}</div>',
            data:{
                message:'Hello Word'
            },
            beforeCreate:function () {
                console.log("beforeCreate");
            },
            created:function () {
                console.log("created");
            },
            beforeMount:function () {
                console.log(this.$el);
                console.log("beforeMount");
            },
            mounted:function () {
                console.log(this.$el);
                console.log("mounted");
            },
            beforeDestroy:function () {
                console.log("beforeDestroy");
            },
            destroyed:function () {
                console.log("destroyed");
            },
            beforeUpdate:function () {
                console.log("beforeUpdate");
            },
            updated:function () {
                console.log("updated");
            }
        })
    </script>

数据未发生变化，beforeUpdate和updated函数未被执行

这时候我们改变数据后查看控制台，如图执行了beforeUpdate和updated方法

改变message后控制台显示