使用ref来定位 DOM 节点很方便。但是期间遇到了一个问题，就是在生命周期mounted钩子函数里面使用this.$refs.xx，打印出来的却是undefined？
mounted阶段，一般是用于发起后端请求，获取数据，配合路由钩子做一些事情。简单来说就是在mounted钩子中加载数据而已，加载回来的数据是不会在这个阶段更新到 DOM 中的。所以在mounted钩子中使用$refs，返回来的只能是undefined，因为在mounted阶段他们根本不存在！！！
如果说mounted阶段是加载阶段，那么updated阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理)，此时，再使用this.$refs.xx，就 100% 能找到该 DOM 节点。
updated与mounted不同的是，在每一次的 DOM 结构更新，Vue.js 都会调用一次updated钩子函数！而mounted钩子函数仅仅只执行一次而已。
mounted 有如下说明：
ref中说明： 因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
而mounteds这里说了： 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted，所以Vue.js 使用 $refs 定位 DOM 出现 undefined
网友评论