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

junnplus 發布于2019-08-23 13:54 / 581人閱讀

摘要：用法在下次更新循環結束之后執行延遲回調。只要觀察到數據變化，將開啟一個隊列，并緩沖在同一事件循環中發生的所有的數據改變。如果對象是響應式的，確保刪除能觸發更新視圖。

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。
實例：

//模板

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

//頁面初始渲染時只有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中

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

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的值作為第三個參數。

云服務器 GPU云服務器學習機器學習學習機器學習學習深度學習學習學習深度學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99755.html

Vue源碼學習（二）——從宏觀看Vue

摘要：上一篇文章我們寫到從入口文件一步步找到的構造函數，現在我們要去看看實例化經歷的過程的構造函數我們知道的構造函數在中不明白的可以去看上一篇文章源碼學習筆記一。上一篇文章我們寫到從入口文件一步步找到Vue的構造函數，現在我們要去看看Vue實例化經歷的過程 Vue的構造函數我們知道Vue的構造函數在src/core/instance/index.js中,不明白的可以去看上一篇文章 Vue...

AndroidTraveler 2019-08-23 13:59 評論0 收藏0
vue源碼分析系列之入口文件分析

摘要：中引入了中的中引入了中的中，定義了的構造函數中的原型上掛載了方法，用來做初始化原型上掛載的屬性描述符，返回原型上掛載的屬性描述符返回原型上掛載與方法，用來為對象新增刪除響應式屬性原型上掛載方法原型上掛載事件相關的方法。入口尋找入口platforms/web/entry-runtime-with-compiler中import了./runtime/index導出的vue。 ./r...

kgbook 2019-08-23 15:10 評論0 收藏0
Vue全局API總結

摘要：帶圖原文鏈接地址用于創建一個子類用來掛載在下次更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的。而則是在引入組件之后，則是將組件內部的內容如等方法等屬性與父組件相應內容進行合并。只在獨立構建時有效帶圖原文鏈接地址：http://www.cnblogs.com/douyae...1.extend用于創建一個子類Vue,用$mount來掛載 con...

lemon 2019-08-01 17:46 評論0 收藏0
Vue全局API總結

摘要：帶圖原文鏈接地址用于創建一個子類用來掛載在下次更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的。而則是在引入組件之后，則是將組件內部的內容如等方法等屬性與父組件相應內容進行合并。只在獨立構建時有效帶圖原文鏈接地址：http://www.cnblogs.com/douyae...1.extend用于創建一個子類Vue,用$mount來掛載 con...

nifhlheimr 2019-08-21 16:59 評論0 收藏0
Vue全局API總結

摘要：帶圖原文鏈接地址用于創建一個子類用來掛載在下次更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的。而則是在引入組件之后，則是將組件內部的內容如等方法等屬性與父組件相應內容進行合并。只在獨立構建時有效帶圖原文鏈接地址：http://www.cnblogs.com/douyae...1.extend用于創建一個子類Vue,用$mount來掛載 con...

light 2019-08-30 15:53 評論0 收藏0