Vue.nextTick，Vue.set，Vue.delete，Vue.filter學(xué)習(xí)

junnplus 發(fā)布于2019-08-23 13:54 / 587人閱讀

摘要：用法在下次更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。只要觀察到數(shù)據(jù)變化，將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有的數(shù)據(jù)改變。如果對(duì)象是響應(yīng)式的，確保刪除能觸發(fā)更新視圖。

Vue.nextTick([callback,context])

參數(shù)：{Function}[callback]。{Object}[context]。
用法：
在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的DOM。

//修改數(shù)據(jù)
vm.msg = "Hello";
//DOM還沒有更新
Vue.nextTick(function(){
    //DOM更新了
})
//作為一個(gè)Promise使用（2.1.0起新增）
Vue.nextTick().then(function(){
    //DOM更新了
})

2.1.0 起新增：如果沒有提供回調(diào)且在支持 Promise 的環(huán)境中，則返回一個(gè) Promise。請(qǐng)注意 Vue 不自帶 Promise 的 polyfill，所以如果你的目標(biāo)瀏覽器不原生支持 Promise (IE：你們都看我干嘛)，你得自己提供 polyfill。
實(shí)例：

//模板

  {{msg}}
  Message got outside $nextTick: {{msg1}}
  Message got inside $nextTick: {{msg2}}
  Message got outside $nextTick: {{msg3}}
  

//頁面初始渲染時(shí)只有msg有值。
//Vue實(shí)例
new Vue({
    el:"#app",
    data:{
        msg:"Hello Vue",
        msg1:"",
        msg2:"",
        msg3:""
    },
    methods:{
    //第一次點(diǎn)擊時(shí),更改數(shù)據(jù)msg。
        changeMsg(){
            this.msg = "Hello world";
            this.msg1 = this.$refs.msgDiv.innerHTML;//更改數(shù)據(jù)后還沒有掛載到dom上，此時(shí)操作數(shù)據(jù)還是原來的數(shù)據(jù)
            this.$nextTick(() => {
              this.msg2 = this.$refs.msgDiv.innerHTML;//dom更新之后執(zhí)行，此時(shí)數(shù)據(jù)更改。
            });
            this.msg3 = this.$refs.msgDiv.innerHTML;//與msg1一樣。
        }
    }
})

Vue異步執(zhí)行DOM更新。只要觀察到數(shù)據(jù)變化，Vue將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有的數(shù)據(jù)改變。如果同一個(gè)watcher被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次，這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和DOM操作上非常重要。然后，在下一個(gè)的事件循環(huán)tick中，Vue在內(nèi)部嘗試對(duì)異步隊(duì)列使用原生Promise.then和MessageChannel，如果執(zhí)行環(huán)境不支持，會(huì)采用setTimeout(fn,0)代替。
例如：當(dāng)你設(shè)置vm.someDate = "new value",該組件不會(huì)立重新渲染。當(dāng)刷新隊(duì)列時(shí)，組件會(huì)在事件循環(huán)隊(duì)列清空時(shí)的下一個(gè)tick更新。多數(shù)情況下我們不需要關(guān)心這個(gè)過程，但是如果你想在DOM狀態(tài)更新后做點(diǎn)什么，這就可能會(huì)有點(diǎn)棘手。雖然Vue.js通常鼓勵(lì)開發(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)用。

Vue.set( target, key, value )

參數(shù)：

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

返回值：設(shè)置的值。
用法：
向響應(yīng)式對(duì)象添加一個(gè)屬性，并確保這個(gè)新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于響應(yīng)式對(duì)象上添加新屬性，因?yàn)閂ue無法探測(cè)普通的新增屬性。(比如this.myObject.newProperty = "hi");

注意對(duì)象不能是Vue實(shí)例，或則Vue實(shí)例的根數(shù)據(jù)對(duì)象。

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

Vue.delete( target, key )

參數(shù)：

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

用法：
刪除對(duì)象的屬性。如果對(duì)象是響應(yīng)式的，確保刪除能觸發(fā)更新視圖。這個(gè)主要是用于避免Vue不能檢測(cè)到屬性被刪除的限制，但是你應(yīng)該很少會(huì)使用它。

目標(biāo)對(duì)象不能是一個(gè)Vue實(shí)例或Vue實(shí)例的根數(shù)據(jù)對(duì)象

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

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

Vue.filter( id, [definition] )

參數(shù):

{string} id
{Function} [definition]

用法：

// 注冊(cè)
Vue.filter("my-filter", function (value) {
  // 返回處理后的值
})

// getter，返回已注冊(cè)的過濾器
var myFilter = Vue.filter("my-filter")

vue.js允許自定義過濾器，可用于一些常見的文本格式化。過濾器可以用在兩個(gè)地方：雙花括號(hào)插值和v-bind表達(dá)式。過濾器應(yīng)該被添加在JavaScript表達(dá)式的尾部，由管道符號(hào)表示：

//在雙花括號(hào)中
{{message | capitalize}}
//在v-bind中

你可以在一個(gè)組件的選項(xiàng)中定義本地的過濾器：

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

或則在創(chuàng)建Vue實(shí)例之前全局定義過濾器：

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

過濾器函數(shù)總接收表達(dá)式的值（之前操作鏈的結(jié)果）作為第一個(gè)參數(shù)。在上述例子中，capitalize過濾器函數(shù)將會(huì)收到message的值作為第一個(gè)參數(shù)。
過濾器可以串聯(lián)：

{{message | filterA |filterB}}

在這個(gè)例子中，filterA被定義為接收單個(gè)參數(shù)的過濾器函數(shù)，表達(dá)式message的值將作為參數(shù)傳入函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個(gè)參數(shù)的過濾器函數(shù)filterB，將filterA的結(jié)果傳遞到filterB中。
過濾器是JavaScript函數(shù)，因此可以接收參數(shù)：