生命周期（钩子函数）：一个组件从创建到销毁的过程就是生命周期
 
 
beforeCreate: 创建前
    1、当前vue实例化的时候会做一个初始化的操作，在这个生命周期函数中我们可以做初始化的loading
    2、在当前函数里面访问不到data中的属性，但可以通过vue实例对象（vm）访问
created：创建后
    1、当beforeCreate执行完毕后，会执行created，在当前函数中我们可以访问到data中的属性。
    2、当前生命周期函数执行的时候，会将data中所有的属性和methods身上所有的方法，都添加到vue实例身上，
            同时会将data中的所有的属性添加一个getter/setter方法
    3、如果需要进行前后端交互（ajax请求），需要在当前生命周期（created）中执行。
beforeMount: 挂载前
     render函数（渲染） 
    render函数初次被调用---------数据和模板没有进行相结合，同时还没有渲染到HTML页面上  
    渲染前data数据中最后的修改
mountd：挂载后
    1、数据和模板相互结合，渲染成真实的DOM结构
    2、在当前生命周期里面我们可以访问真实的DOM结构
    3、在vue中我们可以通过$refs来访问真实的DOM结构
    4、ref类似于id一样，在当前作用域中值必须是唯一的。访问时通过this.$refs.属性
beforeUpdate：更新前 
    只要data中的属性发生了改变，那么这个生命周期函数就会执行，render函数就会再次执行
    在这个函数中我们可以对数据进行最后的修改，同时也可以访问到最新的DOM结构和数据，一般不再这里访问，而是在updated访问
updated：更新后
    在当前生命周期函数中我们可以访问到最新的DOM结构（数据更新后最新的DOM结构）和数据
beforeDestroy:销毁前
    销毁之前还可以访问DOM结构，以及相关的数据（data）
    在这个生命周期函数中我们可以将绑定的事件进行移除
destroyd：销毁后
    在这个生命周期函数中，会将数据和模板之间的关系断开（自动的，不需要做）
    我们还是可以访问data中的属性，但是不能访问真实的DOM结构了
 

vue生命周期简单总结的更多相关文章

  1. 简单记录一下vue生命周期及 父组件和子组件生命周期钩子执行顺序

    首先,vue生命周期可以用下图来简单理解 当然这也是官方文档的图片,详细的vue周期详解请参考这里 然而当同时存在父子组件的时候生命周期钩子是如何执行的呢? 请看下文: 加载渲染过程父beforeCr ...

  2. 详解vue生命周期

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

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

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

  4. Vue生命周期学习

    转自https://www.w3cplus.com/vue/vue-instances-and-life-cycles.html Vue实例虽然没有完全遵循MVVM模型,但Vue的设计无疑受到了它的启 ...

  5. vue生命周期探究（二）

    vue生命周期探究(二) 转载自:https://segmentfault.com/a/1190000008923105 上一章我们介绍了vue的组件生命周期和路由勾子,这一章,让我们来看看在vue- ...

  6. vue 生命周期的详解

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

  7. Vue生命周期，我奶奶看了都懂了

    最近一直在学习Vue,而vue生命周期是我们不可能绕开的一个很核心的知识点,今天来简单的梳理一下大概的内容. 一.钩子函数 在一开始学习的时候,总有钩子函数这个名词冒出来,而且在vue官网文档中也频繁 ...

  8. Android Activity的生命周期简单总结

    Android Activity的生命周期简单总结 这里的内容参考官方的文档,这篇文章的目的不是去总结Activity是如何启动,如何创造,以及暂停和销毁的,而是从实际开发中分析在Activity各个 ...

  9. vue生命周期的介绍

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

随机推荐

  1. tf_upgrade_v2.exe实验

    实验前 import tensorflow as tf import numpy as np #create data x_data=np.random.rand(100).astype(np.flo ...

  2. Jenkins部署从节点

    由于jenkins上承载项目太多,需要专门的节点来执行需要构建的操作. 参考:https://www.cnblogs.com/lxs1314/p/7551309.html job仅使用绑定的slave ...

  3. Vim 命令、操作、快捷键（收藏大全）

    ------ 命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filenam ...

  4. OperationCenter Docker运行环境及其依赖启动脚本

    1.Portainer docker rm -f portainer docker run -d -p : --name portainer --restart always portainer/po ...

  5. Spring的Ioc理解

    1.Ioc=控制反转和依赖注入(DI),两个是一回事 控制反转的好处: 把对象的创建和依赖定义在xml中,改变子类的实现变得很简单 控制反转减轻了对象之间的耦合度,减轻了对象之间的依赖关系,增加了系统 ...

  6. 使用Choose构建分支动态语句

    1.在接口写方法 public List<Employee> getEmpsByConditionChoose(Employee employee); 2 在映射文件中配置 <!-- ...

  7. 数据结构和算法（Java版）快速学习（栈与队列）

    栈是仅允许在表尾进行插入和删除操作的线性表.我们把允许插入和删除的一端称为栈顶(top),另一端称为栈底(bottom).栈是一种后进先出(Last In First Out)的线性表,简称(LIFO ...

  8. 【洛谷T89353 【BIO】RGB三角形】

    题目链接 这个题我一开始显然直接暴力 然后30分(但是应用数据分治的我通过复杂度判断并且其余输出0的能力硬生生的拿下了60分) 主要还是讲正解 这里有一个结论 这样一个图,红点的值可以通过两个黄点来判 ...

  9. Django学习之缓存

    1.配置 2.应用 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存.缓存将一个某个views的返回值保存至内存或者m ...

  10. Ajax请求Json数据，报500错误，后台没有错误日志。

    post请求:http://localhost:9080/DataDiscoveryWeb/issueformcount/queryIssueTendencyDetail.xhtml?jobId=86 ...