最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

每日资讯:VUE的实例的生命周期

来源:博客园

3.Vue实例的生命周期

3.1 什么是Vue实例的生命周期

Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 JS 方法,可以让我们用自己注册的 JS 方法控制整个大局,在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

3.2 Vue实例生命周期图

3.3 什么是生命周期钩子

生命周期钩子:就是生命周期事件的别名。生命周期钩子又叫生命周期函数 也叫生命周期事件。

3.4 生命周期钩子函数有哪些

创建期间的生命周期函数:

beforeCreate:


(资料图)

实例刚在内存中被创建出来,此时,还没有初始化好 data和methods属性。

触发时机:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created:

实例已经在内存中创建完成。此时data和methods已经在内存中创建完成,但是还没有开始编译模板。

触发时机:实例已经创建完成之后被调用。

beforeMount:

此时已经完成了模板的编译,但是还没有挂载到页面中显示。

触发时机:挂载开始之前被调用

mounted:

此时,已经将编译好的模板,挂载到了页面指定的容器中显示。

触发时机:挂载到实例之后调用

运行期间的生命周期函数:

beforeUpdate:

此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点。

触发时机:状态更新之前调用

updated:

此时 data 中的状态值和界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!

触发时机:实例更新完毕之后将会调用此函数

销毁期间的生命周期函数:

beforeDestroy:

在这一步,实例仍然完全可用。

触发时机:实例销毁之前调用

destroyed:

调用之后Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

触发时机:Vue 实例销毁后调用,组件销毁有很多种情况,比如页面关闭,页面跳转。

3.5 测试生命周期

创建一个测试页面,写入需要测试的钩子函数

<script type="text/javascript" src="js/vue.js" ></script>  

{{message}}

<script> var v = new Vue({ el: "#app", data: { message: "Vue的生命周期" }, beforeCreate: function() { console.group("------beforeCreate创建前状态------"); console.log("%c%s", "color:red" , "el : " + this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) }, created: function() { console.group("------created创建完毕状态------"); console.log("%c%s", "color:red","el : " + this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, beforeMount: function() { console.group("------beforeMount挂载前状态------"); console.log("%c%s", "color:red","el : " + (this.$el)); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, mounted: function() { console.group("------mounted 挂载结束状态------"); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, beforeUpdate: function () { console.group("beforeUpdate 更新前状态===============》"); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, updated: function () { console.group("updated 更新完成状态===============》"); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, beforeDestroy: function () { console.group("beforeDestroy 销毁前状态===============》"); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, destroyed: function () { console.group("destroyed 销毁完成状态===============》"); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) } }) </script>

页面运行以后,按F12,查看Console里的信息:

在Console中修改message的值:

关闭页面,会调用对应的销毁函数。

4.Vue内部指令

4.1 v-bind

v-bind 属性绑定

测试案例:

<script type="text/javascript" src="js/vue.js" ></script>     <script>     var app = new Vue({         el:"#app",         data:{             url:"https://www.baidu.com",             msg:"文本框的值"         }     }); </script>

说明:

v-bind后面是 :属性名=,"url"是找到data里面的属性url当我们在控制台改变url和value时,对应值也会变化。类似的,我们还可以绑定其它属性,如src属性、class属性等

v-bind也可以简化为:

百度 

4.2 v-text和 v-html

v-text用来输出双标签里的内容,内容中有标签,标签按原样显示v-html也是用来输出双标签里的内容,内容中有标签,会解析标签

测试案例:

<script type="text/javascript" src="js/vue.js" ></script>
<script>var v=new Vue({el:"#app",data:{msg:"

daimenglaoshi

",isShow:true // 设置是否显示 不能用大写TRUE }})</script>

测试结果:

4.3 v-if,v-else-if,v-else

双分支结构 

测试案例:

<script type="text/javascript" src="js/vue.js" ></script>
{{uname}}欢迎您
请登录
<script >var v=new Vue({el:"#app",data:{ok:true,uname:"daimenglaoshi"}})</script>

说明:

v-if:后面是条件判断,v-else:其它情况
多分支结构:
库存充足
库存紧张
缺货中
<script>var v=new Vue({el:"#app",data:{num:101}})</script>

4.4 v-for

1.for循环普通数组

案例代码:

{{item}}

{{index}}-------{{item}}

<script>var v=new Vue({el:"#app",data:{list:[1,2,3,4,5]}})</script>

说明:

item用来循环数值,index用来循环下标
2.for循环对象数组

案例代码:

{{user.id}}{{user.name}}
<script>var v=new Vue({el:"#app",data:{userList:[{id:1,name:"daimenglaoshi"},{id:2,name:"2398779723"} ]}})</script>
3.for循环对象

案例代码:

{{value}}
{{key}}=>{{value}}
<script>var u=new Vue({el:"#app",data:{user:{id:1,name:"呆萌老师",qq:"2398779723"}}})</script>
4.for循环数字

案例代码:

{{i}}
<script>var v=new Vue({el:"#app"})</script>

关键词: 生命周期 测试结果 所有的事