Vue.nextTick，Vue.set，Vue.delete，Vue.filter學習

Vue.nextTick([callback,context])

參數：{Function}[callback]。{Object}[context]。
用法：
在下次DOM更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的DOM。

//修改數據
vm.msg = 'Hello';
//DOM尚未更新
Vue.nextTick(function(){
    //DOM更新了
})
//做爲一個Promise使用（2.1.0起新增）
Vue.nextTick().then(function(){
    //DOM更新了
})

2.1.0 起新增：若是沒有提供回調且在支持 Promise 的環境中，則返回一個 Promise。請注意 Vue 不自帶 Promise 的 polyfill，因此若是你的目標瀏覽器不原生支持 Promise (IE：大家都看我幹嗎)，你得本身提供 polyfill。
實例：

//模板
<div id="app">
  <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>
//頁面初始渲染時只有msg有值。
//Vue實例
new Vue({
    el:'#app',
    data:{
        msg:'Hello Vue',
        msg1:'',
        msg2:'',
        msg3:''
    },
    methods:{
    //第一次點擊時,更改數據msg。
        changeMsg(){
            this.msg = "Hello world";
            this.msg1 = this.$refs.msgDiv.innerHTML;//更改數據後尚未掛載到dom上，此時操做數據仍是原來的數據
            this.$nextTick(() => {
              this.msg2 = this.$refs.msgDiv.innerHTML;//dom更新以後執行，此時數據更改。
            });
            this.msg3 = this.$refs.msgDiv.innerHTML;//與msg1同樣。
        }
    }
})

Vue異步執行DOM更新。只要觀察到數據變化，Vue將開啓一個隊列，並緩衝在同一事件循環中發生的全部的數據改變。若是同一個watcher被屢次觸發，只會被推入到隊列中一次，這種在緩衝時去除重複數據對於避免沒必要要的計算和DOM操做上很是重要。而後，在下一個的事件循環tick中，Vue在內部嘗試對異步隊列使用原生Promise.then和MessageChannel，若是執行環境不支持，會採用setTimeout(fn,0)代替。
例如：當你設置vm.someDate = 'new value',該組件不會立從新渲染。當刷新隊列時，組件會在事件循環隊列清空時的下一個tick更新。多數狀況下咱們不須要關心這個過程，可是若是你想在DOM狀態更新後作點什麼，這就可能會有點棘手。雖然Vue.js一般鼓勵開發人員沿着數據驅動的方式思考，避免直接接觸DOM，可是有時候咱們確實要這麼作。爲了在數據變化以後等待Vue完成更新DOM，能夠在數據變化以後當即使用Vue.nextTick(callback).這樣回調函數在DOM更新完成後就會調用。

Vue.set( target, key, value )

參數：

{Object|Array} target
{string | number} key
{any} value

返回值：設置的值。
用法：
向響應式對象添加一個屬性，並確保這個新屬性一樣是響應式的，且觸發視圖更新。它必須用於響應式對象上添加新屬性，由於Vue沒法探測普通的新增屬性。(好比this.myObject.newProperty = 'hi');

注意對象不能是Vue實例，或則Vue實例的根數據對象。

data(){
    return{
        some:{
            name:'',
            sex:''
        }
    }
}
mounted(){
//這種寫法雖然能夠新增屬性，可是不會觸發視圖更新。
    this.some.age = 24,
}
//正確寫法
mounted(){
    this.$set(this.some,"age",24)
}

Vue.delete( target, key )

參數：

{Object|Array}target
{String|number}key/index

用法：
刪除對象的屬性。若是對象是響應式的，確保刪除能觸發更新視圖。這個主要是用於避免Vue不能檢測到屬性被刪除的限制，可是你應該不多會使用它。

目標對象不能是一個Vue實例或Vue實例的根數據對象

data : {
        namelist : {
           id : 1, 
           name : '李四'
        }       
}

// 刪除name
delete this.namelist.name;//js方法
Vue.delete(this.namelist,'name');//vue方法。

Vue.filter( id, [definition] )

參數:

{string} id
{Function} [definition]

用法：

// 註冊
Vue.filter('my-filter', function (value) {
  // 返回處理後的值
})

// getter，返回已註冊的過濾器
var myFilter = Vue.filter('my-filter')

vue.js容許自定義過濾器，可用於一些常見的文本格式化。過濾器能夠用在兩個地方：雙花括號插值和v-bind表達式。過濾器應該被添加在JavaScript表達式的尾部，由管道符號表示：

//在雙花括號中
{{message | capitalize}}
//在v-bind中
<div v-bind:id="rawId | formatId"></div>

你能夠在一個組件的選項中定義本地的過濾器：

filters:{
    capitalize:function(value){
        if(!value) return '';
        value = value.toString();
        return value.charAt(0).toUpperCase()+value.slice(1)
    } 
}

或則在建立Vue實例以前全局定義過濾器：

Vue.filter('capitalize',function(value){
    if(!value) return '';
    value = value.toString();
    return value.charAt(0).toUpperCase()+value.slice(1);
})
new Vue();

過濾器函數總接收表達式的值（以前操做鏈的結果）做爲第一個參數。在上述例子中，capitalize過濾器函數將會收到message的值做爲第一個參數。
過濾器能夠串聯：

{{message | filterA |filterB}}

在這個例子中，filterA被定義爲接收單個參數的過濾器函數，表達式message的值將做爲參數傳入函數中。而後繼續調用一樣被定義爲接收單個參數的過濾器函數filterB，將filterA的結果傳遞到filterB中。
過濾器是JavaScript函數，所以能夠接收參數：

{{message | filter('arg1',arg2)}}

這裏，filterA內定義爲接收三個參數的過濾器函數。其中message的值做爲第一個參數，普通字符串‘arg1’做爲第二個參數，表達式arg2的值做爲第三個參數。