vue入門筆記體系（一）vue實例

microelec 發(fā)布于2019-08-26 17:42 / 2327人閱讀

摘要：就是實例中的對象當(dāng)前組件接收到的對象。當(dāng)前組件數(shù)的根實例如果當(dāng)前實例沒有父實例，此實例將會是其自己當(dāng)前實例的直接子組件。

vue實例

每個 Vue 應(yīng)用都是通過用 Vue 函數(shù)創(chuàng)建一個新的 Vue 實例開始的：

var vm = new Vue({
  // 選項
})

當(dāng)創(chuàng)建一個 Vue 實例時，你可以傳入一個選項對象。作為參考，你也可以在 api/#選項-數(shù)據(jù) 文檔中瀏覽完整的選項列表。

const app = new Vue({
  el: "#root", // vue實例掛載的位置，如果不用el掛載，則也可以用app.#mount("#root")
  template: "{{text}} {{obj.a}}", //模板選項
  data: { //實例數(shù)據(jù)選項
    text: 0
  }
})

vue實例屬性（常用）

除了數(shù)據(jù)屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區(qū)分開來。

$data

app.$data //{text:1},就是vue實例中的data對象

$props

app.$props // 當(dāng)前組件接收到的 props 對象。父組件向子組件傳遞的數(shù)據(jù)

$el

app.$el //vue掛載的dom節(jié)點

$options

// 需要在選項中包含自定義屬性時會有用處
app.$options //當(dāng)前 Vue 實例的初始化選項，注意：直接修改app.$options.data.text = 1的值是沒有效果的

$parent

app.$parent //父實例，如果當(dāng)前實例有的話。

$root

app.$root //當(dāng)前組件數(shù)的根vue實例,如果當(dāng)前實例沒有父實例，此實例將會是其自己

$children

// 當(dāng)前實例的直接子組件。使用組件時使用，比如使用組件時，里面的就是item的children
app.$children

$slots

app.$slots//作為插槽的時候引用
app.$scopedSlots//

$refs

//模板的引用，快速定位到節(jié)點或組件，返回HTML對象或組件，例如
app.$refs

$isServer

app.$isServer//當(dāng)前 Vue 實例是否運行于服務(wù)器。 應(yīng)用于服務(wù)端渲染

實例方法

$watch( expOrFn, callback, [options] )

app.$watch //監(jiān)聽數(shù)據(jù)變化時執(zhí)行，與選項里面的watch一樣

對比：

unWatch = this.$watch("text", (newText, oldText) => {
      console.log(`${newText} : ${oldText}`)
})
watch: {
    text(newText, oldText) {
      console.log(`${newText} : ${oldText}`);
    }
  },
//使用watch監(jiān)聽時，組件銷毀時會自動銷毀，而$watch則不會，必須自己調(diào)用unWatch()進(jìn)行銷毀

$on(event,callback) $emit( eventName, […args] ) $once( event, callback )

//監(jiān)聽事件
app.$on("test", function (msg) {
  console.log(msg) //hi
})
//觸發(fā)事件
app.$emit("test", "hi")
//監(jiān)聽事件,只觸發(fā)一次
app.$once("test", function (msg) {
  console.log(msg) //hi
})

$forceUpdate()

//迫使 Vue 實例重新渲染。
app.$forceUpdate()
//當(dāng)給初始化未設(shè)置的屬性時，就不會自動響應(yīng)數(shù)據(jù)，這樣迫使重新渲染，可以重新響應(yīng)
//盡量不要以這種方式來做，這樣性能開銷很大

$set( target, key, value ) $delete( target, key )

//設(shè)置某一個值
app.$set(this.obj,"a",i)
//刪除某一個值
app.$set(this.obj,"a)

$nextTick ( [callback] )

//$nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM，Vue 實現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化，而是異步更新的
new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // 修改數(shù)據(jù)
      this.message = "changed"
      // DOM 還沒有更新
      this.$nextTick(function () {
        // DOM 現(xiàn)在更新了
        // `this` 綁定到當(dāng)前實例
        this.doSomethingElse()
      })
    }
  }
})