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é)點內(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é)點內(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;] // 一個dom元素
		let avatar = this.$refs[&#39;avatar&#39;] // 一個組件實例對象
	}
</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;] // 一個包含dom元素的數(shù)組
		let ps = this.$refs[&#39;pinitem&#39;] // p元素是v-for的子元素，同樣是一個數(shù)組
		let contact1 = this.$refs[&#39;contact&#39; + this.qlist[0].id] // 還是個數(shù)組
	}
</script>

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

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

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]; // 就算元素唯一，也會被處理成數(shù)組
      } else if (refs[key].indexOf(ref) < 0) {
        // $flow-disable-line
        refs[key].push(ref);
      }
    } else {
      refs[key] = ref;
    }
  }
}

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

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

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

使用自定義指令

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

??? ?? ?? Instructions

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

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