vue 生命周期的理解

向右看齐 2021-10-19 10:46 354阅读 0赞

vue的生命周期钩子： beforeCreate、created、beforeMount、mounted、beforeUpdate、update、beforeDestroy、destroyed、activated、deactivated、errorCaptured；在 vue-v2.6 的版本中，又新增了 serverPrefetch 钩子；

### 　　beforeCreate ###

在这个钩子函数内，初始化了 inject、props、methods、data、computed、wacth、provied；所以在这个钩子里还不可以使用 this；

### 　　created ###

在这个钩子函数内，将会挂在实例执行 vm.$mount(vm.$options.el)

因为在 beforeCreate 钩子内已经将数据进行了初始化，所以我们可以在这个钩子内进行一些 data 实例数据的操作；对于 ajax 请求，通常由于有时候会在这个钩子内对一些 data 数据进行操作，所以个人用的比较多一点，一般就将 ajax 请求放在了这个里边，其实对于 ajax 放在 created 还是 mounted 区别不是很大，因为 created 和 mounted 之间的时间差其实是可以忽略的，队友有时候考虑的会引起二次渲染的问题，其实是没必要去考虑的，因为 ajax 本身就是异步的请求，一般就根据具体的需要去考虑将 ajax 放在哪里，和 react 一样的，mounted 和 componentDidMount 这里边 dom 实例已经挂在，我们就可以对一些 dom 进行处理了

### 　　beforeDestory ###

在这个钩子内还可以使用 this；

### 　　destoryed ###

在这个钩子内是不可以使用 this 的，实例已经在 beforeDestory 被销毁；

### 　　activated ###

activated 这个钩子一般会配合着 keep-alive 来使用，用 keep-alive 进行组件的缓存，再次进入组件的时候，就直接跳过前边的钩子函数不再重新执行，而直接执行 activated 钩子；

这个钩子在组件第一次渲染的时候会被调用，之后每次缓存组件被激活的时候调用；其调用机制就是，第一次调用的时候，是在 mounted 之后，beforeRouterEnter 守卫传给 next 的回调之前调用； 第二次调用的时候，因为组件被缓存了，mounted 以及之前的都不再调用了，就直接从 activated 钩子开始了；

### 　　deactivated ###

该钩子函数在 keep-alive 组件停用的时候调用，在服务器渲染期间不被调用；

使用了 keep-alive 就不会调用 beforeDestory 和 destoryed 钩子了，因为组件没有被销毁，而是缓存起来了，所以这个钩子可以看做是 beforeDestory 和 destoryed 的替代；

### 　　errorCaptured ###

这个钩子好像是 v2.5 的版本新加的，主要用来处理一些异常错误，基本不怎么去使用

### 　　serverPrefetch ###

serverPrefetch 的前身是 ssrPrefresh；这个钩子是用来处理 ssr 的；允许我们在渲染的过程中 “等待” 异步数据，可以在任何组件中使用，而不仅仅是路由组件；

keep-alive 是 vue 源码中实现的一个全局抽象组件，即 vue 内置的一个组件；通过自定义的 render 函数并且利用了插槽来实现数据缓存和更新；所有的抽象组件是通过定义 abstract 选项来生命的；抽奖组件不渲染真实的 dom，而且不会出现在父子关系的路径上（initLifecycle 会忽略抽象组件）

我们在使用 keep-alive 的使用，通常都会使用到元信息，即

这样的话，我们难免的就是会多写了几串代码，在vue2.1.0 之后，新增了两个属性： include、exclude 来有条件的缓存路由和组件；

include：匹配的路由和组件会被缓存；

ecclude： 匹配的路由和组件不会被缓存；

如果有多个的话，可以用逗号进行分割开，也可以使用正则进行匹配，但是需要注意的是，使用正则的话，需要用到 v-bind 进行绑定；也可以使用数组，使用数组的时候也是要用 v-bind 进行绑定；

转载于:https://www.cnblogs.com/mufc/p/11287202.html