学习VUE第十五天课程（VUE之全局API（nextTick、filter、use））

Myth丶恋晨 2023-05-29 13:01 8阅读 0赞

# VUE之全局API（nextTick、filter、use） #

## 全局API ##

**（1）什么是全局API？**  
全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API.  
通俗理解：就是在构造器外部用Vue提供的API函数来定义新的功能。

**（2）常用vue 的全局 API列表**  
1、Vue.directive 自定义指令  
2、Vue.extend 扩展实例构造器  
3、全局操作Vue.set + Vue.delete  
4、Vue 的生命周期  
5、Vue component 组件 + Vue template模板  
6、Vue.nextTick线程操作、Vue.filter筛选、Vue.use调用

**小结：全局API就是在构造器外部用Vue提供的API函数来定义新的功能。**

# Vue.nextTick线程操作 #

Vue.nextTick线程操作

语法：**Vue.nextTick(\[callback,context\])**

**作用：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，即可获取更新后的 DOM。**

Vue.nextTick线程操作  
案例：点击按钮，修改姓名并获取更新后的DOM元素内容

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]

分析：**测试后可以看到视图更新以后拿到的并不是更新后的innerHTML**  
原因：**因为DOM结构更新是一个异步事件.**

**分析：深入响应式原理**  
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。  
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]  
结合上述，目前已经知道Vue.nextTick操作的作用，接下来深入分析下原理，先来了解几个概念。

**1、异步过程：数据变化到dom变化是异步过程  
2、核心实现：nextTick 是 Vue 的一个核心实现，为了方便大家理解，简单介绍一下 JS 的运行机制。  
3、JS 运行机制：JS 执行是单线程的，它是基于事件循环的。**

# JS运行机制 #

##### JS 执行是单线程的，它是基于事件循环的。事件循环大致分为以下几个步骤： #####

**（1）执行栈  
所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）  
（2）任务队列  
主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件(根据放置先后时间顺序决定事件执行顺序)。  
（3）读取任务队列  
一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。  
（4）重复执行  
接下来主线程不断重复上面的第三步  
小结：  
主线程的执行过程就是一个 tick，而所有的异步结果都是通过 “任务队列” 来调度被调度。 消息队列中存放的是一个个的任务（task）。**

#### 执行栈与任务队列： ####

**1、JS分为同步任务和异步任务  
2、同步任务都在主线程上执行，形成一个执行栈  
3、主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。  
4、一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。**

### 执行栈与任务队列概念图： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

# Vue.nextTick小结 #

**应用场景：**  
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

**通俗理解：**  
vue响应式的改变一个值以后，此时的dom并不会立即更新，如果需要在数据改变以后立即通过dom做一些操作，可以使用$nextTick获得更新后的dom。

# Vue.use #

**（3）工程化使用组件（了解即可 后期做详细讲解）**  
在用Vue使用别人的组件或者第三方库时，会用到 Vue.use()，如下所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

## filter过滤器 ##

过滤器顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。

应用场景：例如从\[‘abc’,‘abd’,‘ade’\]数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’；把‘Hello’变成‘Hello World’，那么可用过滤器给值‘Hello’后面添加上‘ World’等等都可以使用过滤器，再例如价格200，展示￥200。

# 【官方文档描述】 #

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。  
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。  
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号|指示  
![在这里插入图片描述][20191106104712881.png]

# Vue.filter过滤器 #

**（4）Vue.filter过滤器分类**  
Vue过滤器分为全局和局部两种，全局注册的过滤器为全局过滤器，局部注册的过滤器为局部过滤器。

区别：作用域不同，全局过滤器可以在全局内调用，局部过滤器只能在被定义的当前构造器下使用。

**（4）Vue.filter过滤器注册**

通俗理解：过滤器可在new Vue实例前注册全局的，也可以在组件上写局部过滤器。  
![在这里插入图片描述][20191106104742436.png]  
**（4）Vue.filter过滤器调用**  
调用过滤器包含两种方式  
①文本插值表达式方式  
②v-bind属性表达式中使用

首先看下第一种文本插值表达式方式，案例需求：日常开发里，商品展示时一般都是“￥200”的格式。但这里注意，后台传过来的数据一般只包含纯数字，所以需要给数字添加货币￥标识，此时便涉及到filter过滤，给数据添加装饰￥，那么过滤器则是过滤的工具。

## Vue.filter全局过滤器 ##

**（4）Vue.filter过滤器调用**  
①文本插值表达式方式—全局注册  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]

# Vue.filter过滤器 #

**（4）Vue.filter过滤器调用**  
①文本插值表达式方式—局部注册  
接下来使用局部注册的过滤器进行货币过滤，即给价格数据添加”美元$”标识，代码如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]

### （4）Vue.filter过滤器优先级 ###

当全局过滤器和局部过滤器重名时，会优先采用局部过滤器。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]

### （4）Vue.filter过滤器调用 ###

②v-bind表达式中使用(样式及内容显示)  
案例需求：

![在这里插入图片描述][20191106104933539.png]  
功能分析及实现：  
![在这里插入图片描述][20191106104938680.png]

#### （4）Vue.filter过滤器调用 ####

②v-bind表达式中使用(样式及内容显示)

**步骤1：内容过滤显示（筛选条件：type为0时未关注、type为1时已关注）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]

**步骤2：样式过滤展示（筛选条件：已关注字体为红色，未关注为绿色）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][20191106105054228.png]

### （4）Vue.filter过滤器串联/过滤器的参数写法/管道式连接过滤 ###

过滤器除了可以单个使用外，也可以串联，利用管道符号 | 即可串联。

案例：对于返回价格进行四舍五入过滤操作，然后加上货币过滤操作  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]

##### 语法1：\{ \{message | filterA | filterB …\}\} #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]

##### 语法2：\{ \{message | filterA(option1,option2,…,optionN)\}\}![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12] #####

##### 语法3： \{ \{ option1 , option2 , … ,optionN | filterA \}\} #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]

# Vue.filter过滤器限制 #

**（5）Vue.filter的this指向问题**  
注意：  
Vue.filter中this指向并不是Vue实例，而是window。  
原因：  
vue中的过滤器更偏向于对文本数据的转化，而不能依赖this上下文，如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法。  
![在这里插入图片描述][20191106105252117.png]

# computed&&filters #

【前言】  
目前为止，结合上述filter筛选案例，可以看出过滤器filter和计算属性computed实现的效果类似，就是将数据展示做些简单处理，实现了模板和逻辑代码的分离，减少了代码的耦合性。

【computed和filters区别】  
**相同点：所得到的值都需要return出去**

1、computed  
①不能传参，只能监听预先设置好的值  
②值会缓存，在我们要监听的数据没有变化的时候，是不会再去执行对象相应的数据的(性能比较好)  
2、filter  
①将返回数据进行处理后返回处理结果的简单函数  
②值不会缓存，会重新执行里面的操作

# computed&&filter&&methods #

**差异对比：**  
1、computed计算属性常用于处理复杂逻辑，基于依赖缓存，当依赖发生改变时会重新取值  
2、methods方法也可以实现同样的效果，但methods在重新渲染的时候会重新调用执行，在性能上computed优于methods，当不需要缓存时可用methods。  
3、fliter过滤器是将返回数据进行处理后返回处理结果的简单函数  
**问题：**  
filter主要用于数据转化，为什么不用computed呢？computed具有缓存作用，感觉比filter性能好，filter不就跟methods差不多吗

**分析：**  
1、filter 可以串联 比如这样\{ \{value | filterA | filterB\}\}，在针对某些属性值的情况下使用起来更优雅，耦合性更低  
2、filter全局注册后复用性更高，不用每个page都引入方法，而computed适合本页面/组件的数据转换

# 课堂小结 #

**1、注册—①全局Vue.filter；②局部filters选项  
2、调用—①文本插值表达式方式；②v-bind表达式中使用  
3、串联—过滤器串联/过滤器的参数写法/管道式连接过滤  
①\{ \{message | filterA | filterB\}\}  
②\{ \{message | filterA(option1,option2,…,optionN)\}\}  
③\{ \{ option1 , option2 , … ,optionN | filterA \}\}  
4、优先级—当全局过滤器和局部过滤器重名时，会优先采用局部过滤器  
5、过滤器VS计算属性  
①computed不能传参，会缓存数据  
②fliter过滤器可以传参，不会缓存**

# 以下为本章案例： #

**Vue.filter过滤器v-bind样式过滤显示案例**

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>filter过滤器v-bind</title>
        <script type="text/javascript" src="./vue-2.6.9.min.js"></script>
        <script type="text/javascript" src="./velocity.js"></script>
        <style type="text/css">
            .no{
                color: green;
            }
            .yes{
                color:red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="list of lists" v-bind:class="list | filterColor">
                    <h3>
                        {
       {list.name}}---{
       {list | filterContent}}
                    </h3>
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    lists:[
                        {type:0,name:'鹿晗'},
                        {type:1,name:'王俊凯'},
                        {type:1,name:'李易峰'},
                        {type:0,name:'杨洋'}
                    ]
                },
                filters:{
                    filterContent(option){
                        return option.type == 0 ? "未关注" : "已关注"
                    },
                    filterColor(option){
                        return option.type == 0 ? 'no' : 'yes'
                    }
                }
            })
        </script>
    </body>
    </html>

**Vue.filter过滤器管道式连接过滤**

# 如有问题或者疑问请留言联系小编！！！！ #

# 感谢来访！！！！ #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191106104316258.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191106104346457.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019110610454198.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191106104619435.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191106104712881.png]: https://img-blog.csdnimg.cn/20191106104712881.png
[20191106104742436.png]: https://img-blog.csdnimg.cn/20191106104742436.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191106104816573.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191106104837305.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191106104900859.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191106104933539.png]: https://img-blog.csdnimg.cn/20191106104933539.png
[20191106104938680.png]: https://img-blog.csdnimg.cn/20191106104938680.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191106104954283.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191106105027291.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191106105041394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191106105054228.png]: https://img-blog.csdnimg.cn/20191106105054228.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191106105120969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20191106105142864.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20191106105201644.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20191106105229562.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191106105252117.png]: https://img-blog.csdnimg.cn/20191106105252117.png