详情请查看: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. frist Django app — 五、Test

    Test——很重要但是没有被重视起来的一个环节,至少是我自己,其实自己之前在做java web的时候就去尝试过怎么做REST接口的测试,一直没有找到一种合适方式,而且因为时间紧没有进一步深究,但是造成 ...

  2. nodeJs 代码热更新

    在开发node过程中,每次修改代码都需要重新启动服务,是一件很抓狂的事情 使用nodemon热加载可以帮我们很好的解决这一问题 1. 安装 npm install nodemon -g 2. 修改np ...

  3. centos 7安装vnc服务端&vnc客户端连接

    前言 工作需求,需要用到vnc,介绍一下相关内容. 安装vnc服务端 在执行其他相关的之前,需要先安装一下vnc的服务端,命令如下: yum install tigervnc-server 配置vnc ...

  4. Juc中Atomic原子类总结

    1 Atomic原子类介绍 2 基本类型原子类 3 数组类型原子类 4 引用类型原子类 5 对象的属性修改类型原子类

  5. (转)Microsoft Print to PDF

    好像win10.win7 都有

  6. scrapy 爬取豆瓣互联网图书

    安装scrapy conda install scrapy 生成一个scrapy项目 scrapy startproject douban settings文件 # -*- coding: utf-8 ...

  7. Linux 基本使用

    1.mkdir 创建文件夹 mkdir filename; 2.touch 创建文件 touch file.txt; 3.chmod 变更文件或目录的权限 chmod -R u+x ./;

  8. pandas,读取或存储DataFrames的数据到mysql中

    dataFrames格式的数据是表格形式的,mysql数据库中的数据也是表格形式的,二者可以很方便的读取存储   安装依赖的包 pip install pandas pip install sqlal ...

  9. Python学习—数据库篇之练习题

    Mysql测试题 一.表关系 请创建如下表,并创建相关约束 二.操作表 0.在成绩表中同时显示出对应的课程名和学生名 1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: ...

  10. vue data中调用图片的相对路径

    直接将图片源文件放在项目目录的static文件夹里,然后和正常写图片路径那样写就可以了,不支持自定义的图片路径