一、问题引入
原项目把一块内容直接写在了模块中(浏览器显示的一整个页面)，现在想把它提成一个单独组件，而且把其中使用document.getElementById('id')改为ref获取元素的形式。
export default {
methods: {
getRely (applicationVersionId) {
let _this = this;
//axio获取数据，成功后调用drawRelationChart 初始化echart表格
},
drawRelationChart (param) {
this.relationChart = echarts.init(document.getElementById('transferRelation'));
//...
}
}
单独创建一个.vue组件，通过绑定传值，触发页面变化从而触发beforeUpdate。
class='transferRelation'
ref="transferRelation"
>
export default {
props: {
relyData: {
type: Object,
default() {
return {
data: [],
link: []
};
}
}
},
mounted() {
console.log("调用关系-mounted");
console.log(_this.$refs.transferRelation);
},
beforeUpdate() {
console.log("调用关系-beforeUpdate");
const _this = this;
//初始化图表
console.log(_this.$refs.transferRelation);
//TODO
}
};
然后发现beforeUpdate()中根本获取不到此元素，用原生js获取也不行。
然后发现mounted中也获取不到。
二、问题说明
mounted()生命周期函数，页面还未真正挂载到浏览器上，执行完成后立马挂在，所以无法获取到页面元素。
beforeUpdate()生命周期函数，浏览器页面还未重新跟新加载，也无法获取到元素。
三、解决
1、beforeUpdate()生命周期函数中，在获取元素语句外套用this.$nextTick(function(){...})。(mounted无效，原因待查明)
官方解释：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。即DOM真正加载完成。
2、直接使用updated生命周期函数，页面重新加载完毕。
