Vue实例的生命周期

一.什么是生命周期

Vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能

二.Vue实例生命周期的图示:

 三.含义

【beforeCreate】(创建前)
在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化
【created】(创建后)
在实例创建之后调用。此时已完成数据观测、事件方法,但尚未开始DOM编译,即未挂载到document中
【beforeMount】(载入前)
在mounted之前运行
【mounted】(载入后)
在编译结束时调用。此时所有指令已生效,数据变化已能触发DOM更新,但不保证$el已插入文档
【beforeUpdate】(更新前)
在实例挂载之后,再次更新实例(例如更新 data)时会调用该方法,此时尚未更新
DOM结构
【updated】(更新后)
在实例挂载之后,再次更新实例并更新完DOM结构后调用
【beforeDestroy】(销毁前)
在开始销毁实例时调用,此刻实例仍然有效
【destroyed】(销毁后)
在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑,子实例也被销毁
 

四.Vue.js中的挂载

虚拟dom与真实dom建立关系,让Vue实例控制页面中的某个区域的过程,称之为。 

的方式有:1、通过“el:'css选择器'”语句进行配置;

                         2、通过“Vue实例.$mount ("css选择器")”语句进行配置。

过程: 虚拟DOM,即一堆对象存储了一堆数据,然后这些数据用JS的API,比如createElement,创造出DOM,这个过程是挂载前的动作。 创造出的DOM还没有被使用,仅仅在内存中,需要“挂载”。 当最外层有一个叫app的id的DOM,挂载就是document.querySelector(“app”).appendChild(dom),即完成挂载。

五.v-model指令

本质: 它负责监听用户的输入事件,从而更新数据,并对一些极端场景进行一些特殊处理。同              时,v-model会忽略所有表单元素的value、checked、selected特性的初始值,它总是将vue            实例中的数据作为数据来源。 然后当输入事件发生时,实时更新vue实例中的数据。

作用:v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定它会根据控            件类型自动选取正确的方法来更新元素。

这个指令一般是给表单元素使用的。(输入框、密码框、单选框、文本框、下拉框...)

作用:可以获取表单元素的值,也可以设置表单元素的值。

语法:<表单元素 v-model=“变量”></表单元素>

补充:是一种双向奔赴

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值