vue及其生命周期介绍

版权声明:共同学习,请指导! https://blog.csdn.net/u012657197/article/details/76993188

什么是vue?

Vue是JavaScript的MVVM库,只关注视图层,以数据为驱动,Vue将自身和DOM进行绑定,DOM和数据同步变化,ViewModel是Vue的核心,它是Vue的一个实例,DOM Listeners和Data Bindings是双向绑定的关键

Vue将 HTML模板 配合 传入Vue构造函数中的JSON数据 渲染进DOM。Vue的主要关注点在视图层,围绕其生命周期钩子函数展开。在beforeCreate之前,Vue为其实例初始化部分属性,在created之后,vue初始化了其props,methods,data,属性,同时实现对data数据的观察,因此created之后就可以访问vue上的data属性了,接着是beforeMount,将传进来的el赋给vue的$el作为组件的容器。mounted时,数据已经渲染进模板中并在页面上显示。

Vue可以很方便的将复杂的功能拆分成一个个组件,并能很方便的实现组件之间的通信。同时配合vue-router可以很方便的实现前端路由,配合vue-resource实现跨域资源获取。

特点

  • 简洁:页面由HTML模板+JSON数据+Vue实例组成
  • 数据驱动:可自动计算属性的模板表达式
  • 组件化:组件可复用,解耦
  • 轻量:代码量小,不依赖于其他库

1.beforecreate

Vue实例vm数据未初始化,包括vm.props,vm.methods,vm.data,vm.el等,因此此时不能获取到vm上的任何属性。

假设有Vue实例:

new Vue(options);
var vm = new Vue({
        el: '#app',
        data: {
            message : "Welcome Vue"
        }
});

则在初始化vue实例时的选项options中加入beforeCreate钩子函数,

 beforeCreate: function () {
    console.log(this.$el); //undefined
    console.log(this.$data); //undefined
    console.log(this.message);//undefined
 }

由于此时并没有初始化vm上的数据,因此,this.elthis.data,this.message都为空。

2.created

此时vm上的数据data,message以初始化,但是this.$el即挂载点并未初始化。

  created: function () {
    console.log(this.$el); //undefined
    console.log(this.$data); //[object Object]  =>  已被初始化
    console.log(this.message); //Welcome Vue  =>  已被初始化
 },

3.beforeMount

此阶段获取挂载点this.$el,其余和created相同。

 beforeMount: function () {
    console.log(this.$el); //已被初始化,内容为: [object HTMLDivElement],即HTML模板
    console.log(this.$data); //[object Object]  =>  已被初始化
    console.log(this.message); //Welcome Vue  =>  已被初始化
 },

4.mounted

此阶段页面挂载点已被初始化。

 mounted: function () {
    console.log(this.$el); //已被初始化,内容为: [object HTMLDivElement],即页面元素
    console.log(this.$data); //[object Object]  =>  已被初始化
    console.log(this.message); //Welcome Vue  =>  已被初始化
 },

5. beforeUpdate

在将this.message = ‘update’后,beforeUpdate中会看到this.message的值变了,但是页面并没有更新。

6. updated

改变this.message的值后,会在updated后更新页面。但是在updated中更新vm.data数据,不会提现到页面上来。

7.beforeDestroy

在methods中销毁:

methods:{
    destroy() {
        vm.$destroy();
    }
}

8.destroyed

组件销毁值后调用。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页