当前位置：首页 > news >正文

生命周期函数、组件

news 2025/9/16 15:51:30

1. 生命周期函数

beforeCreate ：无法通过 vm 访问data 中的数据、methods 中的方法
created ：可以访问 vm 中的 data 的数据， methods 中的方法
beforeMount：为经 Vue 编译的 dom
mounted：经过 vue 编译的 dom ，对dom 操作有效，可以进行开启定时器、发生网络请求、订阅信息、绑定自定义事件等初始化操作
beforeUpdate：数据是更新的，页面没有更新
updated：数据也页面都是更新的
beforeDestroy：vm 中所有的 data、methods、指令处于可用状态，马上执行销毁过程；一般此状态：关闭定时器、取消订阅信息、解绑自定义事件收尾操作
destroyed：完全销毁一个实例，清除它与其他实例的连接，解绑它的全部指令以及事件监听器

vm. $template 是替换掉根节点

总结：

1. 常用的生命周期函数：

mounted：发送ajax 请求，启动定时器、解绑自定义事件、订阅消息等【初始化操作】
beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

2. 关于销毁 vue 实例

销毁后借助 vue 开发者工具看不到任何信息
销毁后自定义事件会失效。但是原生的 DOM 事件任然有效
一般不会再 beforeDestroy 操作数据，因为操作数据不会再触发更新流程了

2. 组件化

2.1 理解组件

2.1.1 基础概念

组件的定义：实现应用中局功能代码（css、html、js）和资源（mp3、zip）的集合
模块：前端的模块就是一个js文件
模块化：一个js 文件里面划分了很多小的js文件（a.js\b.js）
组件化：一个功能一个组件

2.1.2 非单文件组件

定义：一个组件中包含n个组件
不要写el配置项，因为最终的vm都要被一个vm管理，由vm决定服务
data ( ) { } : 一定要写成函数形式，不要写对象data： { } 形式；因为避免组件复用，数据存在引用关系
template 可以配置组件结构
组件第一个字母最好大写！

<!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.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><div id="root"><!-- 三、编写组件标签 --><girl></girl><hr /><boy></boy></div></body>
<script type="text/javascript">Vue.config.productionTip = false// 一、创建组件1const girl = Vue.extend({// name 是同时改变创建组件和注册组件的名字name: 'peopel'template: `<div><h2>姓名：{{name}} </h2><h2>年龄：{{age}} </h2></div>`,data() {return {name: 'linda',age: 18,}}})// 一、创建组件2const boy = Vue.extend({template: `<div><h2>姓名：{{name}} </h2><h2>年龄：{{age}} </h2></div>`,data() {return {name: 'json',age: 28,}}})// 全局注册组件,所有的root 里面都可以使用组件Vue.component('girl', girl)// 创建vmnew Vue({el: '#root',// 二、注册(局部)组件（组件名：组件 key value形式）components: {// girl: girl,boy: boy,},data: {}})</script></html>

组件本质是一个VueComponent 的构造函数，是Vue.extend 生成的
只需要写<School/>, vue 解析时会帮我们创建组件的实例化对象，即执行： new VueComponent（options）
每次调用Vue.extend ,返回的是一个全新的vueComponent
this 指向：
（1）组件配置中：data函数、method函数、watch函数、component中的函数、他们的 this 指向均是 VueComponent 实例对象
（2）new Vue（options）配置中：data 函数、method函数.... this 指向的是Vue 实例对象
VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。