知食记
搜索文档…
知食记
思维导图
归档
博客
TypeScript tsconfig.json 整理
this 陷阱与原理
时间戳与时区
vue-cli 项目添加 tailwind.css
实现 JavaScript 数组的逆序索引
工程师段位记
Jest 内部原理剖析
如何成为技术高手
Vue lifecycle hook little trick
利用 Cloudflare Worker 定制 Gitbook
如何解除端口占用?
🎃CSS
CSS基础
CSS3
SCSS
🎉JavaScript
JS 概念
JS陷阱
JS开发知识点
实现JS常见函数
实现JS 常见操作函数
JS Worker
ES6
ES6 函数
Typescript
V8
🕹️框架
Vue
Vue3
React
React-Redux
React Hooks
Nuxt
Koa2
🎯算法
算法与数据结构
🎁HTML
DOM
SVG
🏈计算机网络
浏览器
计算机网络
🥊前端生态
Webpack
Babel
Fetch
Axios
Npm
Yarn
业务开发
微前端
Hexo
🏀后端
Node
Java
Python
🕹️面试
面试真经
To-do
🤖开源
开源项目
🧸其他
Linux
Git
正则
设计模式
计算机理论
Group 1
由
GitBook
提供支持
Vue lifecycle hook little trick
我们都知道 React Hook 刮起了函数式编程的旋风,与之对应的,Vue 也在 3.0 借鉴了这种思想。不过Vue 3.0 hook 不在本文的讨论范畴,本文将重点总结一下Vue 2.0的生命周期 Hook。
组件上的 hook 小 trick
比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,常规的写法可能如下:
Parent.vue
1
<
Child
@mounted
=
"
doSomething
"
/>
Copied!
Child.vue
1
mounted
()
{
2
this
.
$emit
(
"mounted"
);
3
}
Copied!
此外,还有一种特别简单的方式,子组件不需要任何处理,只需要在父组件引用的时候通过@hook 来监听即可,代码如下:
1
<
Child
@hook:
mounted
=
"
doSomething
"
/>
2
<
Child
@hook:
updated
=
"
doSomething
"
/>
Copied!
方法中的 hook 小trick
可以通过一个程序化的侦听器来注册生命周期的绑定
1
mounted
:
function
()
{
2
var
picker
=
new
Pikaday
({
3
field
:
this
.
$refs
.
input
,
4
format
:
'YYYY-MM-DD'
5
})
6
7
this
.
$once
(
'hook:beforeDestroy'
,
function
()
{
8
picker
.
destroy
()
9
})
10
}
Copied!
以前
如何成为技术高手
下一个
利用 Cloudflare Worker 定制 Gitbook
最近更新
2yr ago
复制链接
内容
组件上的 hook 小 trick
方法中的 hook 小trick