一、问题引入

原项目把一块内容直接写在了模块中(浏览器显示的一整个页面)，现在想把它提成一个单独组件，而且把其中使用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。

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生命周期函数，页面重新加载完毕。