学习VUE第十五天课程（基础篇完结1：VUE之全局API（全局操作set+delete））

梦里梦外; 2023-05-29 13:04 3阅读 0赞

# VUE之全局API（全局操作set+delete） #

# 全局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.set全局操作 #

**（3）全局操作API-set简介：**  
Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。

一、引用构造器外部数据  
什么是外部数据，就是不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用的数据。  
外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。 如下所示

# 一、引用构造器外部数据 #

二、改变外部数据的三种方法  
1、用Vue.set改变  
2、用Vue对象的方法添加  
3、直接操作外部数据

如下所示，在mounted挂载完毕后年纪+1，如下所示

![在这里插入图片描述][2019110611200012.png]

其实这三种方式都可以操作外部的数据，Vue也给我们增加了一种操作外部数据的方法。

三、为什么要有Vue.set的存在?

由于Javascript的限制，Vue不能自动检测以下变动的数组。  
当你利用索引直接设置一个项时，vue不会自动更新。  
当你修改数组的长度时，vue不会自动更新。

**小结：普通的情况下对Vue实例里面的数据进行更改，数据改掉了，但是呈现在页面的视图并没有发生变化，所以借用set方法视图也会跟着刷新**

**三、为什么要有Vue.set的存在?**  
案例：普通方式视图并没有刷新  
![在这里插入图片描述][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]  
案例：set方式视图会刷新

**语法：Vue.set(target,key,value)**

# 小结： #

1、语法：Vue.set( target, key, value )  
2、返回值：设置的值  
3、作用：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。  
4、通俗理解：用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性  
5、注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象

# Vue.delete全局操作 #

（4）Vue.delete删除对象元素操作  
语法：Vue.delete(target,key)用法和原理与set添加元素是一样的道理  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

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

# 感谢来访！！！ #

[2019110611200012.png]: https://img-blog.csdnimg.cn/2019110611200012.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191106112241894.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/20191106112259863.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/20191106112331353.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70