1.1 组件的生命周期

  1、说明

      1. Vue将组件看成是一个有生命的个体,跟人一样,定义了各个阶段,

      2. 组件的生命周期:组件的创建过程

      3. 组件生命周期钩子函数:当组件处在某个阶段,要执行某个方法,来通知我们,组件进入某个阶段,这个方法就是组件生命周期的钩子函数

      4. 组件的创建过程:这些方法在组件中直接定义,会按照顺序执行,没有参数,作用域都是组件实例化对象

  2、组件生命周期中依次执行的八个钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<Home></Home>
</div> <script src="vue.js"></script>
<script>
var Home = Vue.extend({
template:"<h1>I am h1!! 显示变量: {{msg}}</h1>",
data:function () {
return {
'msg':'I am msg'
}
}, // 方法1:组件实例被创建,组件属性计算之前,如data属性等
beforeCreate: function () {
console.log(111, this, arguments)
}, // 方法2:组件实例创建完成,属性已经绑定,但DOM还未生成,$el 属性还不存在
created: function () {
console.log(222, this, arguments)
}, // 方法3:模板编译/挂载之前
beforeMount: function () {
console.log(333, this, arguments)
}, // 方法4:模板编译/挂载之后(不保证组件已在document中)
mounted: function () {
console.log(444, this, arguments)
}, // 方法5:组件更新之前
beforeUpdate: function () {
console.log(555, this, arguments)
}, // 方法6:组件更新之后
updated: function () {
console.log(666, this, arguments)
}, // 方法9:组件销毁前调用
beforeDestory: function () {
console.log(777, this, arguments)
}, // 方法10:主键销毁后调用
destoryed: function () {
console.log(888, this, arguments)
}, // 方法7:组件被激活时调用(用的少)
// activated: function() {
// console.log(777, this, arguments)
// }, // 方法8:组件被移除时调用(用的少)
// deactivated: function () {
// console.log(888, this, arguments)
// }, }); Vue.component('home',Home); var app = new Vue({
el:'#app',
data:{
'isShow':true,
}
})
</script>
</body>
</html>

组件中八个钩子函数执行顺序

  3、图片展示

    

  4、组件生命周期 常用的两个过程

      1)created: 实例已经创建完成,并且已经进行数据观测和事件配置

      2)mounted:模板编译之后,已经挂载,此时才会渲染页面,才能看到页面上数据的展示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue生命周期</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
data:{
msg:'welcome to itany'
},
methods:{
update(){
this.msg='欢迎来到南京网博!';
},
destroy(){
// this.$destroy();
vm.$destroy();
}
},
beforeCreate(){
alert('组件实例刚刚创建,还未进行数据观测和事件配置');
},
created(){ //常用!!!
alert('实例已经创建完成,并且已经进行数据观测和事件配置');
},
beforeMount(){
alert('模板编译之前,还没挂载');
},
mounted(){ //常用!!!
alert('模板编译之后,已经挂载,此时才会渲染页面,才能看到页面上数据的展示');
},
beforeUpdate(){
alert('组件更新之前');
},
updated(){
alert('组件更新之后');
},
beforeDestroy(){
alert('组件销毁之前');
},
destroyed(){
alert('组件销毁之后');
}
});
}
</script>
</head>
<body>
<div id="itany">
{{msg}}
<br> <button @click="update">更新数据</button>
<button @click="destroy">销毁组件</button>
</div>
</body>
</html>

生命周期执行顺序

04: vue生命周期和实例属性和方法的更多相关文章

  1. Vue系列(二):发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

  2. Vue生命周期,计算属性、方法、侦听器

    vue实例和组件都有生命周期函数,beforeCreate()实例或组件没有被创建的时候执行的钩子函数:created()是实例或组件被创建完成的时候执行的钩子函 数:beforeMount()函数是 ...

  3. vue自带的实例属性和方法($打头)

    Vue 实例内置了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = new Vue({ el: '#examp ...

  4. Vue生命周期 以及应用场景

    首先一张官方图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  6. vue生命周期以及vue的计算属性

    一.Vue生命周期(vue实例从创建到销毁的过程,称为生命周期,共有八个阶段) 1.beforeCreate :在实例初始化之后,数据观测 (data observer) 和 event/watche ...

  7. Vue.js 生命周期、计算属性及侦听器

    一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...

  8. vue生命周期的介绍

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

  9. vue 生命周期

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

随机推荐

  1. hibernate.validator.constraints.NotEmpty校验请求参数报错java.lang.NoClassDefFoundError: javax/el/PropertyNotFoundException

    spring maven项目,使用hibernate validator 注解形式校验客户端的请求参数. hibernate-validator版本:5.0.2.Final validation-ap ...

  2. unity3d-角色控制器续

    自学是一个坚持和寂寞的过程,写博客更是一个总结与成长的过程,加油! 角色控制器续 之前学习了角色漫游,但里面有很多效果都不是我想要的.只有自己的动手实践了才能理会其中的奥妙.所以我又琢磨了许久. 为了 ...

  3. MACD各分时背离所对应的时间

    MACD各分时背离所对应的时间 5分钟背离结构——2小时.           15分钟背离结构——一天半(6小时).           30分钟背离结构——3天(12小时).            ...

  4. 并查集(disjoint)

    合并,查找的集合 第一,建立两个函数,一个用来查找(find),一个用来合并(merge): 如下的一个模板: 题目: 亲戚(Relations) 或许你并不知道,你的某个朋友是你的亲戚.他可能是你的 ...

  5. c# 使用MS SqlServer,连接成功,但是还报异常A connection was successfully established with the server, but then an error occurred during the login process. (provider: SSL Provider, error: 0。。。。

    c# 使用MS SqlServer,连接成功,但是还报异常A connection was successfully established with the server, but then an ...

  6. 同一个电脑安装两个jdk版本

    同一个电脑安装两个jdk版本 场景:公司项目使用的jdk为1.,最近不是很忙,学习scala.该系统使用到了jdk1.8的特性,所以I need 俩版本,开整!!! . 准备两个版本的jdk我的两个j ...

  7. sqlserver中查询表字段的sql语句

    sqlserver中的表信息字段信息这些东西也是放到系统表中的,以下sql语句用于查询某表的字段信息. select t1.id object_id,t1.name object_name,t2.va ...

  8. Rpgmakermv(18)GALV RollCredits

    原文: Galv's Roll Credits ---------------------------------------------------------------------------- ...

  9. C# Activator和new的区别

    1.你需要动态的创建一个实例模型的时候,就用Activator.CreateInstance(Type type);如果是明确的知道要创建哪个实例的模型,就可以用 new Class1()了. T t ...

  10. CS131&Cousera图像处理学习笔记 - L4&W2滤波和卷积

    cs131: http://vision.stanford.edu/teaching/cs131_fall1617/ coursera: https://www.coursera.org/learn/ ...