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的值作为第三个参数。

    原文作者:Lessong
    原文地址: https://segmentfault.com/a/1190000017271815
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞