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

最新推荐文章于 2024-11-21 09:59:30 发布

·Mr.zuo

最新推荐文章于 2024-11-21 09:59:30 发布

阅读量245

点赞数

分类专栏： vue计算属性 vue HTML 文章标签：全局Set 全局delete

本文链接：https://blog.youkuaiyun.com/zuomengjia/article/details/102936102

版权

vue 同时被 3 个专栏收录

27 篇文章

订阅专栏

HTML

14 篇文章

订阅专栏

vue计算属性

13 篇文章

订阅专栏

本文详细介绍了Vue的全局API，重点讨论了Vue.set的用途，包括如何在构造器外部操作内部数据、改变外部数据的三种方法，并解释了Vue.set存在的原因。此外，还提到了Vue.delete用于删除对象元素的操作，阐述了其语法和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全局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，如下所示
其实这三种方式都可以操作外部的数据，Vue也给我们增加了一种操作外部数据的方法。

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

由于Javascript的限制，Vue不能自动检测以下变动的数组。
当你利用索引直接设置一个项时，vue不会自动更新。
当你修改数组的长度时，vue不会自动更新。
小结：普通的情况下对Vue实例里面的数据进行更改，数据改掉了，但是呈现在页面的视图并没有发生变化，所以借用set方法视图也会跟着刷新
案例：普通方式视图并没有刷新
案例：set方式视图会刷新
语法：Vue.set(target,key,value)

小结：

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

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>Vue.set+delete</title>
		<script src="js/velocity.js"></script>
		<script src="js/vue-2.6.9.min.js"></script>
	</head>
	<body>
		<div id="demo">
			<h3>{{list}}</h3>
		</div>
	</body>
	<script type="text/javascript">
		/*构造器*/
		var demo = new Vue({
			el:'#demo',
			data:{
				list:['龙珠','哪吒','金瓶梅','西行记']
			}
		})
		Vue.set(demo.list,3,'红楼梦')	/* Vue.set设置更新操作 */
		Vue.delete(demo.list,3)			/* Vue.delete删除操作 */
	</script>
</html>