20240122收获

vue的生命周期，我的理解

目前我还在研究生命周期的过程中，先谈谈现阶段我的理解，首先分清几个东西，

vue的虚拟节点，网上一般写作vn或者vnode，

然后就是vue实例，一般写作vm，

然后还有this是和vue实例不一样的概念，要做区分，听别人讲话的时候关注他说的是实例还是this，有时候两者完成了绑定，有时候还没有。

然后路由和data，methods这些要区分一下。

再一个就是，我们要清楚一个点，那就是存在两类写代码的人，我们和vue的那些创作者们，实际上我们写在生命周期函数里的代码，只不过是vue的创作者们在执行到某个阶段的时候调用了一下我们定义好的生命周期函数，所以其实逻辑是：

1.他们规范我们的写法，

2.然后我们来定义他们要求的函数，写我们的逻辑，

3.然后他们按照规范，在他们写到某个阶段的时候执行我们写的代码。

所以反过来看，才有所谓的在xx生命周期能做xx事情。那是因为我们的工作实际上是套在他们的工作内部去走的，所以与其挨个去背去记，我个人选择去了解他们究竟在整些什么玩意，这样比较符合我的理解和记忆习惯。 

首先，我测试了this.$route在beforeCreated(简写bc)和create(简写c)中的情况，在bc和c中都能成功访问到route和router的信息。

那也就是说在bc的时候，已经有this了，只不过data，methods，computed，watch这几个没放上去。测试过程如下

这里控制台的this里面是都有数据的，具体的原理我不太清楚，反正得出结论就是控制台输出的东西存在时间差问题，不能完全信任。然后现在明确的两点

1.this在bc的时候就存在了

2.this在bc的时候没有data，methods，computed，watch。

接下来就是分析为啥会有路由，我查了下网上的资料。

vue-router（路由守卫以及相关生命周期）_beforerouteleave 和beforedestroy-CSDN博客

这里面有段话

路由的生命周期是在组件实例的生命周期之前的，反正粗暴些理解，就是路由的玩意先整好，再去整实例的生命周期，所以bc里面就已经可以使用路由了。然后我稍微看了下路由生命周期的知识，发现一个有趣的点

vue组件的路由钩子函数beforeRouteEnter，局部拦截_beforerouteenter中判断地址之后禁止执行代码-CSDN博客

这里注意，这个bre，是写在vue组件的代码里的。

也就是说在beforeRouterEnter(bre)之中使用this，是取不到东西的，但是此时可以通过next回调来取到vue实例。翻译过来就是，我们如果想在bfe里面写代码，想用到vue实例，只能写在next里面，因为next这种被称为回调函数，意思就是由他们的创作者写的逻辑去执行，而不用我们来操心何时执行，我们只需要把我们要的逻辑丢到next里面，这样next就带着我们写的逻辑，当他们的创作者在执行他们的逻辑的时候会顺带调用next，此时我们的代码就在他们的逻辑里面执行了。这是完整的理解，简单理解就是，我们的逻辑就丢到next里，程序会去执行的。也就是说我们不要在bre中其他除了next的地方去取vue实例，是取不到的，而且在next里面也只能通过next(vm=>{})这样的方式使用vm来取到，其中用this也还是取不到实例的。

但是你猜怎么着，我发现个有趣的事情

在bre里面，我通过vm，取到了data的值。也就是说vm这个实例，其实老早就生成了，一直限制我们的实际上是this这个东西，我们通过vue的生命周期，一直都是用的this.xxx，this.$data啊这种，实际上data在bre里面就已经可以取到了。但是如果在这里操作会发生啥情况，我不了解。

回过头来看一下的话，我实际上还有一个疑问，是不是

// vue实例化
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

这个代码实际上只是vm的创建，因为路由的真正调用，好像只有在这里有，router文件夹里面是路由规则的编写还有路由的配置以及导出，main.js里面只有import引用，即使import包含了执行，难道因为router文件夹里面

有了这段代码，路由就已经执行了？现在我的疑惑在于Vue，import的时候里面干了些啥事，我看了下vue源码，太多太杂，一时半会肯定搞不清，反正目前根据掌握的情报，能确定的就是

1.this在bc里面就有了，只不过此时没有data,methods,watch,computed。

2.this.$route和this.$router在bc里面就可以访问了。这是因为路由的生命周期在vue实例的生命周期之前。即先有vm，再有路由能取到vm，再有this，生命周期则或许是穿插在这几个之间，也即是说如果直接看源码，估计人会看昏过去，因为又有创建，又有生命周期钩子函数的调用，几个概念绕来绕去，怕是会绕昏。没看源码之前这是我的理解。

3.在路由的bre生命周期中，可以通过next回调函数的形参访问到vue实例，可以取到data，在next内外都不能用this拿到实例，即实例此时没有和this绑定。这里还有个疑惑，路由是什么时候和this关联上的？难不成是因为this的原型之类的上面有路由?还是什么其他操作？否则按照逻辑，创建this的时候，他们创作者执行bc，此时为啥bc里面我写的代码能用到路由？