beforeRouteEnter、created、mounted的思考和总结

这2次发现我写代码的思路窄了，，，就喜欢在created的方法中去做一些内容，直到今天碰到一个问题后我发现，created并不是完成的，有些时候它并不会被执行，这不由得让我想知道几个内容的区别并且，想看看它们的执行顺序如何

beforeRouteEnter(to, from, next) {
  console.log("next beforeRouteEnter");
  next((vm) => {
    vm.fromName = from.name; //获取跳转前路由的name并赋值给this.fromName
    console.log(vm.zx, "nexted beforeRouteEnter");
  });
},
created() {
  console.log(this.zx, "created");
},
mounted() {
  console.log(this.zx, "mounted");
},

在同一个项目中beforeRouteEnter出现了两种执行顺序，一种是从菜单点进列表页，执行顺序是

  beforeRouteEnter---->created---->mounted----->beforeRouterEnter的next()

另一种是点击列表页的详情按钮进入详情页后通过 this.$router.back(-1) 方法返回列表页，执行顺序是

  beforeRouteEnter---->created---->beforeRouterEnter的next()----->mounted

顺序是知道了，但是对于这几个有什么区别我还是有些不太清楚。。光说顺序，这个也没什么用，然后看了下vue的教学文档，有人对此做出了解释

1、beforeRouteEnter 和created 和mounted触发的时机

created的触发

只有组件在创建时，才会触发created。（那预示着如果使用created这个内容，产生了tab然后没关闭，另一个页面带着不同的参数又跳到这个页面，并不会触发created）

beforeRouteEnter的触发

每次进入路由时，都会触发beforeRouteEnter（意味着只要路由变化一定会）。
所以，当一个页面使用了keep-alive进行了缓存时，离开这个页面后再次进入时，不会再触发created，但是会触发beforeRouteEnter。
所以，beforeRouteEnter一般会配合keep-alive使用。
而且在beforeRouterEnter的参数中，可以获取到前一个路由的参数，如果有这个需求也可以使用beforeRouteEnter

mounted函数的触发

mounted函数的执行时机是在组件挂载后，即虚拟DOM被渲染并插入到实际DOM中之后。这意味着，在mounted函数中我们可以安全地操作DOM，比如通过document.getElementById等方法获取实际DOM节点，并对其进行修改。然而，在mounted函数之前，由于虚拟DOM尚未被渲染为实际DOM，因此操作实际DOM是不可靠的，不可靠是什么意思，就是你可能找dom的时候被告知没有此dom内容

需要注意的是，mounted函数只会在组件第一次渲染时执行一次。如果组件所依赖的属性发生变化，导致重新渲染组件，mounted函数不会再次执行。如果我们需要在组件重新渲染后执行某些操作，比如更新操作或动画效果等，可以使用updated函数或watch监听功能来完成。
一般做一些dom渲染后的一些初始化的操作内容，但是啊一定要注意mounted函数只会在组件第一次渲染时执行一次，如果组件发生重新渲染，mounted函数不会再次执行，

总结

其实说了半天还是vue生命周期的事情无非就是
create创建组件、mounted往组件上挂数据、update更新组件上挂的数据，destroy把组件实例销毁。只不过其中的细节还是要知道和清楚，不然就很容易在用的时候遇到问题

拓展内容

还有一个小点就是我刚刚说到的那个方法keep-live，keep-live就是保持组件活跃，不会被destroy销毁掉，就一直还活着，组件没有被销毁掉的话，组件上挂载的数据就还存在，所以状态就可以保留，所以，keep-alive就可以保持组件的状态。。

那么为啥点击别的页面就会导致销毁呢？这个问题就有点愚蠢了，，每个组件都有自己的生命周期，点击别的路由的时候上一个路由就会触发这个路由页面对应组件上的destroy钩子方法，然后这个路由页面对应的组件就被销毁了，组件销毁了，组件上的挂载的数据也就啥也没有了。，所以其实点击不同的页面那就是一个路由跳转的过程，而这个过程就是一直在走生命周期的一个过程。。

脑洞大开又想到了http协议的请求头里面也有一个keep-alive，保持http通话，这样：Connection: keep-alive 功能虽然不一样，但是思想上是一样的即为~保持状态活跃