vue2 生命周期

Vue 生命周期图

有时候会遇到这种问题 Cannot read property 'offsetWidth' of null

其实就是因为没按生命周期实现代码引起的，这种错误是因为页面还未渲染，就读取了页面的属性，如id引起的

可以使用mounted方法在视图加载完再做读取操作

<!DOCTYPE html>
<html>
 <head></head>
 <body>
  <div id="div1" v-bind:title="div_title">
   {{hello_message}}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
< script >
var v1 = new Vue({
    el: "#div1",
    data: {
        hello_message: "Hello, there welcome to VueJS world",
        div_title: "This is my intro div",
    },
    beforeCreate: function() {
        alert('Before Create');
    },
    created: function() {
        alert('Created');
    },
    beforeMount: function() {
        alert('Before Mount');
    },
    mounted: function() {
        alert('Mounted');
    },
    beforeUpdate: function() {
        alert('Before Update');
    },
    updated: function() {
        alert('Updated');
    },
    beforeDestroy: function() {
        alert('Before Destroy');
    },
    destroyed: function() {
        alert('Destroyed');
    }
}); // To fire updatev1.$data.hello_message = "New message";// This can be invoked to destroy the object, which will fire the destroy hook//v1.$destroy();
</script>
</body>
</html>

beforeCreate（新对象诞生）

Vue对象用新方法实例化。它创建一个Vue类的对象来处理DOM元素。对象的这个生命阶段可以通过beforeCreated 挂钩来访问。我们可以在这个钩子中插入我们的代码，在对象初始化之前执行。