2023年7月18日发(作者：)

Vue中⽅法执⾏顺序今天在前端做ZTree功能时，组件之间的初始化⽅法因为js的异步触发导致数据交叉出错；了解到Vue中⽅法顺序控制：vue的created钩⼦函数中，⽅法的执⾏顺序情景：vue框架中通常在created钩⼦函数⾥执⾏访问数据库的⽅法，然后返回数据给前端，前端data中定义全局变量接收数据但是如果你在created中执⾏了好⼏个访问数据库的函数，如果对他们的执⾏顺序是有要求的，那么哪个会先返回，哪个会后返回呢并不是谁在前谁就先返回，如果你这样想，并且在后执⾏的函数中对先执⾏的函数返回的数据进⾏操作，经常会报错，提⽰某些属性不存在，或未定义原因：这是因为js中默认执⾏⽹络请求是异步的，他们会按顺序发出请求之后就不管了，谁先返回是不确定的，这样在加载数据的时候不会因为某个⽹络请求慢，⽽在⼀直等待那个请求，导致其他请求阻塞，效率，体验很差解决⽅法：如果⼀次加载页⾯需要执⾏多个⽹络请求，并且对返回的数据顺序是有要求的，就⽤.then()函数，当这个函数执⾏完后再执⾏下个函数个⼈解决⽅法： 将zetree初始化直接放在created中即可；扩展：在页⾯⾸次加载执⾏顺序有如下：beforeCreate //在实例初始化之后、创建之前执⾏created //实例创建后执⾏beforeMounted //在挂载开始之前调⽤filters //挂载前加载过滤器computed //计算属性directives-bind //只调⽤⼀次，在指令第⼀次绑定到元素时调⽤directives-inserted //被绑定元素插⼊⽗节点时调⽤activated //keek-alive组件被激活时调⽤，则在keep-alive包裹的嵌套的⼦组件中触发mounted //挂载完成后调⽤{{}} //mustache表达式渲染页⾯修改页⾯input时，被⾃动调⽤的选项顺序如下：watch //⾸先先监听到了改变事件filters //过滤器没有添加在该input元素上，但是也被调⽤了beforeUpdate //数据更新时调⽤，发⽣在虚拟dom打补丁前directived-update //指令所在的组件的vNode更新时调⽤，但可能发⽣在其⼦vNode更新前directives-componentUpdated//指令所在的组件的vNode及其⼦组件的vNode全部更新后调⽤updated //组件dom已经更新组件销毁时，执⾏顺序如下beforeDestroy //实例销毁之前调⽤directives-unbind //指令与元素解绑时调⽤，只调⽤⼀次deactivated //keep-alive组件停⽤时调⽤destroyed //实例销毁之后调⽤