組件渲染完成后都會(huì)生成一個(gè)實(shí)例（像new Obj），一般情況下不需要關(guān)注實(shí)例只需要關(guān)注數(shù)據(jù)，但有些情況肯定需要實(shí)例操作的，比如一些插件的掛載echarts這種

ref 被用來(lái)給元素或子組件注冊(cè)引用信息。引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實(shí)例：

<template>
  <div>
    <p ref="p">1111</p>
      <ChildrenA ref="pp"/>
    <button @click="refs">Ref</button>
  </div>
</template>

<script>
import ChildrenA from './components/ChildrenA'
export default {
  methods:{
    refs(){
      console.log(this.$refs)
    }
  },
  components:{
    ChildrenA
  }
}
</script>

<style>

</style>

那么這個(gè)pp就是子組件，可以認(rèn)為就是子組件中的this

那么在子組件中，聲明一個(gè)data

    data(){
        return {
            name:'Vue'
        }
    }

直接就可以在主組件中打印了

methods:{
    refs(){
      console.log(this.$refs.pp.name)  //Vue
    }
  },

傳統(tǒng)的獲取父組件實(shí)例會(huì)用到$parent $children 這種遞歸的方式，很麻煩

https://blog.csdn.net/luobosiji/article/details/90696147（跨層級(jí)獲取實(shí)例，需要安裝插件，保存一下，用到的時(shí)候可看）

那么實(shí)例肯定是DOM掛載好之后才能獲取，所以對(duì)于ref的操作要在mounted之后

   created(){
     console.log(this.$refs)
   },

   mounted(){
     console.log(this.$refs)

   }

不然會(huì)報(bào)錯(cuò)無(wú)法找到DOM

那么對(duì)于實(shí)例還要對(duì)nextTick的用法注意，首先看個(gè)Demo

<template>
  <div>
    <div ref="msgDiv">{{msg}}</div>
    <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
    <div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
    <div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
    <button @click="changeMsg">
         Change the Message
   </button>
  </div>
</template>

<script>
import ChildrenA from './components/ChildrenA'
export default {
   data(){
     return{
        msg: 'Hello Vue.',
        msg1: '',
        msg2: '',
        msg3: ''
     }
   },
   methods: {
      changeMsg() {
        this.msg = "Hello world."
        this.msg1 = this.$refs.msgDiv.innerHTML
        this.$nextTick(() => {
          this.msg2 = this.$refs.msgDiv.innerHTML
        })
        this.msg3 = this.$refs.msgDiv.innerHTML
      }
    }
} 
</script>

<style>

</style>

此時(shí)方法的邏輯是這樣，修改了響應(yīng)式數(shù)據(jù)msg的值，其中msg2使用了nextTickm,msg1msg3并沒(méi)有

可以看到，msg1 msg2是msg修改之前的內(nèi)容，只有msg2是修改后的內(nèi)容

那么在剛才肯定是觸發(fā)了更新函數(shù)，這里就不演示了

Vue的官方文檔中詳細(xì)解釋?zhuān)?/p>

Vue 異步執(zhí)行 DOM 更新。只要觀察到數(shù)據(jù)變化，Vue 將開(kāi)啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作上非常重要。然后，在下一個(gè)的事件循環(huán)“tick”中，Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作。Vue 在內(nèi)部嘗試對(duì)異步隊(duì)列使用原生的 Promise.then 和MessageChannel，如果執(zhí)行環(huán)境不支持，會(huì)采用 setTimeout(fn, 0)代替。

例如，當(dāng)你設(shè)置vm.someData = 'new value'，該組件不會(huì)立即重新渲染。當(dāng)刷新隊(duì)列時(shí)，組件會(huì)在事件循環(huán)隊(duì)列清空時(shí)的下一個(gè)“tick”更新。多數(shù)情況我們不需要關(guān)心這個(gè)過(guò)程，但是如果你想在 DOM 狀態(tài)更新后做點(diǎn)什么，這就可能會(huì)有些棘手。雖然 Vue.js 通常鼓勵(lì)開(kāi)發(fā)人員沿著“數(shù)據(jù)驅(qū)動(dòng)”的方式思考，避免直接接觸 DOM，但是有時(shí)我們確實(shí)要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用Vue.nextTick(callback) 。這樣回調(diào)函數(shù)在 DOM 更新完成后就會(huì)調(diào)用。

看不懂可以像我這么理解，你可以認(rèn)為，當(dāng)你點(diǎn)擊修改數(shù)據(jù)的時(shí)候，重新初始化了數(shù)據(jù)。原本meg是'Hello Vue'，現(xiàn)在初始化的數(shù)據(jù)是‘Hello world.’，但是在created鉤子函數(shù)中，msg1與msg3已經(jīng)被這個(gè)老msg的值（Hello Vue.）賦值了，但是在mounted鉤子函數(shù)中，新的HelloWorld 值賦值給了msg2...

總之記住一句話，nextTick操作的是DOM更新之后的狀態(tài)（后面寫(xiě)一些小項(xiàng)目，比如上拉加載或者什么的再看看）

過(guò)濾 filter

Vue.js 允許你自定義過(guò)濾器，可被用于一些常見(jiàn)的文本格式化。過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式

在組件中聲明

   filters:{
      zero(value){
        return `0${value}`.slice(-2)
      }  
  },

注意單詞是filters，組件中有個(gè)s

<template>
  <div>
      {{num | zero}}
  </div>
</template>

也可以實(shí)行串聯(lián)形式，類(lèi)似高級(jí)函數(shù)的compose

<template>
  <div>
      {{price | toFixed(2) | toUSD}}
      <hr>
  </div>
</template>

<script>
import ChildrenA from './components/ChildrenA'
export default {
   data(){
     return{
        price:23.333
     }
   },
   filters:{
      toFixed(price,limit){
        return price.toFixed(limit)
      } ,
      toUSD(val){
        return `$${val}`
      }
  },
  
  

} 
</script>

<style>

</style>

插值中的方法第一個(gè)參數(shù)默認(rèn)就是前一個(gè)數(shù)據(jù)的return，所以參數(shù)是第二個(gè)函數(shù)開(kāi)始寫(xiě)的

可以在main.js中設(shè)置全局的filter

但是一般情況下我們是這么引入的

貼下代碼！

單獨(dú)設(shè)置一個(gè)js

    export function zero(val){
        return `0${val}`.slice(-2)
    }

暴露一個(gè)同樣的方法，然后再main.js中引入

import * as filters from './filter/filter'

然后通過(guò)Object注冊(cè)到實(shí)例

Object.keys(filters).forEach(key=>{
  Vue.filter(key,filters[key])
})

就可以直接使用了，項(xiàng)目應(yīng)該大多都是如此引用的