vue生命周期钩子,vue生命周期钩子,vue生命周期钩子

说一下vue的生命周期钩子函数：

vue 的生命周期11个钩子函数是按照以下的顺序来的：（不可逆转哦,第11个除外）
一. 组件创建前后

1.beforeCreate
2.created

如，写一个子组件，然后挂在到父组件，在子组件中，console.log 子组件中的

data（）{return {a:1},beforeCreate(){console.log(this.a)//undefined},created(){console.log(this.a)//1}
}

.
.

二. vue启动前后

3.beforeMount
4.mounted

这两个的意思就是，
vue在beforeMount时，还不管事，也就是说，还没有渲染数据到<div id="app"><div/>里面，此时的这个组件还是空的

当mounted时，才会往<div id="app"><div/> 添加东西，也就是vue正式
接管<div id="app"><div/>

可以获取#app的innerHTML查看差异；

beforeMount(){console.log(document.getElementById('app').innerHTML)//空的
},
mounted(){console.log(document.getElementById('app').innerHTML)//#app里的内容
}

.
.

三. 组件更新前后

5.beforeUpdate
6.updated

这个就不用我多说了吧？当子组件里面的 视图改变 的时候触发。
如，做一个按钮，让data里面的a++，假如一开始a是1
beforeUpdate返回1
updated返回2

beforeUpdate(){console.log(document.getElementById('a').innerHTML)//1
},
updated(){console.log(document.getElementById('a').innerHTML)//2
}

再点一次
beforeUpdate返回2
updated返回3。。。
.
.

四. 组件销毁前后(一般配合v-if使用)

7.beforeDestroy
8.destroyed

给这个子组件用v-if来控制它的销毁和创建，注意以下：v-show不行。
子组件销毁前触发beforeDestroy
子组件销毁后触发destroyed
第一次会触发7.8.
创建子组件后会触发以上的第1.2.3.4.钩子函数。

有一个问题，如果我们在子组件里写一个定时器，然后，子组件被销毁了，定时器还会执行吗？
答案是会的
所以这时候就会用到了destroyed,在组件被销毁后，我们把定时器给清除就好了。

所以这两个钩子函数一般用于做性能的优化。
.
.

五. 组件激活时，未激活时

9.activated
10.deactivated

这两个钩子函数呢一般配合<keep-alive><keep-alive/>来使用。
通过看四。这个例子，你肯定知道了一个组件怎么被销毁和创建。
但是我们知道通常一个组件是很大的，如果我们总是一直创建、销毁、创建、销毁。。。这样很不合理，而且很浪费性能。。。

这时候我们就可以用<keep-alive><keep-alive/>配合着两个钩子函数来控制组件的激活和不激活。

说一下<keep-alive><keep-alive/>，它就相当于把你的组件给缓存下来了，目的呢就是不让组件重复的渲染，然后我们通过v-if触发，子组件就不会再触发7 和 8 了，而是只会频繁的触发9 和 10
这样性能会比7 和 8 好的多。
.
.

六. 当捕获一个来自子孙组件的错误时被调用

11.errorCapture

当子孙组件报错的时候，父组件会触发这个钩子函数，并且会返回三个参数，
第一个参数是错误对象
第二个参数是报错的子孙组件
第三个参数是报错的子孙组件的具体哪个地方报错。（如，假如我没有定义b这个变量，但是我去console.log(b) 这一句肯定会报错，假如我把这句错误代码写在了created这个钩子函数里，那第三个参数会返回就是：created hook）

具体第11个没深入研究，喜欢的可以去看下官网的 errorCapture。

好啦，手打不易，给个赞吧。
还是那句话，如果有说的不对的地方，请指教。

vue生命周期钩子,vue生命周期钩子,vue生命周期钩子相关推荐

vue 加载时掉用mounted_Vue实例中生命周期created和mounted的区别详解
前言本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 生命周期先上图什么是生命周期 Vue ...
vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
[vue] 跟keep-alive有关的生命周期是哪些？描述下这些生命周期
[vue] 跟keep-alive有关的生命周期是哪些?描述下这些生命周期 activated和deactivatedkeep-alive的生命周期1.activated: 页面第一次进入的时候,钩子 ...
Vue 实例之数据绑定，事件，组件，生命周期！！！
文章目录关于 vue 设计模式的简介 1.Vue实例创建简单 vue 实例 el 唯一根标签: data: methods: computed: watch: filters: 2.Vue 数据绑 ...
Vue 生命周期篇探索-第三篇：生命周期-更新流程
文章目录探索学习 Vue 生命周期篇第三篇:生命周期-更新流程生命周期-更新流程 1. mounted(挂载后) 2. beforeUpdate (更新前) 3. Virtual DOM re- ...
reactjs组件生命周期：componentWillReceiveProps及新旧版本生命周期钩子函数对比
reactjs组件生命周期:componentWillReceiveProps及新旧版本生命周期钩子函数对比
Vue 生命周期探索：第四篇：生命周期-销毁流程
文章目录探索学习 Vue 生命周期篇第四篇:生命周期-销毁流程生命周期_销毁流程 1. beforeDestory (销毁前) 2. Teardown watchers,child compon ...
Vue钩子函数以及父组件的8个钩子和子组件的8个钩子的先后执行的顺序
** vue组件生命周期 ** 一个组件从创建到销毁的整个过程就是生命周期生命周期函数(钩子函数) vue 框架内置函数,随着组件的生命周期,自动按次序执行作用:特定的时间点,执行某些 ...
Vue的钩子函数是什么意思?Vue都有哪些钩子函数？
Vue的钩子函数是什么意思?Vue都有哪些钩子函数? Vue钩子函数就是指在一个Vue实例从创建到销毁的过程自动执行的函数. beforeCreate:在Vue实例创建之前执行. Created:在V ...
android tabhost 生命周期,FragmentTabHost + FragmentLayout布局框架，Fragment生命周期
使用FragmentTabHost作为底部,FrameLayout占位,搭建主页框架: android:id="@+id/home_content_fl" android:layo ...

vue生命周期钩子,vue生命周期钩子,vue生命周期钩子

vue生命周期钩子,vue生命周期钩子,vue生命周期钩子相关推荐

最新文章

热门文章