Vue生命周期+计算属性+监听器
生命周期
Vue
生命周期:一个Vue
实例从 创建
到 销毁
的过程。
生命周期的四个阶段:创建
、 挂载
、 更新
、 销毁
生命周期钩子函数:
-
创建阶段:响应式数据……
beforeCreate
:在实例初始化之后,数据观测(data observer)
和event / watch
时间配置之前被调用。
此时组件的选项还未挂载,因此无法访问
methods
、data
、computed
上的方法和数据created
:实例创建完成后调用。此阶段实例已完成以下配置:数据观测(data observer)
、属性和方法的运算、watch / event
事件回调。但是,挂载还未开始,$el
属性目前不可见。
通常我们可以在这里对实例进行预处理。也有一些同学喜欢在这里发
ajax
请求,值得注意的是,这个周期中是没有什么方法来对实例化过程进行拦截的。因此假如有某些数据必须获取才允许进入页面的话,并不适合在这个页面发请求。建议在组件路由勾子
beforeRouteEnter
中来完成。 -
挂载阶段:渲染模板
beforeMount
:在挂载开始之前被调用(模板渲染到显示页面之前)mounted
:在模板渲染到页面之后。(el
替换,并挂载到实例上之后被调用。)
beforeRouteEnter
的next
的钩子比mounted
触发靠后,指令的生效在mounted
周期之前 -
更新阶段:修改数据,更新视图
beforeUpdate
:数据更新时调用,发生在虚拟DOM
重新渲染和打补丁之前。可以在这个钩子中进一步的更改状态。这不会触发附加的重渲染过程。
当执行该钩子函数时,页面中显示的数据还是旧的,此时
data
的数据是最新的,页面尚未和最新数据保持同步updated
:由于数据更改导致的虚拟DOM
重新渲染和打补丁, 在这之后会调用该钩子。在这个钩子被调用时,组件DOM
已经更新。
避免在此过程中更改状态,否则可能会导致无限循环。
-
销毁阶段: 销毁实例
- beforeDestroy:实例销毁之前调用,在这一步,实例仍然完全可用。
以使用
this
来获取实该过程还可例。 一般在这一步做一些重置的操作
,比如清除组件中的 定时器
和监听的 DOM 事件
。destroyed
:vue
实例销毁后调用。调用后,vue
实例指示的所有东西都会解绑,所有的事件监听都会被移除,所有的子实例也会被销毁
-
其他钩子函数
activated
:被包裹组件被激活时调用deactivated
:被包裹组件停止使用时调用errorCaptured
:错误捕获,接收参数: 错误对象,发生错误的组件实例,一个包含错误来源信息的字符串serverPrefetch
:服务器渲染中做数据预取的方式
(重点)子组件的生命周期: 其中vm代表父组件,child代表子组件
vm.created
→vm.beforeMount
→child.created
→child.beforeMount
→child.mounted
→vm.mounted
methods
方法
作用:给实例提供一个方法
,调用以处理业务逻辑
。
语法:
1、声明在
methods
配置项中。2、需要时调用 →
this
.方法名() / {{ 方法名() }} /@事件名
="方法名"
计算属性
概念:基于现有的数据
,计算出来的新属性
。依赖
的数据变化,自动
重新计算。
语法:
1、声明在
computed
配置项中,一个计算属性对应一个函数。2、使用起来,和普通属性一样 → {{ 计算属性名 }}
计算属性 → 对一段求值的代码
进行封装,然后 return
返回出来
// 1、简写(常用写法)
computed: {
计算属性名 () {
// 基于现有数据,编写求值逻辑
return 结果
}
}
// 2、完整写法
computed: {
计算属性名: {
get() {
// 计算逻辑
return 结果
},
set(修改的值) {
// 修改逻辑
}
}
}
vs methods
方法
computed
具有缓存特性
,能提升性能。
计算属性会对计算出来的
结果缓存
,再次使用时,直接读取缓存。只有当
依赖项变化
了,才会自动重新计算 → 并再次缓存
watch
监听器
作用:监听数据变化
,执行一些 业务逻辑 或 异步操作
语法:
// watch内的方法会在数据变化时,触发执行
// 1、简单写法 → 监听简单数据类型
watch: {
数据属性名(newVal, oldVal) {
// newVal 变化后的新值, oldVal 变化前的旧值
// 可以根据这两字段做 业务逻辑 或 异步操作
},
'对象.属性名'(newVal, oldVal) {
// 逻辑处理
}
}
// 2、完整写法 → 添加配置项
watch: {
数据属性名: {
deep: true, // true 表示对复杂类型深度监视
immediate: true, // true 表示初始化立刻执行一次 handler 方法
handler (newVal, oldVal) {
// 逻辑处理
}
}
}
转载自:https://juejin.cn/post/7276026646255534115