Vue - 5 生命周期与组件

Vue - 5 生命周期与组件
- 1.Vue的生命周期钩子函数
- 2.Vue组件

Vue - 5 生命周期与组件

1.Vue的生命周期钩子函数

钩子函数	描述
beforeCreate	创建Vue实例之前调用
created	创建Vue实例成功后调用（可以在此处发送异步请求后端数据）
beforeMount	渲染DOM之前调用
mounted	渲染DOM之后调用
beforeUpdate	重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated	重新渲染完成之后调用
beforeDestroy	销毁之前调用
destroyed	销毁之后调用

Vue.js的生命周期钩子函数，是Vue实例创建、挂载、更新和销毁过程中自动调用的函数，这些函数让你可以控制和执行一些自定义的代码。Vue 的生命周期钩子函数主要分为以下四个阶段：

（1）创建阶段：

beforeCreate：实例刚在内存中被创建出来，此时还没有初始化好 data 和 methods 属性。
created：实例已经在内存中创建好，data 和 methods 已经被初始化好了，此时还没有开始编译模板。

（2）挂载阶段：

beforeMount：此时模板已经编译完成，但还没有挂载到页面中。
mounted：此时实例已经挂载到页面上，页面中的元素已经可以使用了。

（3）更新阶段

beforeUpdate：数据更新时触发，但是页面还没有被重新渲染。
updated：数据更新完成，页面已经重新渲染。

（4）销毁阶段：

beforeDestroy：实例销毁之前调用，此时实例仍然完全可用。
destroyed：实例销毁之后调用，此时实例已经无法使用。

lifecycle

1.Created用的较多，可以发送ajax请求

2.beforeDestroy 可以通过以下方法来实现

组件一创建，created中启动一个定时器

组件被销毁,beforeDestroy销毁定时器

3.由于http协议的特性，服务端无法主动发送消息给客户端，所以基于http协议的实时聊天器，就是通过轮询：定时器 + ajax来实现的

4.websocket协议：服务端主动推送消息，参考以下

https://zhuanlan.zhihu.com/p/371500343

2.Vue组件

在 Vue.js 中，组件是一种可复用的 Vue 实例，可以定义自己的模板、样式和逻辑，并且可以被其他 Vue 实例复用。使用组件可以将复杂的页面分解为多个独立的小组件，从而使代码更加简洁、可维护、可复用。

组件可以通过 Vue.component() 方法进行注册，也可以使用 .vue 文件进行定义。在注册组件时，需要指定组件的名称和组件选项。组件选项包括组件的数据、模板、方法、生命周期钩子函数等。定义好组件之后，就可以在其它 Vue 实例中使用该组件了。

 Vue.component('my-component', {
  data: function () {
    return {
      message: 'Hello Vue!'
    }
  },
  template: '<div>{{ message }}</div>'
})

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- vue 文件 -->
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
    <my-component>
       
    </my-component>
  
  
</div>
</body>
<script>
    // 定义全局组件
    Vue.component('my-component', {
        // data需要以方法的形式出现，data中的数据可以重复使用
        data() {
            return {
                name: 'duoduo',
                show: false,
            }
        },
        // 在全局中设计局部组件
        template: `
          <div>
          <button @click="handleShow">展示名字</button>
               <sections></sections>
          <div v-if="show">名字{{ name }}</div>
          </div>`,
        methods: {
            handleShow() {
                this.show = !this.show
            }
        },
        // 局部组件
        components: {
            sections: {
                template: `
                   <div>
 
                  <div>年龄{{ age }}</div>  </div>
                  `,
                data() {
                    return {
                        age: 19
                    }
                },                                                            
            },
 
 
        }})
 
    let vm = new Vue({
        el: '.app',
        data: {},
        methods: {},
    })
</script>
</html>

posted @ 2023-02-17 00:49 Duosg 阅读(51) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue - 6 组件与属性

· Vue - 回顾与总结

· 【五】Vue之生命周期钩子函数

· Vue入门到关门之生命周期钩子

· Vue的生命周期简介

公告

昵称： Duosg
园龄： 2年5个月
粉丝： 11
关注： 21

+加关注

2025年3月

日

一

二

三

四

五

六

随笔档案

阅读排行榜

评论排行榜

1. 十二周周末小结结(1)

duoduosg

Vue - 5 生命周期与组件

Vue - 5 生命周期与组件

1.Vue的生命周期钩子函数

2.Vue组件

公告

搜索

常用链接

我的标签

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	Vue.component('my-component', {
	data: function () {
	return {
	message: 'Hello Vue!'
	}
	},
	template: '<div>{{ message }}</div>'
	})

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<!-- vue 文件 -->
	<script src="./js/vue.js"></script>
	</head>
	<body>
	<div class="app">
	<my-component>

	</my-component>


	</div>
	</body>
	<script>
	// 定义全局组件
	Vue.component('my-component', {
	// data需要以方法的形式出现，data中的数据可以重复使用
	data() {
	return {
	name: 'duoduo',
	show: false,
	}
	},
	// 在全局中设计局部组件
	template: `
	<div>
	<button @click="handleShow">展示名字</button>
	<sections></sections>
	<div v-if="show">名字{{ name }}</div>
	</div>`,
	methods: {
	handleShow() {
	this.show = !this.show
	}
	},
	// 局部组件
	components: {
	sections: {
	template: `
	<div>

	<div>年龄{{ age }}</div> </div>
	`,
	data() {
	return {
	age: 19
	}
	},
	},


	}})

	let vm = new Vue({
	el: '.app',
	data: {},
	methods: {},
	})
	</script>
	</html>