vue里的生命周期是什么？

vue实例从创建到销毁的过程称之为vue的生命周期

vue的生命周期各阶段都做了什么？

beforeCreate 实例创建前：这个阶段实例的data、methods是读不到的
created 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。mount挂载阶段还没开始，$el 属性目前不可见，数据并没有在DOM元素上进行渲染
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：el选项的DOM节点 被新创建的 vm.$el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
beforeUpdate：数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
updated：这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
beforeDestory：实例销毁之前调用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

vue生命周期在真实场景下的业务应用

created：进行ajax请求异步数据的获取、初始化数据
mounted：挂载元素内dom节点的获取
nextTick：针对单一事件更新数据后立即操作dom
updated：任何数据的更新，如果要做统一的业务逻辑处理
watch：监听具体数据变化，并做相应的处理

Vue生命周期及业务场景使用的更多相关文章

  1. Vue生命周期 以及应用场景

    首先一张官方图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. Vue生命周期，面试常见问题

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

  3. 面试题之（vue生命周期）

    在面试的时候,vue生命周期被考察的很频繁. 什么是vue生命周期呢? Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这 ...

  4. vue 生命周期的详解

    一.vue生命周期的解析 > 1>什么是vue生命周期 每个vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.详细来说,就是Vue实例从开始创建,初始化数据, ...

  5. vue—生命周期的基本介绍

    Vue生命周期: 什么是生命周期: Vue 实例从创建到销毁的过程,就是生命周期.也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期 ...

  6. Vuex 注入 Vue 生命周期的过程

    首先我们结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会复杂很 ...

  7. vue生命周期的介绍

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. vue 生命周期

    一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...

  9. 详解vue生命周期

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

随机推荐

  1. Android自定义权限与使用

    1. 如何自定义权限 Android允许我们使用permission标签,在Manifest文件中定义属于自己的权限,一个例子如下, <?xml version="1.0" ...

  2. 使用Pull解析器生成XML文件

    有些时候,我们需要生成一个XML文件,生成XML文件的方法有很多,如:可以只使用一个StringBuilder组拼XML内容,然后把内容写入到文件中:或者使用DOM API生成XML文件,或者也可以使 ...

  3. 小D课堂 - 新版本微服务springcloud+Docker教程_5-04 feign结合hystrix断路器开发实战下

    笔记 4.Feign结合Hystrix断路器开发实战<下>     简介:讲解SpringCloud整合断路器的使用,用户服务异常情况     1.feign结合Hystrix       ...

  4. salt收集windows服务器日志时间

    定义收集时间区间: time.ps1 $a = get-date $b = $a.adddays(-) $c = $b.tostring('yyyy-MM-dd') $d = get-date -fo ...

  5. 如何访问pod（6）

    一.通过 Service 访问 Pod: 我们不应该期望 Kubernetes Pod 是健壮的,而是要假设 Pod 中的容器很可能因为各种原因发生故障而死掉.Deployment 等 control ...

  6. c++后台开发面试常见知识点总结（二）网络编程

    (1)TCP和UDP有什么区别? TCP是传输控制协议,提供的是面向连接的,可靠地字节流服务.使用三次握手建立连接,四次挥手释放连接.UDP是用户数据报协议,传输的是UDP数据报,是无连接的,而且没有 ...

  7. pageoffice实现网页打开编辑保存word文档(基于SSM框架)

    pageoffice是一款网页集成word.excel...等office工具 并不免费,但可以试用练习 SSM框架搭建过程就省略了 注意:由于谷歌/火狐升级,不支持插件嵌入,建议使用POBrowse ...

  8. 二、windows下搭建vue开发环境+IIS部署

    有时我们的服务器并不一定是node,也许是IIS,这样我们就需要把工程构建出来,与IIS集成. 构建该项目的命令如下 cnpm run build 将dist文件夹拷贝出来,放到IIS的发布目录,在浏 ...

  9. NetCore 对Json文件的读写操作

    nuget Microsoft.Extensions.Configuration; Microsoft.Extensions.Configuration.Json; Newtonsoft.Json; ...

  10. 《JAVA语言》课问题汇总

    一.阅读相应教材,或者使用互联网搜索引擎,弄清楚反码.补码跟原码这几个概念,然后编写示例程序,对正数.负数进行各种位操作,观察输出结果,与手工计算的结果进行比对,看看Java中的数是采用上述哪种码表示 ...