vue页面加载时不调用mounted()函数

原因

最近做项目碰到一个很头大的问题------------从a页面跳到b页面进行编辑，编辑完再返回a页面，，从a页面重新选择数据跳转到b页面，但b页面数据没有更新，依旧是上一个数据，

原理

解决这个问题的关键就在于对keep-alive的理解和activated钩子函数的使用。

当在项目中引入keep-alive的时候，页面第一次进入，钩子函数的触发顺序created -> mounted -> activated，退出时触发deactivated。当再次进入(前进或者后退)时，只触发activated。

我们知道 keep-alive 之后，页面模板第一次初始化解析变成HTML片段后，再次进入就不再重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。故，页面进入的数据获取应该在activated中也放一份。数据加载完毕手动操作DOM的部分也应该在activated中执行才会生效。

解决方法

应该在activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中。

 mounted () {
    let orderNumber = this.$route.query.orderNumber;
    this.getpurchaseOrder(orderNumber);
    this.queryByList();
  },
  activated () {
    let orderNumber = this.$route.query.orderNumber;
    this.getpurchaseOrder(orderNumber);
    this.queryByList();
  },

vue的生命周期

beforeCreate () {
alert('在实例初始化之前调用')

}

created () {
alert('在实例初始化之后调用，经常用于操作数据，发起ajax请求')

}

beforeMount () {
alert('在挂载开始之前被调用，如果是在服务器端渲染时不被调用；在这个函数里，无法获取元素')

}

mounted () {
alert('在挂载后被调用，也不能在服务器端渲染时被调用；这个函数里，是可以获取元素，并进行操作的')

}

beforeUpdate () {
alert('视图层数据更新前调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM')

}

updated () {
alert('视图层数据更新后调用')

}

beforeDestroy () {
alert('实例销毁之前调用，在被销毁的组件中进行调用;有一些操作，会在实例已经销毁的时候还在运行，这时候为了性能考虑，就在这里结束哪些操作')

}

destroyed () {
alert('实例销毁后调用。')

}

===activated和deactivated配合keep-alive标签使用!===

activated () {
alert('实例被激活时使用，用于重复激活一个实例的时候')

}

deactivated () {
alert('实例没有被激活时')
}

总结

keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM；导致在组件mounted钩子中调用的刷新页面内容时，这个钩子没有被调用。

故：使用Vue组件切换过程，执行钩子activated(keep-alive组件激活时调用)，而不是挂载钩子mounted。