<div id="example">
<p ref="myp">{{msg}}</p>
<div ref="warp">
<div v-for="a in arr" ref="mydiv">a</div>
</div>
</div>
let vm = new Vue({
el:'#example',
data:{msg:'hello',arr:[1,2,3]},
mounted(){
this.$nextTick(()=>{
console.log(vm);
})
console.log(this.$refs.myp)//無論有多少個只能拿到一個
console.log(this.$refs.mydiv)//可以拿到一個數組
this.arr=[1,2,3,4]
console.log(this.$refs.wrap)
debugger
//這里debugger的話只能看到warp打印出來的是有3個，因為dom渲染是異步的。
//所以如果數據變化后想獲取真實的數據的話需要等頁面渲染完畢后在獲取，就用$nextTick
} })
vm.$watch('msg', function (newValue, oldValue) { // 這個回調將在 `vm.msg` 改變后調用 })
//this.$data: vm上的數據
//this.$el:當前el元素
//this.$nextTick :異步方法，等待渲染dom完成后來獲取vm
//this.$watch:監控
//this.$set:后加的屬性實現響應式變化
//this.$refs:被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。
//如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例