vue学习之全局api
Vue.nextTick线程操作
Vue.nextTick线程操作
语法:Vue.nextTick([callback,context])
作用:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,即可获取更新后的 DOM。
案例:点击按钮,修改姓名并获取更新后的DOM元素内容
分析:测试后可以看到视图更新以后拿到的并不是更新后的innerHTML
原因:因为DOM结构更新是一个异步事件.
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。
结合上述,目前已经知道Vue.nextTick操作的作用,接下来深入分析下原理,先来了解几个概念。
1、异步过程:数据变化到dom变化是异步过程
2、核心实现:nextTick 是 Vue 的一个核心实现,为了方便大家理解,简单介绍一下 JS 的运行机制。
3、JS 运行机制:JS 执行是单线程的,它是基于事件循环的。
js运行机制
JS 执行是单线程的,它是基于事件循环的。事件循环大致分为以下几个步骤:
(1)执行栈
所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)
(2)任务队列
主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件(根
据放置先后时间顺序决定事件执行顺序)。
(3)读取任务队列
一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结
束等待状态,进入执行栈,开始执行。
(4)重复执行
接下来主线程不断重复上面的第三步
小结:
主线程的执行过程就是一个 tick,而所有的异步结果都是通过 “任务队列” 来调度被调度。 消息队列中存放的是一个个的任务(task)。vue响应式的改变一个值以后,此时的dom并不会立即更新,如果需要在数据改变以后立即通过dom做一些操作,可以使用$nextTick获得更新后的dom。
Vue.use
在用Vue使用别人的组件或者第三方库时,会用到 Vue.use(),如下所示
filter过滤器
过滤器顾名思义,过滤就是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰,那么过滤器则是过滤的工具。
Vue.filter过滤器分类
Vue过滤器分为全局和局部两种,全局注册的过滤器为全局过滤器,局部注册的过滤器为局部过滤器。
区别:作用域不同,全局过滤器可以在全局内调用,局部过滤器只能在被定义的当前构造器下使用。
Vue.filter过滤器注册
过滤器可在new Vue实例前注册全局的,也可以在组件上写局部过滤器。
Vue.filter过滤器调用
调用过滤器包含两种方式:
①文本插值表达式方式
②v-bind属性表达式中使用
文本插值表达式方式—全局注册
文本插值表达式方式—局部注册
接下来使用局部注册的过滤器进行货币过滤,即给价格数据添加”美元$”标识,代码如下
当全局过滤器和局部过滤器重名时,会优先采用局部过滤器。
v-bind表达式中使用(样式及内容显示)
有一个列表,类似微博粉丝关注,列表中有两种情况:已关注和未关注,需要在加载页面时进行样式区分
分析
①通过过滤器来判断列表中每一项的显示颜色
②通过过滤器来判断内容显示"关注"与"已关注"
③type为0 '未关注', type为1 '已关注'
步骤1:内容过滤显示(筛选条件:type为0时未关注、type为1时已关注)
步骤2:样式过滤展示(筛选条件:已关注字体为红色,未关注为绿色)
过滤器除了可以单个使用外,也可以串联,利用管道符号 | 即可串联
Vue.filter过滤器串联/过滤器的参数写法/管道式连接过滤
语法1:{{message | filterA | filterB …}}
语法2:{{message | filterA(option1,option2,…,optionN)}}
语法3: {{ option1 , option2 , … ,optionN | filterA }}
Vue.filter过滤器限制
Vue.filter中this指向并不是Vue实例,而是window。
原因:
vue中的过滤器更偏向于对文本数据的转化,而不能依赖this上下文,如果需要使用到上下文this我们应该使用computed计
算属性的或者一个method方法。
computed&&filters
【computed和filters区别】
相同点:所得到的值都需要return出去
不同点:
1、computed
①不能传参,只能监听预先设置好的值
②值会缓存,在我们要监听的数据没有变化的时候,是不会再去执行对象相应的数据的(性能比较好)
2、filter
①将返回数据进行处理后返回处理结果的简单函数
②值不会缓存,会重新执行里面的操作
差异对比:
1、computed计算属性常用于处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值
2、methods方法也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于
methods,当不需要缓存时可用methods。
3、fliter过滤器是将返回数据进行处理后返回处理结果的简单函数
1、filter 可以串联 比如这样{{value | filterA | filterB}},在针对某些属性值的情况下使用起来更优雅,耦合性更低
2、filter全局注册后复用性更高,不用每个page都引入方法,而computed适合本页面/组件的数据转换
Vue.set全局操作
Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1
的数据,我们在构造器外部定义了一个方法,要每次点击按钮给值加1.就需要用到Vue.set。
由于Javascript的限制,Vue不能自动检测以下变动的数组。
当你利用索引直接设置一个项时,vue不会自动更新。
当你修改数组的长度时,vue不会自动更新。
语法:Vue.set(target,key,value)
Vue.delete全局操作
语法:Vue.delete(target,key)用法和原理与set添加元素是一样的道理
下一篇: 同源策略与跨域实现
推荐阅读
-
vue学习之全局api
-
学习VUE第十五天课程(VUE之全局API(nextTick、filter、use))
-
Spring+SpringMVC+MyBatis深入学习及搭建(三)之MyBatis全局配置文件解析
-
vue 双向数据绑定的实现学习之监听器的实现方法
-
vue学习(二)之MVVM
-
浅谈Vue3.0新版API之composition-api入坑指南
-
Vue.js基础学习之class与样式绑定
-
从壹开始前后端分离【 .NET Core2.0 Api + Vue 2.0 + AOP + 分布式】框架之五 || Swagger的使用 3.3
-
从壹开始前后端分离【 .NET Core2.0 Api + Vue 2.0 + AOP + 分布式】框架之四 || Swagger的使用 3.2
-
手机APP开发之MIT Appinventor详细实战教程(十一),地图API的调用与学习,第一部分