Vue中如何获取DOM元素

    节点内容

    
{{ foo }}

实例化vue

const app = new Vue({
    el:"#app",
    data:{
        foo:"foo"
    }
})

观察render的render，我们能得到虚拟DOM

(function anonymous(
) {
	with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},
					  [_v("节点内容")]),_v(" "),_c('h4',[_v(_s(foo))])])}})

通过VNode，vue可以对这颗抽象树进行创建节点,删除节点以及修改节点的操作， 经过diff算法得出一些需要修改的最小单位,再更新视图，减少了dom操作，提高了性能。

Vue获取DOM的几种方法

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

使用DOM API直接找元素

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

refs

使用组件实例的$refs即可拿到组件上ref属性对应的元素。
如果ref属性加在一个组件上，那么拿到的是这个组件的实例，否则拿到的就是dom元素了。

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

关于这个的原因，可以从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()
  }
})

// 在模板中

关于自定义指令，在一些组件库和事件上报等场景下非常有用。

以上就是“Vue中如何获取DOM元素”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。