生命周期（钩子函数）：一个组件从创建到销毁的过程就是生命周期
 
 
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. python实现的ocr接口

    太累了,,有时间再补解释 import pytesseract import requests from PIL import Image from PIL import ImageFilter fr ...

  2. sh_06_break

    sh_06_break i = 0 while i < 10: # break 某一条件满足时,退出循环,不再执行后续重复的代码 # i == 3 if i == 3: break print( ...

  3. vue中的methods，conputed，watcher

    todo 1,computed(计算属性) 属性的结果会被缓存, 除非依赖的响应式属性变化才会重新计算, 主要 当做属性来使用;(虽然是个方法,但是当做属性使用)(场景:引用一些经过操作的数据) co ...

  4. 聊聊 Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的

    todo defineProperty() 参考: https://www.cnblogs.com/wangjiachen666/p/9883916.html

  5. DVWA--XSS（DOM）

    0X01爱之先了解 DOM,全称Document Object Model,是一个平台和语言都中立的接口,可以使程序和脚本能够动态访问和更新文档的内容.结构以及样式. DOM型XSS其实是一种特殊类型 ...

  6. c++内置变量类型

    1,各种变量占据的内存空间 char:1个字节,也可亦作为0-255的数值参与运算 一般来说,静态存储区的自动赋初值,动态则不自动(貌似也不对,因为非内置变脸的类型,也都调用了默认构造函数进行初始化) ...

  7. JS中集合对象(Array、Map、Set)及类数组对象的使用与对比（转载）

    在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型,Array ...

  8. CDH安装时，部分节点不受管控

    解决方案: /opt/cm-5.12.0/etc/init.d/cloudera-scm-agent stop cd /opt/cm-5.12.0/lib/cloudera-scm-agent/ rm ...

  9. Base table or view not found

    项目 代码分细致 改为Logic, Model, Controller ,View  四个模块 $model=D("Index",'Logic'); $res=$model-> ...

  10. Linux centos 解决"不在 sudoers 文件中。此事将被报告"的问题

    第一部分讲解如何从普通用户到root用户 网上看了很多,其实就是执行 su root ,然后输入当前用户密码,这个时候可能报错 这个问题不大,执行一下提示的语句: abrt-auto-reportin ...