DOM? ?? ?? ???? HTML ?????? ?? ????????. DOM? ???? ???? ??? ??? ? ????. DOM? HTML ??? ??? ? ?? ???? JavaScript? ???? ? ???? ?? ???? ??? ?????. DOM? ?? ??? ??? ?? ??? ?? ??(?? ??)???.

? ????? ?? ??: windows7 ???, vue3 ??, DELL G3 ???.

dom?? ?????

dom? ?? ?? ???? HTML ?????? ?? ????????. ???? ??? DOM? ?? ?????. HTML ???? ???? ????? ??? ?? ??? ??? ??? ???? ???? ??? ??? ? ?? DOM? ?????.

DOM? W3C ???? ???? ?? ??? ??? ?? ??? ?? ?? ????? ?????? ?? ?? ??(DOM)??? ???.

DOM? HTML ??? ??? ? ?? ?????. JavaScript ??? ???? ? ???? ?? ??? ?????. DOM? ?? ??? ??? ?? ??? ?? ??(?? ??)???.

?? DOM? ???? ???? ??? ?? ?????. DOM? ??? ???? ???? ? ??? ??, ??? ??? ?? ? ??, ??? ?? ?? ??? ?????.

JavaScript? ???? ?? HTML ??? ???? ? ????. ?? ?? ???? ??? ??, ??, ?? ?? ??????.

???? ??? ????? JavaScript? HTML ??? ?? ??? ???? ? ??? ???. HTML ??? ??, ??, ?? ?? ???? ?? ??? ? ??? ?? ? ??? ?? ?? ??? ?? ????.

?? DOM?? ?????

React?? Vue? ????? ?? DOM? ? ?????(React-Native ? Weex) ??? ??? ??? ??? ?????.

?? , ?? ?? DOM? ??? ??? ????. ?? JavaScript ??(VNode ??)? ??? ??? ???? ??? ??? ???? ??? ??? ? ????. ??? ??? ?? DOM ????? ??? Javascript ???? ?? DOM? ?? ??? ?????. ??? ???? ?? ??(tag), ??(attrs) ? ?? ?? ??(children)?? ? ?? ??? ???? ????. ?? DOM? ??? ??? ?? ??? ? ? ???? ????. ??? ?? ?????? ?? DOM ??? ??? ?? DOM? ??? ??? ?????. vue??? ?? DOM? ??? ? ????.

<div id="app">
    <p class="p">節(jié)點(diǎn)內(nèi)容</p>
    <h3>{{ foo }}</h3>
</div>

VNode, vue? ? ?? ???? ??? ????, ??? ????, diff ????? ?? ???? ?? ?? ??? ?? ?? ?? ?????? dom ??? ??? ??? ???? ? ????.

Vue? DOM? ???? ?? ?? ??

Vue? MVVM ??? ???? ???? ??? ????? DOM? ????? ??????? ???? ?????? ??? ??? ?? ??? ??? ??? ????. ??? ?? DOM ?? ??(?? ??, ??? ??????? ?? DOM ??? ?? ??? ????? ?? ??? ?? ??? ???? ?) ? ????? Vue?? DOM ??? ?? ?? ?? ??? ?? ?????.

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

(function anonymous(
) {
	with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},
					  [_v("節(jié)點(diǎn)內(nèi)容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})

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

<template>
	<div ref="bar">{{ foo }}</div>
	<MyAvatar ref="avatar" />
	...
</template>
<script>
	...
	mounted () {
		let foo = this.$refs[&#39;bar&#39;] // 一個(gè)dom元素
		let avatar = this.$refs[&#39;avatar&#39;] // 一個(gè)組件實(shí)例對象
	}
</script>

refs

<template>
	<div v-for="item in qlist" :key="item.id" ref="qitem">
		<h3>{{ item.title  }}</h3>
		<p ref="pinitem">{{ item.desc }}</p>
		<p :ref="&#39;contact&#39;+item.id">{{ item.contact }}</p>
	</div>
	...
</template>
<script>
	...
	data () {
		return {
			qlist: [
				{ id: 10032, title: &#39;abc&#39;, desc: &#39;aadfdcc&#39;, contact: 123 },
				{ id: 11031, title: &#39;def&#39;, desc: &#39;--*--&#39;, contact: 856 },
				{ id: 20332, title: &#39;ghi&#39;, desc: &#39;?/>,<{]&#39;, contact: 900 }
			]
		}
	},
	mounted () {
		let foo = this.$refs[&#39;qitem&#39;] // 一個(gè)包含dom元素的數(shù)組
		let ps = this.$refs[&#39;pinitem&#39;] // p元素是v-for的子元素，同樣是一個(gè)數(shù)組
		let contact1 = this.$refs[&#39;contact&#39; + this.qlist[0].id] // 還是個(gè)數(shù)組
	}
</script>

使用組件實(shí)例的$refs即可拿到組件上ref屬性對應(yīng)的元素。
如果ref屬性加在一個(gè)組件上，那么拿到的是這個(gè)組件的實(shí)例，否則拿到的就是dom元素了。

值得注意的是包含v-for循環(huán)模板指令的情況，其循環(huán)元素和子元素上ref屬性對應(yīng)的都是一個(gè)數(shù)組（就算動態(tài)生成ref，也是數(shù)組）：

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

  var vm = vnode.context;
  // vnode如果有componentInstance表明是一個(gè)組件vnode，它的componentInstance屬性是其真實(shí)的根元素vm
  // vnode如果沒有componentInstance則不是組件vnode，是實(shí)際元素vnode，直接取其根元素
  var ref = vnode.componentInstance || vnode.elm;
  var refs = vm.$refs;
  if (isRemoval) {
    ...
  } else {
  	// refInFor是模板編譯階段生成的，它是一個(gè)布爾值，為true表明此vnode在v-for中
    if (vnode.data.refInFor) {
      if (!Array.isArray(refs[key])) {
        refs[key] = [ref]; // 就算元素唯一，也會被處理成數(shù)組
      } else if (refs[key].indexOf(ref) < 0) {
        // $flow-disable-line
        refs[key].push(ref);
      }
    } else {
      refs[key] = ref;
    }
  }
}

關(guān)于這個(gè)的原因，可以從Vue關(guān)于ref處理的部分代碼得到：

Vue.directive('focus', {
  // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

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

使用自定義指令

Vue提供了自定義指令，官方文檔給出了如下的使用方法，其中el

??? ?? ?? Instructions

Vue? ??? ?? ??? ?? ?? ???? ??? ?? ?? ??? ?????. ??? el? dom ??? ?? ?????.rrreee ??? ?? ??? ???? ?? ?? ?? ??????? ?? ?????. ? ??? ?? ????.

? ??? vue dom? ?? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!