vue 生命周期(钩子函数)

2018-04-12  本文已影响0人  Creator93
lifecycle.png

找错误和解决需求
标红的是生命周期的函数。
new Vue()实例一个当前的Vue对象,没有创建这个对象之前,可以调用
beforeCreate()对当前的事件配置,属性(data)还没有真的去识别属性里的东西。
可以做加载的动画。
created()这个时候实例出来,属性成功被绑定,但是DOM还没有出来,在这个方法中获取对应的数据,比如网络请求的数据赋给属性。然后在往下执行的时候就可以展示在DOM下了。
结束上一步的loading加载的东西。

然后检查是否有el如果有检查有没有template
如果没有el,看是否存在$mount,然后检查template

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
}).$mount("#app")

如果都没有当前的生命周期结束。

存在template有两种情况
一: template: '<App/>'会执行具体的组件,有了这个组件就会执行render方法来渲染当前template对应的内容。
二:

template:`
    <div id="app">
        <h1>Hello world</h1>
    </div>
  `

如果都没有,当前生命周期结束。
beforeMount()开始编译当前的模板,这个方法在虚拟DOM中执行的。没有真实的将内容渲染到页面上,执行el 指向的元素把template的内容放里
mounted 模板编译完,开始挂载,结束,页面就展示出来了。DOM生成。
更改beforeUpdate组件更新之前的方法
updated更新了当前组件,执行完,页面就展示出来了。一般情况下我们要向在当前的组件发生一些改变时调用。

beforeDestroy销毁之前
destroyed销毁了。

上一篇下一篇

猜你喜欢

热点阅读