400-650-7353

精品课程

您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】Vue中的生命周期

【Web前端基础知识】Vue中的生命周期

  • 发布: Web前端培训
  • 来源:
  • 2021-08-30 16:59:26
  • 阅读()
  • 分享
  • 手机端入口

以下主要从几个方面来讲:

1.vue的生命周期是什么

2.vue生命周期的在项目中的执行顺序

3.vue中内置的方法 属性和vue生命周期的运行顺序(methods、computed、data、watch)

一、vue的生命周期是什么

vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。在组件中具体的方法有:

  1. beforeCreate 
  2.   created 
  3.   beforeMount 
  4.   mounted 
  5.   ( 
  6.       beforeUpdate 
  7.       updated 
  8.   ) 
  9.   beforeDestroy 
  10.   destroyed 

对应的中文就如其字面意思,英文不好的童鞋可以有道翻翻

好了,这里要上图啦~~~

二、vue生命周期的在项目中的执行顺序

...

data () {

return {

rendered: false,

}

}

...

1.beforeCeate(){

console.log(this.rendered); // undefined

}

2.created() {

console.log(this.$el);//undefined

console.log(this.rendered); // false

}

3.beforeMount() {

console.log(this.$el);//undefined

}

4.mounted() {

console.log(this.$el);

}

5.beforeDestroy(){

console.log(this.$el);

console.log(this.rendered);

}

6.destroyed() {

console.log(this.$el);

console.log(this.rendered);

}

三、vue中内置的方法 属性和vue生命周期的运行顺序(methods、computed、data、watch、props)

从第一二点可知道data的初始化是在created时已经完成数据观测(data observer),并且诸如methods、computed属性 props等已经初始化;那问题来了,

data props computed watch methods他们之间的生成顺序是什么呢?

props => methods =>data => computed => watch;

学习疑问申请解答
您的姓名
您的电话
意向课程
 

中公优就业

IT小助手

扫描上方二维码添加好友,请备注:599,享学习福利。

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

推荐阅读

优就业:ujiuye

关注中公优就业官方微信

  • 关注微信回复关键词“大礼包”,享学习福利
QQ交流群
在线疑问解答
(加群备注“网站”)
IT培训交流群 加入群聊 +
软件测试 加入群聊 +
全链路UI/UE设计 加入群聊 +
Python+人工智能 加入群聊 +
互联网营销 加入群聊 +
Java开发 加入群聊 +
PHP开发 加入群聊 +
VR/AR游戏开发 加入群聊 +
大前端 加入群聊 +
大数据 加入群聊 +
Linux云计算 加入群聊 +
优就业官方微信
扫码回复关键词“大礼包”
享学习福利

测一测
你适合学哪门IT技术?

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
 
课程资料、活动优惠 领取通道