生命周期
为什么要有生命周期?
- vue为了在一个组件的从创建到销毁的一系列过程中添加一些功能,方便我们更好的去控制组件
Vue的生命周期分为三个阶段,8个钩子函数
-
初始化(自动执行)
- beforeCreate
- 组件创建前
- 作用:为整个生命周期做准备工作,初始化事件和自身或是子组件的生命周期做准备
- 意义:数据拿不到,真是DOM也拿不到
- created
- 组件创建结束
- 作用:初始化注入其他选项和激活选项
- 意义:数据可以拿到,真实DOM拿不到
- 项目中:数据请求,也可以修改一次数据
- beforeMount
- 组件挂载前
- 意义:数据可以拿到,真实DOM没有拿到
- 在项目中:数据请求,数据修改
- 内部完成事务
- mounted
- 组件挂载结束,也就是已经插入到页面中了
- 意义:数据可以拿到,真实DOM也可以拿到
- beforeCreate
-
运行中
- 运行中触发条件:数据改变,只要书记改变,就会触发两个钩子函数
- beforeUpdate
- 组件更新前
- 意义:
- 数据是可以拿到更新后的数据
- 也可以拿到更新后的真实DOM
- updated
- 组件更新结束
- 意义
- 可以拿到修改后的数据
- 也可以拿到真实DOM
- 在项目中
- 真实DOM操作
- 第三方库动态实例化
- 内部
- VDOM重新渲染
-
销毁
- 触发条件:组件被删除
- 外部开关销毁
- 内部调用$destroy()
- beforeDestory
- destoryed
- 外部销毁
- 通过开关完成
- DOM被删除了,组件也被删除了
- 通过开关完成
- 内部销毁
- 通过调用$destroy()来完成
- 触发条件:组件被删除
虚拟DOM &Diff算法
- 操作真实DOM越少越好,尽量的去操作数据
- 所以vue利用VDOM的对象模型来模拟DOM结构
- 但是当一个页面很复杂式,DOM结构的模拟就变得很复杂了,所以vue使用了一个新的语法糖,叫做JSX
JSX
- javascript + xml 让我们可以在JS中写dom结构
- render
- 流程
- 第一次时
- template模板使用jsx语法进行编辑
- 通过render函数将jsx解析为 vdom 对象模型
- 将VDOM对象模型渲染为真实DOM,然后挂载到页面中
- 当我们的数据发生改变时
- 重新生成VDOM