详情请查看:https://blog.csdn.net/xdnloveme/article/details/78035065

自己做个总结:

beforeCreate 创建之前:已经完成了 初始化事件和生命周期
created 创建完成:已经完成了 初始化注册和响应
beforeMount 挂载之前:已经完成了模板渲染
mounted :挂载之后:已完成HTML虚拟化,创建了el节点 可以操作DOM了
beforeDestroy :摧毁之前:整个vue都处在实时监控空渲染和更新
destroyed: 已摧毁,已经摧毁了观察者,子元素和事件监听

created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

挂载到节点上的初始化方法通常用mounted去操作,主动调起的用methods里面封装方法。

数据初始化一般放到created里面,这样可以及早发请求获取数据,如果有依赖dom必须存在的情况,就放到mounted(){this.$nextTick(() => { /* code */ })}里面

Vue是异步执行dom更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时,Vue会清空队列,并进行必要的DOM更新。

vue生命周期-mounted和created的区别的更多相关文章

  1. Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。(图解详细过程)(2022/7/17)

    文章目录 1.Vue生命周期 1.1 概念 1.2 图解 2.钩子函数的用法说明 2.1 beforeCreate()和created()的详细讲述 2.1.1 方法说明 2.1.2 代码实例 2.1 ...

  2. 生命周期中mounted和created的区别。

    一.什么是生命周期? 用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程.虽然不太严谨,但是也基本上可以理解. 通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下cre ...

  3. Vue生命周期,面试常见问题

    一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...

  4. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

  5. 深入 Vue 生命周期

    深入 Vue 生命周期 这篇博客将会从下面四个常见的应用诠释组件的生命周期,以及各个生命周期应该干什么事 1.单组件的生命周期 2.父子组件的生命周期 3.兄弟组件的生命周期 4.宏mixin的生命周 ...

  6. Vue生命周期整理

    这篇博客将会从下面四个常见的应用诠释组件的生命周期,以及各个生命周期应该干什么事 单组件的生命周期 父子组件的生命周期 兄弟组件的生命周期 宏mixin的生命周期 生命周期:Vue 实例从开始创建.初 ...

  7. vue生命周期以及vue的计算属性

    一.Vue生命周期(vue实例从创建到销毁的过程,称为生命周期,共有八个阶段) 1.beforeCreate :在实例初始化之后,数据观测 (data observer) 和 event/watche ...

  8. 对vue生命周期/钩子函数的理解

    对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...

  9. 详解vue生命周期

    vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...

随机推荐

  1. 6.1 集合和映射--集合Set->底层基于二叉搜索树实现

    前言:在第5章的系列学习中,已经实现了关于二叉搜索树的相关操作,详情查看第5章即可.在本节中着重学习使用底层是我们已经封装好的二叉搜索树相关操作来实现一个基本的集合(set)这种数据结构.集合set的 ...

  2. hive 学习

    多表查询 SELECT a.user_uid_type, a.user_uid, c.user_id, c.user_type FROM mytable1 a JOIN mytable2 b ON(a ...

  3. Linux 文本文件编辑命令

    1.cat 查看纯文本文件,内容较少的,cat[选项][文件],显示行号的 -n 2.more 查看纯文本文件,内容较多的,more[选项]文件 3.head 查看纯文本文档的前N行,head  -n ...

  4. RPM包指令总结

    一.RPM RPM包安装位置 RPM包默认安装路径 /etc/ 配置文件安装目录 /usr/bin/ 可执行的命令安装目录 /usr/lib/ 程序所使用的函数库保存位置 /usr/share/doc ...

  5. 在虚拟机上运行zookeeper的过程中,xshell连接不上虚拟机

    之后网上的各种方法,都没用 如图,就是第一个网卡配置文件.下面又具体的详解.网上有说让把Onboot改成yes,而我的本来就是yes,就没该, 之后我对比了我原来电脑你虚拟机的网卡配置文件,我发现on ...

  6. 微信小程序页面导航功能

    页面导航功能无论是在app和web中都是一个极其常见的功能,如首字母导航,tabs导航等等.但是由于微信小程序无法都dom节点进行操作,所以怎么才能在小程序中快速的导航到用户的想要到达的地方呢. 那么 ...

  7. win10如何查看文件扩展名

    就可以修改扩展名,修改文件类型.

  8. activiti-6.0工作流应用模板

     acriviti6.0官方操作指南:https://www.activiti.org/userguide/#demo.setup.one.minute.version 下载 acriviti6.0压 ...

  9. 沙箱机制(Sandboxie)

    一.沙箱是什么? 沙箱是一个虚拟系统程序,沙箱提供的环境相对于每一个运行的程序都是独立的,而且不会对现有的系统产生影响. 二.沙箱的应用 (1)搭建测试环境.沙箱的应用只能访问自己的应用访问目录,而不 ...

  10. Cygwin工具安装和使用指导书

    前言 Cygwin是一个在windows平台上运行的类UNIX模拟环境.它可以满足你在Windows系统上学习Linux基本命令操作.脚本调试的基本需求. Cygwin使用优点介绍 1.Cygwin安 ...