实例化vue发生了什么(详解vue生命周期)
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生命周期)的更多相关文章
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- Vue入门系列(五)Vue实例详解与生命周期
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue实例详解与生命周期
http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己 ...
- 【05】Vue 之 实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- maven详解之生命周期与插件
Maven是一个优秀的项目管理工具,它能够帮你管理编译.报告.文档等. Maven的生命周期: maven的生命周期是抽象的,它本身并不做任何的工作.实际的工作都交由"插件"来完成 ...
- 详解Vue.js 技术
本文主要从8个章节详解vue技术揭秘,小编觉得挺有用的,分享给大家. 为了把 Vue.js 的源码讲明白,课程设计成由浅入深,分为核心.编译.扩展.生态四个方面去讲,并拆成了八个章节,如下: 准备工作 ...
- Vue组件通信方式全面详解
vue组件通信方式全面详解 众所周知,Vue主要思想就是组件化开发.因为,在实际的项目开发中,肯定会以组件的开发模式进行.形如页面和页面之间需要通信一样,Vue 组件和组件之间肯定也需要互通有无.共享 ...
- 详解vue的数据binding原理
自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...
随机推荐
- codevs 1160 蛇形矩阵
1160 蛇形矩阵 传送门 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 题目描述 Description 小明玩一个数字游戏,取个n行 ...
- elasticsearch学习(1)简单查询与聚合
elastic 被用作全文搜索.结构化搜索.分析以及这三个功能的组合 一个ElasticSearch集群可以包含多个索引, 每个索引包含多个类型 一个类型存储着多个文档 每个文档又有多个属性 索引(名 ...
- Git ——Tool
Git: 何为Git: Git 是一个可以实时记录文件变化.维护文件的安全的一个仓库! Git仓库是由** Linux 系统之父 Linus Torvalds ** 创建的一个开源 的软件!Githu ...
- Python MongoDB 教程
基于菜鸟教程实际操作后总结而来 Python MongoDB MongoDB 是目前最流行的 NoSQL 数据库之一,使用的数据类型 BSON(类似 JSON). MongoDB 数据库安装与介绍可以 ...
- odoo 二次开发小记-----不定时更新
一.odoo中 页面上字段变化引起其他字段范围变化-onchange @api.onchange('company_id') def onchange_parent_id(self): return ...
- 【codeforces 514B】Han Solo and Lazer Gun
[题目链接]:http://codeforces.com/contest/514/problem/B [题意] 每次攻击可以把经过自己的一条直线上的所有点都毁掉; 然后给你n个目标物的坐标 问你最少要 ...
- 2017沈阳网络赛hdu6199 gems gems gems
gems gems gems Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) P ...
- hdu6096 String
String Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/Others) Problem De ...
- (42)Spring Boot多数据源【从零开始学Spring Boot】
我们在开发过程中可能需要用到多个数据源,我们有一个项目(MySQL)就是和别的项目(SQL Server)混合使用了.其中SQL Server是别的公司开发的,有些基本数据需要从他们平台进行调取,那么 ...
- 关于在JSP页面中为什么一定要用${pageContext.request.contextPath}来获取项目路径,而不能用${request.contextPath}?
这里的疑问在于pageContext和request都是JSP中的内置对象之一,为什么不直接用${request.contextPath}来获取项目路径? 出现这种疑问,其实是将JSP的内置对象和EL ...