Vue生命周期

时间 2019-11-09

标签 vue 生命周期繁體版

原文原文链接

建立(create)->挂载(mount)->更新(update)->销毁(destory)

[
钩子在服务器端渲染期间不被调用
1.beforeCreate(初始化以后，event/watcher 事件配置建立前)
2.created(建立后，完成了数据观测，属性方法运算，watch/event事件回调，挂载还没有开始，$el不可见)
3.beforeMount(载入前，挂载开始前，相关render函数首次被调用)
4.mounted(el被新的Vm.$el替换，并挂载到实例上(模板中HTML渲染到页面中))
5.beforeUpdate(数据更新前调用，发生在虚拟DOM从新渲染和打补丁以前，能够在钩子中进一步更改状态，而不会触发渲染过程)
6.updated(组件DOM根据虚拟DOM的从新渲染和补丁进行变化)
7.beforeDestroy(销毁前，实例依然可用)
8.destroyed(销毁调用，指定事件解绑，子实例和监听器被移除)
]服务器

<body>
  <div id="app">
     {{dataindex}}
  </div>
    <script>
       var app = new Vue({
        el: '#app',
        data: {
          dataindex: 1
        },
        beforeCreate: function() {
            console.log('beforeCreate');
            console.log(this.dataindex);
        },
        created: function() {
            console.log("--------------------");
            console.log('created');
            console.log(this.dataindex);
        },
        beforeMount: function() {
            console.log("--------------------");
            console.log('beforeMount');
            console.log(this.dataindex);
        },
        Mount: function() {
            console.log("--------------------");
            console.log('Mount');
            console.log(this.dataindex);
        },
        mounted: function() {
            console.log("--------------------");
            console.log('mounted');
            console.log(this.dataindex);
        },
        beforeUpdate: function() {
            console.log("--------------------");
            console.log('beforeUpdate');
            console.log(this.dataindex);
        },
        updated: function() {
            console.log("--------------------");
            console.log('updated');
            console.log(this.dataindex);
        },
        beforeDestroy: function() {
            console.log("--------------------");
            console.log('beforeDestroy');
            console.log(this.dataindex);
        },
        destroyed: function() {
            console.log("--------------------");
            console.log('destroyed');
            console.log(this.dataindex);
        }
        
     })
    </script>
</body>