vue误用生命周期及数据请求陷入死循环，商城项目坑点（2）

一.在进行数据请求时，将数据请求写在了beforeUpdate和updated中，进入了死循环。

此时已经进入了一个死循环， 数据在疯狂的打印，也就是说更新的两个钩子函数疯狂的给你输出，但是明明数据没有变化。

原因：由于数据请求写在了更新的生命周期中，所以一请求数据就更新了data中的数据，一更新又接着执行数据请求，又进行赋值，数据再次更新，它就又去执行钩子函数，然后又去请求，然后又执行钩子函数，然后.....奔溃了。

解决办法：可以使用动态路由进行动态的更新后面的参数，然后再beforeRouteUpdate中进行每次路由变更时的数据请求，然后再将请求之后的数据展示到页面上。

步骤：第一步配置动态路由

        

第二步动态更改路由的参数

 第三步路由的监听有两种方法供参考

        方案1：通过watch属性监听

此处小坑一定要谨慎：不可以把人家的参数newRoute和oldRoute随意更改为a呀，b呀等一些其他名字这个名字是死的规定，换成别的就不起作用，此处参数个数可以写一个或者两个都可以，这个随你。

      方案2：通过beforeRouteUpdate进行路径的监听，此处有大坑

 注意坑1来了：如果此时你任性不用它用了，beforeRouteEnter那么很不幸的告诉你，你踩坑了，而且还不晓得这个坑是为啥，因为这丫检测了第一次，之后就检测不到了。

为啥呢？来恶补一下如下知识

beferRouteEnter:这丫就是路由改变时触发的

beforeRouteUpdate：这丫就是路由更新时触发的

beforeRouteLeave：这丫就是路由离开是触发的

猛地一看，这不废话吗？其实不然，因为何为更新，何为改变，是有区别滴。

beforeRouteUpdate
    在当前路由改变，但是该组件被复用时调用
    对于一个带有动态参数的路径 /good/:id，在 /good/1 和 /good/2 之间跳转的时候，
    由于会渲染同样的good组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
简言之，路径参数变只能叫更新，不能叫路由改变，所以beferRouteEnte和beforeRouteLeave这两丫人家只管你路径改，像/home跳到了/detail这个人家会检测到，参数改那就交给中间那个。

注意坑2来了：以上的三个钩子中只有beferRouteEnter不能使用this，this是undefined，那么我们又需要用怎么办呢？（beforeRouteUpdate和beforeRouteLeave中的this是正常指向vue实例的）

办法一：在main.js中用变量vm接收实例，这样这个vm变量到哪里都能用，并且跟你想用的this是一样作用。

 办法二：在next的函数中有一个vm参数（注意这里vm不是你自己定义的）它同样指的是vue实例，注意这里的vm不可以写成别的a呀b呀自己随意起的名字，只能用vm.

总结：不要将异步数据请求和赋值放在beforeUpdate和updated钩子函数中,使用路有钩子要小心。