vue里的$refs屬性
Vue的極大程度的幫助減少了對dom的操作播揪，其中獲取元素的方式主要通過添加ref屬性，但是當獲取this.$refs屬性時顾瞪，稍有不注意就會輸出undefined導致我們對dom節(jié)點的操作報錯舔庶。this.$refs.xxx為undefined的幾種情況記錄：
-
在created里鉤子函數中調用
原因：created（）在實例創(chuàng)建完成后被立即調用。在這一步陈醒，實例已完成以下的配置：數據觀測 (data observer)惕橙，屬性和方法的運算，watch/event 事件回調钉跷。然而弥鹦，掛載階段還沒開始，
$el屬性目前不可見爷辙。所以this.$refs壓根就調不到那個dom,因為頁面還沒有掛載上去彬坏。解決：在mounted () 鉤子函數中調用
注意：在此種情況中朦促，元素節(jié)點一定是直接寫在html中的，而不是通過數據或者條件渲染的
-
數據或條件渲染（v-if,v-show）之后的調用.
$ref本身作為渲染結果被創(chuàng)建栓始，在初始渲染的時候不能訪問他們务冕，是不存在的
$refs不是響應式的，只在組件渲染完成后才填充
用于元素或子組件注冊引用信息混滔，注冊完成洒疚，將會注冊在父組件$refs對象上
調用對象是否和v-if結合使用
ref不是響應式的，所有的動態(tài)加載的模板更新它都無法相應的變化坯屿。
解決：可以通過setTimeOut(()=>{...}, 0)來實現
<template>
<div>
<p ref="testText">this is a test data</p>
<p v-if="msg" ref="msgText">{{msg}}</p>
<button @click="handleClick">點一下</button>
</div>
</template>
<script>
import { setTimeout } from 'timers';
export default {
data () {
return {
text: 'message show',
msg: ''
}
},
created () {
console.log(this.$refs.testText) // undefined
// this.$refs.testText.style.color = '#f00'
},
mounted () {
console.log(this.$refs.testText) // <p data-v-5752faac="" style="color: rgb(255, 0, 0);">this is a test data</p>
console.log(this.$refs.msgText) // undefined
this.$refs.testText.style.color = '#f00'
},
methods: {
handleClick () {
this.msg = 'msg show'
console.log(this.$refs.msgText) // undefined
setTimeout(() => {
this.$refs.msgText.style.color = '#eee'
console.log(this.$refs.msgText) // <p data-v-5752faac="" style="color: rgb(238, 238, 238);">msg show</p>
}, 0)
}
}
}
補充：
ref的作用是只在當前的vue組件中有效油湖，所以使用ref來獲取dom元素，節(jié)省了dom的操作又可以實現多個重復組件中的區(qū)分领跛，所以獲取元素的時候用ref不要直接使用document.getElementById來操作乏德；二者獲取到的值是一樣的，用ref獲取到DOM元素以后還是可以使用document的方法吠昭。
ref被用來給元素或子組件注冊引用信息喊括。引用信息將會注冊在父組件的$refs對象上；如果在子組件上矢棚，引用就指向組件實例
$refs 是所有注冊過的ref的一個集合
而$refs相對document.getElementById的方法郑什，會減少獲取dom節(jié)點的消耗
如果通過v-for 遍歷想加不同的ref時記得加
:號，即:ref =某變量;
這點和其他屬性一樣蒲肋，如果是固定值就不需要加:號蘑拯，如果是變量記得加:號
