// 创建地图实例
this.map = new BMap.Map(‘map’)
}
}
现在这样可能会报错，因为父组件中的 map 还没创建成功。必须确保父组件的 map 创建完成，才能使用 this.$parent.map 的方法。
那么，现在的问题是：如何保证父组件 mounted 结束后再进行子组件 mounted ？
===================================================================
你需要了解父子组件生命周期的执行顺序
父组件先进行创建，在挂载(mounted)前，子组件进行创建+挂载，子组件挂载完成后父组件挂载。
整个顺序就是：
父组件：beforeCreate
父组件：created
父组件：beforeMount
子组件：beforeCreate
子组件：createc
子组件：beforeMount
子组件：mounted
父组件：mounted
可以看出是先子组件 mounted 之后父组件 mounted，那么，如何实现父组件 mounted 完毕后再子组件 mounted 呢？
===================================================================
【思路】 通过打印 this 发现，有一个 _isMounted 属性，表示当前是否挂载完毕（true：挂载完毕，false：没有挂载完成），在父组件挂载前将 _isMounted 存在 window 中，挂载后更新 _isMounted。在子组件 mounted 中添加定时器，根据 _isMounted 判断是否执行初始化方法。
// 父组件
beforeMount() {
window.parentMounted = this._isMounted // _isMounted是当前实例mouned()是否执行 此时为false
},
mounted() {
await GaodeMap().then(() => {
// …
})
window.parentMounted = this._isMounted // _isMounted是当前实例mouned()是否执行 此时为true
}
// 子组件
mounted() {
let pMountedTimer = window.setInterval(() => {
if (window.parentMounted ) {
window.clearInterval(pMountedTimer)
// 下面就可以写子组件想在mounted时执行代码（此时父组件的mounted已经执行完毕）
this.initData()
}
}, 500)
}
=============================================================================
- 子组件更新过程
- 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
Vue 面试题
1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
[外链图片转存中…(img-7FzOY0XX-1719230711332)]