const app = new Vue({
el:"#app',
data:{
message:'hello,lifePeriod'
},
methods:{
init(){
console.log('这是一个方法!')
}
}
})

触发 beforeCreate 钩子函数

组件实例刚被创建,此时无法访问到 el 属性和 data 属性等..

beforeCreate(){

    console.log(`元素:${this.$el}`)   //undefined

    console.log(`属性message:${this.message}`) //undefined

    console.log(`方法init:${this.init}`)   //undefined
}

对data进行双向绑定,初始化方法(Observer Data && init events)

当一个 vue 实例被创建时,他向 Vue 的响应式系统中加入了其 data 对象中能找到的所有属性.

利用 es5 特性 Object.defineProperty,遍历 data 对象下所有属性,将其转化为 getter/setter,以便拦截对象赋值与取值操作,然后利用发布/订阅者模式,从而实现数据的双向绑定!

所以只有当实例被创建时 data 中存在的属性才是响应式的!!!!

将methods 下的所有方法进行声明.

将methods下的方法和data下的属性通过遍历和利用 es5 特性 Object.defineProperty代理到实例下.

this.a = this.$data.a = this.data.a;

this.fn = this.$methods.fn = this.methods.fn;

触发 created 钩子函数

组件实例创建完成,属性已绑定,但 DOM 还未生成,$el 属性还不存在!

created(){

    console.log(`元素:${this.$el}`)   //undefined

    console.log(`属性message:${this.message}`) //message:hey,vue-lifePeriod!

    console.log(`方法init:${this.init}`)   //function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}
}

将模板编译成函数 (compile template into render function)

将模板 template 编译成 AST 树、render 函数(new Watch 将模板与数据建立联系)以及 staticRenderFns 函数(通过 diff 算法优化 dom 更新);

运行 render 方法,返回一个 vnode 对象(virtual dom)

触发 beforeMount 钩子函数

模板编译/挂载之前

beforeMount(){

    console.log(`元素:${(this.$el)}`)

    console.log(this.$el)  //<div id="app">{{message}}</div> ,我们发现此时的el还未对数据进行渲染.(虚拟dom的内容)

}

触发 mounted 钩子函数

模板编译/挂载之后

mounted(){

  console.log(`元素:${(this.$el)}`)

  console.log(this.$el)   //<div id="app">{{hello,vue-lifePeriod!}}</div>   ,已将数据渲染到真实dom

}

我们这时将 app.message 改变为'hey,vue-lifePeriod';

触发 beforeUpdate 钩子函数

组件更新之前

beforeUpdate(){

    console.log(this.$el.innerHTML);  //hello,vue-lifePeriod   ,此时,元素的真实dom内容还未改变.

}

重新渲染虚拟 dom,并通过 diff 算法对比 vnode 节点差异更新真实 dom (virtual DOM re-render and patch)

触发 updated 钩子函数

组件更新之后

updated(){

  console.log(this.$el.innerHTML);  //hey,vue-lifePeriod   ,此时,元素的真实dom内容已经改变.

}

我们这时调用 app.$destroy()函数对组件进行销毁

触发 beforeDestroy 钩子函数

组件销毁之前

beforeDestroy(){

    console.log(this.$el)   //<div id="app">{{hey,vue-lifePeriod!}}</div>

    console.log(`属性message:${this.message}`) //message:hey,vue-lifePeriod!

    console.log(`方法init:${this.init}`)   //function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}

}

销毁数据监听,子组件和解除事件监听!

触发 destroy 钩子函数

组件销毁之后

destroyed(){

    console.log(this.$el)   //<div id="app">{{hey,vue-lifePeriod!}}</div>

    console.log(`属性message:${this.message}`) //message:hey,vue-lifePeriod!

    console.log(`方法init:${this.init}`)   //function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}
}

实例销毁后虽然 dom 和属性方法都还存在,但改变他们都将不再生效!

app.message = 'hu,vue-lifePeriod';

console.log(app.message) //hey,vue-lifePeriod

https://github.com/webfansplz/vue-note/issues/2

实例化vue发生了什么(详解vue生命周期)的更多相关文章

  1. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  2. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  3. Vue入门系列(五)Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  4. Vue实例详解与生命周期

    http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己 ...

  5. 【05】Vue 之 实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  6. maven详解之生命周期与插件

    Maven是一个优秀的项目管理工具,它能够帮你管理编译.报告.文档等. Maven的生命周期: maven的生命周期是抽象的,它本身并不做任何的工作.实际的工作都交由"插件"来完成 ...

  7. 详解Vue.js 技术

    本文主要从8个章节详解vue技术揭秘,小编觉得挺有用的,分享给大家. 为了把 Vue.js 的源码讲明白,课程设计成由浅入深,分为核心.编译.扩展.生态四个方面去讲,并拆成了八个章节,如下: 准备工作 ...

  8. Vue组件通信方式全面详解

    vue组件通信方式全面详解 众所周知,Vue主要思想就是组件化开发.因为,在实际的项目开发中,肯定会以组件的开发模式进行.形如页面和页面之间需要通信一样,Vue 组件和组件之间肯定也需要互通有无.共享 ...

  9. 详解vue的数据binding原理

    自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...

随机推荐

  1. The Forth Week

    1.复制/etc/skel目录为/home/tuser1,要求/home/tuser1及其内部文件的属组和其它用户均没有任何访问权限. cp -r /etc/skell /home/tuser1 ; ...

  2. 字符串匹配的BF算法和KMP算法学习

    引言:关于字符串 字符串(string):是由0或多个字符组成的有限序列.一般写作`s = "123456..."`.s这里是主串,其中的一部分就是子串. 其实,对于字符串大小关系 ...

  3. Myeclipse学习总结(1)——Myeclipse优化配置

    作为企业级开发最流行的工具,用Myeclipse开发java web程序无疑是最合适的,java web前端采用jsp来显示,myeclipse默认打开jsp的视图有卡顿的现象,那么如何更改jsp默认 ...

  4. SSM框架下实现导出功能

    导出:将当前页面表格里值传到excel表格中. 一.页面js //下载excel $("#download").click( function() { var param = $( ...

  5. noip模拟赛 正方形

    题目描述在一个10000*10000的二维平面上,有n颗糖果.LYK喜欢吃糖果!并且它给自己立了规定,一定要吃其中的至少C颗糖果!事与愿违,LYK只被允许圈出一个正方形,它只能吃在正方形里面的糖果.并 ...

  6. 清北学堂模拟赛d1t4 一道图论好题(graph)

    题目描述 LYK有一张无向图G={V,E},这张无向图有n个点m条边组成.并且这是一张带权图,不仅有边权还有点权. LYK给出了一个子图的定义,一张图G’={V’,E’}被称作G的子图,当且仅当 ·G ...

  7. nyoj_88_汉诺塔(一)_201308201730

    汉诺塔(一)时间限制:1000 ms | 内存限制:65535 KB难度:3描述在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝石针.印度教的主神梵天在创 ...

  8. 【ACM】 hdu_1090_A+BII_201307261100

    A+B for Input-Output Practice (II)Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/3276 ...

  9. 开源GIS软件 2

    Android上的导航软件 AndNav AndNav 是一款 Android 手机上的 GPS导航软件(非开源).软件支持GPS定位信息,目的地查询,道路建议管理,导航提示等功能,十分强大的一款软件 ...

  10. Nginx配置httpsserver

    配置HTTPS主机.必须在server配置块中打开SSL协议,还须要指定服务器端证书和密钥文件的位置: server { listen 443;  #要加密的域名 server_name www.te ...