生命周期:一个组件从创建到销毁的这个过程叫做生命周期 生命周期钩子函数
 
1、组件从创建到销毁的过程
1、创建前 创建后
2、挂载前 挂载后
3、更新前 更新后
4、销毁前 销毁后
beforeCreate:
当前生命周期函数主要用来做初始化工作,在这个生命周期函数中我们可以创建一个loading
 
created:(*****)
创建后:
1、在当前生命周期函数中我们可以访问到vm身上所有的属性和方法
2、当前生命周期函数会将data和methods身上所有的属性和方法都挂载在vm的实例身上
3、当前生命周期函数会将data身上所有的属性添加一个getter/setter方法,因此如果需要进行
前后端数据交互的时候必须在当前生命周期中进行(响应式原理),如果数据没有提前在data中进行了绑定
那么这个属性身上就不会有getter/setter方法,因此数据也不会动态的进行改变
 
beforeMount:
挂载前:
数据和模板还没有进行相结合,在这个生命周期函数中我们可以进行数据最后的修改
 
在当前生命周期函数中是访问不到真实的DOM结构
 
mounted:(*****)
挂载后:
数据和模板已经结合,在这个生命周期函数中我们可以通过this.$refs访问到真实DOM结构
 
$refs
ref="值必须是整个VDom中唯一";
 
访问的时候通过this.$refs.值
 
 
ref与document的区别?
document是从整个页面去查找DOM结构,这个DOM结构肯定是已经插入到页面的DOM结构
ref是从当前vm的虚拟DOM中找到的当前元素,ref是从内存当中找到的DOM结构
 
 
beforeUpdate:
更新前:
当data中的数据发生了改变的时候就会执行
1、可以访问到真实的DOM结构
2、可以对数据做最后的修改
3、当前生命周期函数中的数据和模板还没有更新完毕
 
updated:
更新后:
1、数据更新后最新的DOM结构
2、在当前生命周期函数中需要特别的注意,因为当前函数是一个频繁触发的函数。
因此如果在当前生命周期函数中做一些事件绑定或者实例化的时候需要做一个提前判断
 
beforeDestroy:*
销毁前
1、在这个生命周期函数中,还是可以继续访问到真实的DOM结构以及data中的数据
2、一般我们都会在这个生命周期函数中做一些事件解绑/移除的操作
 
destroyted:
销毁后:
1、将DOM与数据之间的关联进行断开
2、在当前生命周期函数中是访问不到真实的DOM结构
 
 
 
 
 
以上生命周期函数中
多次执行的生命周期函数
1、beforeUpdate
2、updated*
 
组件第一个创建的时候会执行哪些生命周期函数
beforeCreate
created*
beforeMount
mounted*
 
innerText innerHTML outerText outerHTML
vm实例身上的方法
 
$mount() 手动设置挂载点 例子:vm.$mount("#app");
 
$destroy(); 销毁
 
$forceUpdate 强制更新 (强制调用了render方法);
 
$on() 事件绑定
 
$emit() 事件触发
 
$off() 事件解绑
 
$once() 只绑定一次

vue 生命周期 笔记的更多相关文章

  1. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

  2. vue生命周期的介绍

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

  3. vue 生命周期

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

  4. 详解vue生命周期

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

  5. 关于vue生命周期

    官网给出的实例的生命周期图如下: beforeCreate(页面创建前),created(页面创建后),beforeMount(页面载入前),mounted(页面载入后),beforeUpdate(页 ...

  6. vue生命周期的理解

    我从官网上下载了一张vue生命周期的图,接下来实际分析一波vue到底执行了什么东西. 1.我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实 ...

  7. Vue生命周期,面试常见问题

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

  8. 面试题之(vue生命周期)

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

  9. [转] Vue生命周期

    Vue生命周期 这是Vue文档里关于实例生命周期的解释图 那么下面我们来进行测试一下 <section id="app-8"> {{data}} </sectio ...

随机推荐

  1. oracle 导入导出指定表

    导出 exp username/password@127.0.0.1/orcl file=D:\xxx.dmp tables(tablename,tablename) 导入 imp username/ ...

  2. python's @property

    [python's @property] 参考:http://docs.python.org/3/library/functions.html?highlight=property#property

  3. 把二叉搜索树转化成更大的树 · Convert BST to Greater Tree

    [抄题]: 给定二叉搜索树(BST),将其转换为更大的树,使原始BST上每个节点的值都更改为在原始树中大于等于该节点值的节点值之和(包括该节点). Given a binary search Tree ...

  4. Linux 下批量创建用户(shell 命令)

    第一种方法: 用shell批量创建用户,分为2中:1,批量创建的用户名无规律 :2.批量创建的用户名有规律首先,来说下批量创建的用户名无规律的shell:先把需要批量创建的用户名用一个文本文档列出来, ...

  5. Ninject在.NET WebForm和MVC中的使用

    1.建立项目:Models/BLL/DAL/IBLL/IDAL/WebSite 2.WebSite要引用其余几个项目 3.NuGet中搜索Ninject,安装 Ninject.Ninject.Web. ...

  6. Vue 路由缓存

    问题 在路由切换时不需要每次 点击都刷新子路由   尤其是在form表单的情况下  不能让用户 输入一半之后点击其他页面  再点回来 表单数据不见了 解决方案   vue 2.0     之中  有k ...

  7. Python操作mysql之模块pymysql

    pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同.但目前pymysql支持python3.x而后者不支持3.x版本. 本文环境 python3.6.1  Mysql ...

  8. MyEclipse中Web项目文件名上红色和黄色感叹号处理

      MyEclipse中Web项目文件名上红色和黄色感叹号处理     先说红色感叹号: 那就是代表错误,说明你引用的JAR包位置无效,所以,你应该重新将包导入到工程里面去,这个具体应该会吧,如果是初 ...

  9. sqlserver怎么将excel表的数据导入到数据库中

    在数据库初始阶段,我们有些数据在EXCEL中做好之后,需要将EXCEL对应列名(导入后对应数据库表的字段名),对应sheet(改名为导入数据库之后的表名)导入指定数据库, 相当于导入一张表的整个数据. ...

  10. 使用WindowsFormsApplicationBase实现引导界面

    1.需要添加对Microsoft.VisualBasic 引用, 2.准备frmMain,frmSplash两个窗口 说明:        frmSplash在主线程上建立,但是在独立线程上进行消息循 ...