Question

.vue组件中获取DOM元素问题

Answer 1

一、问题引入
原项目把一块内容直接写在了模块中（浏览器显示的一整个页面），现在想把它提成一个单独组件，而且把其中使用 document.getElementById('id') 改为 ref 获取元素的形式。

单独创建一个 .vue 组件，通过绑定传值，触发页面变化从而触发 beforeUpdate 。

然后发现 beforeUpdate() 中根本获取不到此元素，用原生js获取也不行。

三、解决
1、 beforeUpdate() 生命周期函数中，在获取元素语句外套用 this.$nextTick(function(){...}) 。（ mounted 无效，原因待查明）
官方解释：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。即DOM真正加载完成。