Vue.nextTick，Vue.set，Vue.delete，Vue.filter学习

junnplus 发布于2019-08-23 13:54 / 594人阅读

摘要：用法在下次更新循环结束之后执行延迟回调。只要观察到数据变化，将开启一个队列，并缓冲在同一事件循环中发生的所有的数据改变。如果对象是响应式的，确保删除能触发更新视图。

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云服务器学习机器学习学习机器学习学习深度学习学习学习深度学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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