目录

  • 一、前言
  • 二、生命周期
    • 1、beforeCreat / created
      • (1)、beforeCreat：
      • （2）、created：
    • 2、eforeMount / mounted
      • （1）、beforeMount：
      • （2）、mounted：
    • 3、beforeUpdate / updated
      • （1）、beforeUpdate：
      • （2）、updated：
    • 4、beforeDestroy / destroyed
      • （1）、beforeDestroy：
      • （2）、destroyed：
  • 三、父子组件生命周期

一、前言

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

面试是遇到了关于vue生命周期以及双向绑定原理，今天写篇博客记录一下。

二、生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

图片取自vue官网：

可以看到：

vue的一个实例具有四个什么周期，分别对应8个钩子函数：beforeCreat，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed

1、beforeCreat / created

(1)、beforeCreat：

当执行beforeCreat生命周期函数时，vue实例还没有被完全创建出来，此时data，methods等内部没有初始化，我们这个时候在函数内调用数据的话，后台会显示undefined。

（2）、created：

执行这个函数的时候，vue实例已经初始化了，可以在这里调用数据，不过还没渲染到页面上。 在当前函数中我们可以访问到data中的属性，此时，会将data中的属性和methods的方法添加到vue的实例身上，同时会将data中所有的属性添加一个getter/setter方法，前后端的ajax交互一般在这个钩子函数中。

初始化数据
定义前后端交互函数

2、eforeMount / mounted

（1）、beforeMount：

这时，vue已经将模板字符串编译成内存DOM，模板已经编译完成，还没有渲染到页面上。beforeMount执行的时候，页面中的元素没有被真正替换过来，只是之前写的一些模板字符串。

（2）、mounted：

创建阶段完成，页面渲染完毕，进入运行阶段。此时我们可以通过$refs来访问到真实的DOM结构。ref类似与id一样 值必须是唯一的，访问的时候我们可以使用this.$refs属性

初始化页面完成，对html的dom节点进行一些需要的操作

3、beforeUpdate / updated

这是vue实例运行时存在的生命周期钩子。

（1）、beforeUpdate：

内存中的数据已经改变，页面上的还没更新。

（2）、updated：

页面更新，页面上数据和内存中的一致

4、beforeDestroy / destroyed

vue实例销毁阶段的钩子函数。

（1）、beforeDestroy：

出发这个函数时，还没开始销毁，此时刚刚脱离运行阶段。data，methods，指令之类的都在正常运行。在这个生命周期函数中我们可以将绑定的事件进行移除。

（2）、destroyed：

组件销毁完毕，data，methods，指令之类的不可用。

三、父子组件生命周期

父子组件的创建和挂载：

父beforeCreate

Vue学习 — 详解Vue生命周期相关推荐

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

    Vue实例详解与生命周期 http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理. ...

  2. vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期

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

  3. 05Vue.js快速入门-Vue实例详解与生命周期

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

  4. 详解servlet生命周期

    详解servlet 生命周期(转载) Servlet 有良好的生存期的定义,包括如何加载.实例化.初始化.处理客户端请求以及如何被移除.这个生存期由 javax.Servlet.Servlet 接口的 ...

  5. 详解spring生命周期的扩展点

    详解spring生命周期的扩展点,加速你追赶高手的脚步 详解spring生命周期的扩展点

  6. vue 声明周期函数_【Vue】详解Vue生命周期

    Vue实例的生命周期全过程(图) (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期 在beforeCreate和created之 ...

  7. 【Vue】详解Vue生命周期

    Vue实例的生命周期全过程(图) (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期 在beforeCreate和created之 ...

  8. 微信小程序02【配置详解、生命周期-app对象使用、页面跳转详解】

    学习地址:https://www.bilibili.com/video/BV1sx411z77P 笔记01:https://blog.csdn.net/weixin_44949135/article/ ...

  9. 详解react生命周期

    生命周期函数是指在某一特定时刻组件会自动调用执行的函数. react生命周期可分为3个阶段:挂载,更新及销毁. 在挂载前会先进行初始化过程,这个阶段组件会初始化自己的数据,如state.props. ...

最新文章

  1. INTERSECT/EXCEPT VS. IN/NOT IN
  2. Java - 网络编程(NetWork)
  3. 用一个类根据Model属性生成SQL语句
  4. bdphp在线订购是真的么_《瑞评》330i会是宝马粉最后的希望么？
  5. 用Vue的父子组件通信实现todolist的功能
  6. 读取Exchange的用户未读邮件数3种办法
  7. 云端计算机可以玩游戏么,手机掌上云电脑是什么？为什么可以玩PC游戏？
  8. Linux下socket通信和epoll
  9. [视频]Silverlight for Windows Phone 7基本开发过程以及Push Button控件的使用
  10. APP支付报错ALI40247处理方案!
  11. xshell访问内网虚拟机
  12. model.train() model.eval()
  13. 运行的程序暂停_黄岩人注意！2天后，这项重要业务系统将暂停运行！
  14. 影像测量仪使用的注意点
  15. 2020年最完整的ftp搭建教程-亲测可用
  16. 【bzoj 3815】卡常数
  17. 基于图书管理系统的需求分析之数据流图
  18. java中 implement_java中implement
  19. 会议日程安排问题python
  20. MATLAB 提取图片曲线

热门文章

  1. Java学习——复习 第八天 Swing程序设计、AWT绘图、事件监听
  2. TLD7002学习笔记（一）-芯片介绍
  3. 数据泄露防护- BadUSB 制作 模拟
  4. SRE重案调查组 第三集 | 探秘HTTP异步请求的“潘多拉魔盒”
  5. Ubuntu18.04安装美化工具tweak 和 dash to dock
  6. view_video.php,Android_Android使用VideoView播放本地视频和网络视频的方法，1、效果展示2、布局文件- phpStudy...
  7. 《程序员》10月精彩内容：iOS Android 10 年
  8. 数学对于人类意味着什么
  9. android 邮件发送
  10. 华为dhcp+ac+ap组网实验