Vue之全局API（全局操作set+delete）

灰太狼 2023-05-29 14:27 17阅读 0赞

## 全局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引用。 如下所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][20191106191338562.png]
 *  **二、改变外部数据的三种方法**  
    1、用Vue.set改变  
    2、用Vue对象的方法添加  
    3、直接操作外部数据
 *  如下所示，在mounted挂载完毕后年纪+1，如下所示  
    ![在这里插入图片描述][20191106191405275.png]  
    以上图中3种方法均可改变外部数据
 *  其实这三种方式都可以操作外部的数据，Vue也给我们增加了一种操作外部数据的方法。  
    具体代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div class="demo">
    			<h2>{ { money}}</h2>
    		</div>
    	</body>
    	<script type="text/javascript">
    		/* 在构造器外部声明数据 */
    		var moneyValue = { 
    			money:2000
    		}
    		/* 构造器 */
    		var demo = new Vue({ 
    			el: '.demo',
    			/* 引用外部数据 */
    			data:moneyValue,
    			/* 挂载完毕 */
    			mounted(){ 
    				/* 三种方式 */
    				/*1. this.money ++ */
    				/*2. set语法Vue.set(对象名,'键名',键新值) Vue.set(moneyValue,'money',2001)*/
    				3.moneyValue.money++
    			}
    		})
    	</script>
    </html>

*  **三、为什么要有Vue.set的存在?**
 *  由于Javascript的限制，Vue不能自动检测以下变动的数组。  
    当你利用索引直接设置一个项时，vue不会自动更新。  
    当你修改数组的长度时，vue不会自动更新。
 *  **小结：普通的情况下对Vue实例里面的数据进行更改，数据改掉了，但是呈现在页面的视图并没有发生变化，所以借用set方法视图也会跟着刷新**  
    案例：普通方式视图并没有刷新  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]
 *  案例：set方式视图会刷新
 *  语法：Vue.set(target,key,value)  
    ![在这里插入图片描述][20191106191654513.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]
 *  小结：  
    1、语法：Vue.set( target, key, value )  
    2、返回值：设置的值  
    3、作用：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。  
    4、通俗理解：用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性  
    5、注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象  
    具体代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div class="demo">
    			<h2>{ { list}}</h2>
    		</div>
    	</body>
    	<script type="text/javascript">
    		/* 构造器 */
    		var demo = new Vue({ 
    			el: '.demo',
    			data:{ 
    				list:['龙珠','西游记','冒险岛','水浒传']
    			}
    		})
    		console.log(demo.list)
    		/* 由于Javascript的限制，Vue不能自动检测以下变动的数组。 当你利用索引直接设置一个项时，vue不会自动更新。 当你修改数组的长度时，vue不会自动更新。 */
    		//demo.list[3] = '海贼王'
    		/* set方式视图会刷新语法：Vue.set(target,key,value) */
    		Vue.set(demo.list,3,"蜡笔小新")
    	</script>
    </html>

*  **（4）Vue.delete删除对象元素操作**
 *  语法：Vue.delete(target,key)用法和原理与set添加元素是一样的道理  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]  
    上图：删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是很少会使用它。  
    具体代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div class="demo">
    			<h2>{ { list}}</h2>
    		</div>
    	</body>
    	<script type="text/javascript">
    		/* 构造器 */
    		var demo = new Vue({ 
    			el: '.demo',
    			data:{ 
    				list:['龙珠','西游记','冒险岛','水浒传']
    			}
    		})
    		console.log(demo.list)
    		/* vue变空，视图不变 */
    		//demo.list[3] = ' '
    		/* set方式视图会刷新语法：Vue.set(target,key,value) */
    		Vue.delete(demo.list,2)
    	</script>
    </html>

## 完毕… ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191106191319395.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191106191338562.png]: https://img-blog.csdnimg.cn/20191106191338562.png
[20191106191405275.png]: https://img-blog.csdnimg.cn/20191106191405275.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191106191606460.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191106191631633.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191106191654513.png]: https://img-blog.csdnimg.cn/20191106191654513.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191106191706712.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191106191743781.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70