生命周期（钩子函数）：一个组件从创建到销毁的过程就是生命周期
 
 
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. vue.js 深度监测

    1.select 控件赋值改变,但是无法获取 解决方法,在监测时手动赋值新值 'model.UseType': { handler(newVal, oldVal) { $("#UseType ...

  2. MariaDB(Mysql)-主从搭建

    卸载过程: 停止服务:systemctl stop mariadb 查询安装包:rpm -qa | grep mariadb 卸载: rpm -e mariadb-server rpm -e mari ...

  3. oracle 数据库优化【转载】

    版权声明:本文为CSDN博主「咫尺的梦想ing」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/u01305 ...

  4. 《Effective Java》读书笔记 - 3.对于所有对象都通用的方法

    Chapter 3 Methods Common to All Objects Item 8: Obey the general contract when overriding equals 以下几 ...

  5. Linux驱动开发9——kfifo缓冲队列

    Kfifo是Linux内核缓冲队列 #include <linux/kfifo.h> 分配kfifo队列,返回值为0表示成功,其他值表示失败 int kfifo_alloc(struct ...

  6. Python深度学习读书笔记-6.二分类问题

    电影评论分类:二分类问题   加载 IMDB 数据集 from keras.datasets import imdb (train_data, train_labels), (test_data, t ...

  7. python - 标准库：traceback模块

    traceback 模块: 允许你在程序里打印异常的跟踪返回 (Traceback)信息, 类似未捕获异常时解释器所做的. import traceback try: raise SyntaxErro ...

  8. HTTP学习记录：四、头信息（请求和响应）

    学习资源主要为:@小坦克HTTP相关博客 一.请求头信息(Request Header) 请求头信息包含比较多,如下: 1.Cache头域 if-modified-Since 作用:把浏览器端缓存页面 ...

  9. python学习之requests基础

    学习地址:http://docs.python-requests.org/zh_CN/latest/user/quickstart.html#id2 使用requests发送网络请求 一.导入requ ...

  10. 【命令汇总】XSS payload 速查表

    日期:2019-05-15 14:06:21 作者:Bay0net 介绍:收集并且可用的一些 XSS payload,网上的速查表很多,但是测试了下很多 payload 的不可用,这里都是自己能用的 ...