实例化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) //{{message}},我们发现此时的el还未对数据进行渲染.(虚拟dom的内容) }
触发 mounted 钩子函数
模板编译/挂载之后
mounted(){ console.log(`元素:${(this.$el)}`) console.log(this.$el) //{{hello,vue-lifePeriod!}},已将数据渲染到真实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) //{{hey,vue-lifePeriod!}}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) //{{hey,vue-lifePeriod!}}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
相关推荐
-
VeeValidate 的使用场景以及配置 框架
2019-1-11
-
加快Vue项目的开发速度 框架
2018-12-12
-
webpack内置模块ProvidePlugin 框架
2019-7-3
-
解决基于TypeScript 的 RN项目相对路径引入组件的问题 框架
2019-6-8
-
使用 Parcel 构建 Vue.js 项目 框架
2019-4-1
-
还可以这么玩?超实用 Typescript 内置类型与自定义类型 框架
2019-6-7
-
怎样使用React Context API 框架
2019-2-20
-
请求时token过期自动刷新token 框架
2018-11-10
-
深入理解Node.js 进程与线程(8000长文彻底搞懂) 框架
2019-8-16
-
react-入门 框架
2019-8-18