2.vue2-实例和生命周期

Author:vanessa
Date:2018/01/21 

参考文献： https://www.cnblogs.com/xiaofenguo/p/6605091.html

## 1.创建一个实例

var vm = new Vue({　

　　　//选项

　　　|-------DOM（3）

　　　|  　　　　|-------el (提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。)

　　　|  　　　　|-------template (一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发 slot。)

　　　|  　　　　|-------render (字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。)

　　　|-------数据（6）

　　　|  　　　　|-------data    (Vue实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化)

　　　|  　　　　|-------props　(可以是数组或对象，用于接收来自父组件的数据。)

　　　|  　　　　|-------propsData (创建实例时传递 props。主要作用是方便测试。)

　　　|  　　　　|-------computed (计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例)

　　　|  　　　　|-------methods (methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。)

　　　|  　　　　|-------watch (一个对象，键是需要观察的表达式，值是对应回调函数。)

　　　|-------生命周期钩子（10）

　　　|  　　　　|-------beforeCreate(在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。)

　　　|  　　　　|-------create(实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见)

　　　|  　　　　|-------beforeMount(在挂载开始之前被调用：相关的 render 函数首次被调用。)

　　　|  　　　　|-------mounted(el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。)

　　　|  　　　　|-------beforeUpdate(数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。)

　　　|  　　　　|-------updated(由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。)

　　　|  　　　　|-------activated(keep-alive 组件激活时调用。)

　　　|  　　　　|-------deactivated(keep-alive 组件停用时调用。)

　　　|  　　　　|-------beforeDestroy(实例销毁之前调用。在这一步，实例仍然完全可用。)

　　　|  　　　　|-------destroyed(Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。)

　　　|-------资源（3）

　　　|  　　　　|-------directives(包含 Vue 实例可用指令的哈希表。)

　　　|  　　　　|-------filters(包含 Vue 实例可用过滤器的哈希表。)

　　　|  　　　　|-------components(包含 Vue 实例可用组件的哈希表。)

　　　|-------杂项（6）

　　　|  　　　　|-------parent(指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。)

　　　|  　　　　|-------mixins(mixins 选项接受一个混合对象的数组。Mixin钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。)

　　　|  　　　　|-------name(允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。)

　　　|  　　　　|-------extends（允许声明扩展另一个组件。这主要是为了便于扩展单文件组件。这和 mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级。）

　　　|  　　　　|-------delimiters（改变纯文本插入分隔符。）

　　　|  　　　　|-------functional（使组件无状态（没有 data ）和无实例（没有 this 上下文）。他们用一个简单的 render 函数返回虚拟节点使他们更容易渲染。）

　})

## 2.生命周期

<div id="main">
    {{info}}
</div>
<script>
    var vm=new Vue({
        el:'#main',
        data:{
            info:'wahaha'
        },
        beforeCreate:function(){
            console.log('创建前......');
            console.log(this.info);
            console.log(this.$el);
        },
        created:function(){
            console.log('已创建......');
            console.log(this.info);
            console.log(this.$el);
        },
        beforeMount:function(){
            console.log('加载前......');![](images/life.png)
            console.log(this.info);
            console.log(this.$el);
        },
        mounted:function(){
            console.log('加载后......');
            console.log(this.info);
            console.log(this.$el);
        },
        beforeUpdate:function(){
            console.log("更新前========");
            console.log(this.info);
            console.log(this.$el);

        },
        updated:function(){
          console.log('更新完成...');
            console.log(this.info);
            console.log(this.$el);
        },
        beforeDestroy:function(){
            console.log('销毁前......');
            console.log(this.info);
            console.log(this.$el);
        },
        destroyed:function(){
            console.log('销毁后......');
            console.log(this.info);
            console.log(this.$el);
        }
    })
</script>