陽光那麼好,何須自尋煩惱,過好每個當下,一萬個美麗的將來抵不過一個溫暖的如今。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傳值的步驟:
在全局擴展里加入props進行接收。propsData:{a:1}
props:[‘a’]
{{ 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 方法能夠不經過父子組件傳值,子組件拿到父組件的值,父組件拿到子組件的值,可是,這只是一個緊急使用手段,正常狀況,仍是應該使用父組組件傳值的方法。