资讯专栏INFORMATION COLUMN

实例化vue发生了什么?(详解vue生命周期)

pcChao / 925人阅读

摘要:实例化发生了什么详解生命周期本文将对的生命周期进行详细的讲解让你了解一个实例的诞生都经历了什么我在上建立了一个存放笔记的仓库以后会陆续更新一些知识和项目中遇到的坑有兴趣的同学可以去看看哈欢迎传送门实例化一个这是一个方法触发钩子函数组件实例刚

实例化vue发生了什么?(详解vue生命周期)
本文将对vue的生命周期进行详细的讲解,让你了解一个vue实例的诞生都经历了什么~

我在Github上建立了一个存放vue笔记的仓库,以后会陆续更新一些知识和项目中遇到的坑,有兴趣的同学可以去看看哈(欢迎star)!

传送门

实例化一个Vue
const app = new Vue({
  el:"#app",
  data:{
    message:"hello,lifePeriod"
  },
  methods:{
    init(){
      console.log("这是一个方法!")
    }
  }
})
1.触发 beforeCreate 钩子函数

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

beforeCreate(){

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

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

    console.log(`方法init:${this.init}`)   //undefined
}
2.对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; 
3.触发 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)}
}
4.将模板编译成函数 (compile template into render function)

将模板 template 编译成 AST 树、render 函数(new Watch 将模板与数据建立联系)以及 staticRenderFns 函数(通过 diff 算法优化 dom 更新);
运行 render 方法,返回一个 vnode 对象(virtual dom)

5. 触发 beforeMount 钩子函数

模板编译/挂载之前

beforeMount(){

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

    console.log(this.$el)  //
{{message}}
,我们发现此时的el还未对数据进行渲染.(虚拟dom的内容) }
6. 触发 mounted 钩子函数

模板编译/挂载之后

mounted(){

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

  console.log(this.$el)   //
{{hello,vue-lifePeriod!}}
,已将数据渲染到真实dom }
我们这时将 app.message 改变为"hey,vue-lifePeriod"; 7.触发 beforeUpdate 钩子函数

组件更新之前

beforeUpdate(){

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

}
8.重新渲染虚拟 dom,并通过 diff 算法对比 vnode 节点差异更新真实 dom (virtual DOM re-render and patch) 9.触发 updated 钩子函数

组件更新之后

updated(){

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

}
我们这时调用 app.$destroy()函数对组件进行销毁 10.触发 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)} }
11. 销毁数据监听,子组件和解除事件监听! 12. 触发 destroyed钩子函数

组件销毁之后

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92484.html

相关文章

  • Vue 实例中的生命周期钩子详解

    摘要:实例在文档中经常会使用这个变量名表示实例,在实例化时,需要传入一个选项对象,它可以包含数据模板挂载元素方法生命周期钩子等选项。通俗说就是实例从创建到销毁的过程,就是生命周期。 Vue 实例中的生命周期钩子 Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑、数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程...

    gityuan 评论0 收藏0
  • 详解vue生命周期

    摘要:注意看下此时还是没有选项钩子函数和间的生命周期在这一阶段发生的事情还是比较多的。钩子函数和钩子函数间的生命周期当发现中的数据发生了改变,会触发对应组件的重新渲染,先后调用和钩子函数。 首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉: showImg(https://segmentfau...

    svtter 评论0 收藏0
  • Vue生命周期

    摘要:和下面手动调用在控制台中输入在这个阶段会销毁实例,生命周期结束。外部实例中的函数显示的效果参考链接组件的生命周期详解生命周期 为什么要认识Vue的生命周期 Vue的生命周期是一个非常重要的点,如果不懂Vue的生命周期,那么很多时候,就不知道Vue的实际渲染时机,程序中会出现各种bug。 因此,学习Vue的生命周期是非常用必要的。 showImg(https://segmentfault...

    y1chuan 评论0 收藏0
  • Vue 生命周期详解

    摘要:的钩子函数会在组件停用时被调用。是在构造函数中的声明的变量执行钩子函数执行执行钩子函数执行钩子函数刷新前根据对中的进行排序。 Vue 生命周期详解 Vue 生命周期流程 最开始,用户使用 new Vue() 创建根 Vue 实例,或者 Vue 实例化子组件都会调用_init方法(我们将这两种实例都称为vm): function Vue(options) { //Vue 构...

    snowLu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<