瞭解vue APi

陽光那麼好,何須自尋煩惱,過好每個當下,一萬個美麗的將來抵不過一個溫暖的如今。javascript

一。Vue.nextTick():vue

該api 是在Dom節點更新結束以後執行的一個延時回調。在修改數據以後,當即使用這個方法,能夠獲取到更新後的Dom。java

使用場景:當修改的時候,將獲取到的數據對頁面的form進行賦值的時候,能夠使用。api

或者在created()鉤子函數進行的DOM操做必定要放在Vue.nextTick()方法的回調函數中,由於created()中尚未對DOM 節點進行渲染,因此此時進行DOM節點的操做是沒有意義的,因此,要將DOM節點的操做的JS代碼放在Vue,nextTick()回調函數中。數組

二。Vue.set(target,key,value):app

像響應式對象中添加一個屬性,並確保這個新屬性一樣是響應式的,且觸發試圖的更新。它必須用於向響應式對象上添加新的屬性。由於Vue 沒法探測普通的新增屬性。函數

使用場景:在vue 中,咱們利用索引直接設置數組中的某一項的時候,賦值成功,可是頁面渲染結果不會更改,此時,就須要用到Vue.set()方法。this

 <div v-for="(item, index) in list" :key="index">
        <div @click="clickOne(item, index)">{{item}}</div>
 </div>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    clickOne(val, index) {
    // 經過數組的索引去修改數組中的某一項,數據改變,可是頁面沒有改變
this.list[index] = '123';
    // this.$set()方法,既更改了數組中對應索引的值,同時視圖也更新了。
this.$set(this.list, index, '1243') }, } } </script>

三。Vue.delete(target, key) spa

刪除對象的屬性。若是對象是響應式的,確保刪除能觸發更新視圖。這個方法主要是用於避開Vue不能檢測到屬性被刪除的限制。3d

<div>
        <div @click="deleteObj"> {{obj.name}}</div>
        <div>{{obj.age}}</div>
</div>
<script>
export default {
  data() {
    return {
      obj: {
        name: 'xiaoxiannv',
        age: 18
      }
    }
  },
  methods: {
    deleteObj() {
      // delete this.obj.name
      this.$delete(this.obj, 'name')
    },
  }
}
</script>

四。Vue.component(id,  function/object)

該api 是註冊或獲取全局組件,註冊還會自動使用給定的Id設置組件的名稱

五。Vue.mixin(mixin):混入

該api全局註冊一個混入,影響註冊以後全部建立的每一個Vue實例。因此,能夠用來給全部的vue實例添加可重複使用的屬性,方法,及特性。固然,也能夠爲自定義對象注入處理邏輯。

當有多個組件中,有多個共同的方法,咱們能夠使用混入的方法,將公共的方法進行封裝,在組件中,調用該混入的方法。

使用場景:mixins.js:封裝的混入方法。

export default {
    data() {
        return {
            // data 中公有的數據
        }
    },
    methods: {
        a() {
            console.log('提取公有的方法')
        }
    }
}

a.vue:在頁面中引用混入

import mixins  from '@/mixins'
export default {
mixins: [mixins]
}

六。PropsData

該api是用在全局擴展時進行傳遞數據,咱們用propsData傳值的步驟:

  1. 在全局擴展里加入props進行接收。propsData:{a:1}

  2. 傳遞時用propsData進行傳遞。props:[‘a’]
  3. 用插值的形式寫入模板。{{ a }

使用場景:::

<body>
    <header></header>
</body>
<script type="text/javascript">
    var app = Vue.extend({
        template: `<p>{{message}}---{{a}}</p>`,
        data: function () {
            return {
                message: 'hello vue',
            }
        },
        props: ['a']
    });
    new app({
        propsData: {
            a: 1
        }
    }).$mount('header');
</script>

七。watch 監聽數據的變化。只有當數據發生變化,纔會走這一步。

{[key: string]: string | Function | Object  }
在watch方法中,key是一個字符串,表示被檢測的數據。值能夠是一個函數,可是不能使用箭頭函數。值也能夠是一個對象。
使用場景:
'value'(newVal, oldVal) {
      this.modelVal = newVal;
}

該方法有兩個參數,第一個參數表明的是改變以後的值,第二個參數表明的是改變以前的值。當value的值改變的時候,就能觸發對modelValue的賦值。

深刻監聽:watch 是沒法監聽對象內部的數據的,對象內部屬性或者方法發生改變的時候,能夠使用深度監聽模式。

superiors: {
            handler: function (val) {
                if (val !== null) {
                    this.departmentNames = val
                    this.placeholderInput = ''
                } 
            },
        // deep:true表示 深度監聽
            deep: true
}            

由於,watch在最初綁定的時候不會執行的,得等到數據的變化纔會執行。可是,有些需求是在他最初綁定的時候,就執行,這個時候,就須要使用watch 中的immediate屬性。

selectData:{
      handler(newList, oldList) {
        this.loadFlag = false;
        this.listArr = newList;
      },
      immediate: true
 },

八。parent:

指定已建立的實例之父實例,在二者之間創建父子關係,子實例能夠用this.$parent訪問復實例,子實例被推入父實例的$children數組中。

在子組件中打印this.$parent,展現結果以下:能看到父組件中的data,methods等。

在父組件中,使用this.$children,打印結果以下:顯示出父組件中引用的全部的子組件。

$parent,$childeren 方法能夠不經過父子組件傳值,子組件拿到父組件的值,父組件拿到子組件的值,可是,這只是一個緊急使用手段,正常狀況,仍是應該使用父組組件傳值的方法。

相關文章
相關標籤/搜索