Vue - 5 生命周期与组件
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：实例销毁之后调用，此时实例已经无法使用。
1.Created用的较多，可以发送ajax请求
2.beforeDestroy 可以通过以下方法来实现
- 组件一创建，created中启动一个定时器
- 组件被销毁,beforeDestroy销毁定时器
3.由于http协议的特性，服务端无法主动发送消息给客户端，所以基于http协议的实时聊天器，就是通过轮询：定时器 + ajax来实现的
4.websocket协议：服务端主动推送消息，参考以下
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>
