Vue获取DOM的几种方法

虽然Vue实现了MVVM模型，将数据和表现进行了分离，我们只需要更新数据就能使DOM同步更新，但是某些情况下，还是需要获取DOM元素进行操作（比如引入的某个库要求传入一个根dom元素作为根节点，或者写一些自定义指令），本文主要介绍几种在Vue中获取DOM元素的方法。

使用DOM API直接找元素

<script>
	...
	mounted () {
		let elm = this.$el.querySelector('#id')
	}
</script>

这种方法足够简单直观，Vue组件在patch阶段结束时会把this.$el赋值为挂载的根dom元素，我们可以直接使用$el的querySelector, querySelectorAll等方法获取匹配的元素。

refs

<template>
	<div ref="bar">{{ foo }}</div>
	<MyAvatar ref="avatar" />
	...
</template>
<script>
	...
	mounted () {
		let foo = this.$refs['bar'] // 一个dom元素
		let avatar = this.$refs['avatar'] // 一个组件实例对象
	}
</script>

使用组件实例的$refs即可拿到组件上ref属性对应的元素。

如果ref属性加在一个组件上，那么拿到的是这个组件的实例，否则拿到的就是dom元素了。

值得注意的是包含v-for循环模板指令的情况，其循环元素和子元素上ref属性对应的都是一个数组（就算动态生成ref，也是数组）：

<template>
	<div v-for="item in qlist" :key="item.id" ref="qitem">
		<h3>{{ item.title  }}</h3>
		<p ref="pinitem">{{ item.desc }}</p>
		<p :ref="'contact'+item.id">{{ item.contact }}</p>
	</div>
	...
</template>
<script>
	...
	data () {
		return {
			qlist: [
				{ id: 10032, title: 'abc', desc: 'aadfdcc', contact: 123 },
				{ id: 11031, title: 'def', desc: '--*--', contact: 856 },
				{ id: 20332, title: 'ghi', desc: '?/>,<{]', contact: 900 }
			]
		}
	},
	mounted () {
		let foo = this.$refs['qitem'] // 一个包含dom元素的数组
		let ps = this.$refs['pinitem'] // p元素是v-for的子元素，同样是一个数组
		let contact1 = this.$refs['contact' + this.qlist[0].id] // 还是个数组
	}
</script>

关于这个的原因，可以从Vue关于ref处理的部分代码得到：

function registerRef (vnode, isRemoval) {
  var key = vnode.data.ref;
  if (!isDef(key)) { return }

  var vm = vnode.context;
  // vnode如果有componentInstance表明是一个组件vnode，它的componentInstance属性是其真实的根元素vm
  // vnode如果没有componentInstance则不是组件vnode，是实际元素vnode，直接取其根元素
  var ref = vnode.componentInstance || vnode.elm;
  var refs = vm.$refs;
  if (isRemoval) {
    ...
  } else {
  	// refInFor是模板编译阶段生成的，它是一个布尔值，为true表明此vnode在v-for中
    if (vnode.data.refInFor) {
      if (!Array.isArray(refs[key])) {
        refs[key] = [ref]; // 就算元素唯一，也会被处理成数组
      } else if (refs[key].indexOf(ref) < 0) {
        // $flow-disable-line
        refs[key].push(ref);
      }
    } else {
      refs[key] = ref;
    }
  }
}

使用自定义指令

Vue提供了自定义指令，官方文档给出了如下的使用方法，其中el就是dom元素的引用

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

// 在模板中
<template>
	<input v-model="name" v-focus />
</template>

关于自定义指令，在一些组件库和事件上报等场景下非常有用，以后再专门写一篇文章讨论一下吧。