Vue源码解析：$delete与$use的内部机制
140 浏览量
更新于2024-09-01
收藏 345KB PDF 举报
"Vue源码分析 - $delete 和 $use 的内部原理"
在Vue.js框架中，`vm.$delete()` 和 `Vue.use()` 是两个重要的API，它们在不同场景下起到关键作用。本文将深入探讨这两个方法的内部实现以及它们在Vue响应式系统中的工作原理。
首先，我们来看`vm.$delete()`。在JavaScript的ES6之前，删除对象属性（如通过`delete`操作符）不会触发数据响应式更新，因为Vue的数据绑定依赖于对象属性的变化检测。`vm.$delete()` 方法就是为了解决这个问题而设计的。当需要从响应式对象中移除属性时，使用`vm.$delete()`可以确保Vue能够正确地更新视图。以下是一个简单的示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
名字: {{ user.name }} 年纪: {{ user.age }}
<button @click="addUserAgeField">删除一个年纪字段</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
user: {
name: "test",
age: 10
}
},
methods: {
addUserAgeField() {
// 这样是不起作用，不会触发数据响应式更新
// delete this.user.age;
this.$delete(this.user, 'age'); // 应该使用
}
}
});
</script>
</body>
</html>
```
在Vue源码中，`$delete` 实现位于 `vue/src/core/observer/index.js` 文件中。它会处理数据响应式系统的细节，例如解除监听、清理依赖等，以确保视图能够正确更新。
```javascript
export function del (target: Array | Object, key: any) {
if (target instanceof Array && target.__ob__) {
const ob = target.__ob__;
if (target.splice) {
// in Vue.js 2.x, Array no longer have __ob__ property
// but we can still use array methods like splice
;[key] = target.splice(key, 1);
ob.dep.notify();
} else {
delete target[key];
trigger(target, '__ob__', 'delete', key);
}
}
}
```
接下来，我们讨论 `Vue.use()`，它是Vue插件系统的核心。通过调用 `Vue.use()`，开发者可以全局注册一个插件，扩展Vue的功能。`Vue.use()` 的实现位于 `vue/src/core/global-api/use.js` 文件中。当调用 `Vue.use()` 时，Vue会检查插件是否已经被安装过，如果没安装，它会执行插件的 `install` 方法，并传递当前的Vue构造器作为参数。
```javascript
export function use (plugin: Function | Object) {
if (this._installedPlugins && (this._installedPlugins.indexOf(plugin) !== -1)) {
warn(`You are attempting to install the plugin ${plugin.name || plugin} which has already been installed.`);
return
}
if (plugin.install) { // 如果插件有install方法
plugin.install(this);
} else if (typeof plugin === 'function') { // 如果插件本身就是一个函数
plugin(this);
} else {
warn(`Invalid installer. Expected a function or an object with an "install" function.`);
}
this._installedPlugins!.push(plugin); // 将插件添加到已安装插件列表中
}
```
`Vue.use()` 使得开发社区能够创建可复用的组件库、工具集和其他增强Vue功能的插件，从而丰富了Vue生态。例如，`Vue-router` 和 `Vuex` 都是通过这种方式被引入到Vue项目中的。
总结起来，`vm.$delete()` 和 `Vue.use()` 分别负责处理响应式对象的属性删除和插件的全局安装，它们都是Vue框架中不可或缺的部分，帮助开发者更好地控制数据状态和扩展应用功能。理解这两个方法的内部原理对于深入学习Vue源码和优化应用性能都至关重要。
Vue源码之关于源码之关于vm.$delete()/Vue.use()内部原理详解内部原理详解
vm.$delete()
vm.$delete用法见官网。
为什么需要为什么需要Vue.delete()?
在ES6之前, JS没有提供方法来侦测到一个属性被删除了, 因此如果我们通过delete删除一个属性, Vue是侦测不到的, 因此不会触发数据响应式。
见下面的demo。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Vue Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
名字: {{ user.name }} 年纪: {{ user.age }}
<button @click="addUserAgeField">删除一个年纪字段</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
user: {
name: "test",
age: 10
}
},
mounted() {},
methods: {
addUserAgeField() {
// delete this.user.age; // 这样是不起作用, 不会触发数据响应式更新
this.$delete(this.user, 'age') // 应该使用
}
}
});
</script>
</body>
</html>
源码分析内部实现源码分析内部实现
源码位置vue/src/core/instance/state.js的stateMixin方法
export function stateMixin (Vue: Class<Component>) {
...
Vue.prototype.$set = set
Vue.prototype.$delete = del
...
}
然后查看del函数位置, vue/src/core/observer/index.js。
/**
* Delete a property and trigger change if necessary.
* target: 将被删除属性的目标对象, 可以是对象/数组
* key: 删除属性
*/
export function del (target: Array<any> | Object, key: any) {
// 非生产环境下, 不允许删除一个原始数据类型, 或者undefined, null
if (process.env.NODE_ENV !== 'production' &&
(isUndef(target) || isPrimitive(target))
) {
warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`)
}
// 如果target是数组, 并且key是一个合法索引，通过数组的splcie方法删除值, 并且还能触发数据的响应(数组拦截器截取到变化到元素, 通知依赖更新数据)
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.splice(key, 1)
return
}
// 获取ob
const ob = (target: any).__ob__
// target._isVue: 不允许删除Vue实例对象上的属性
// (ob && ob.vmCount): 不允许删除根数据对象的属性，触发不了响应
if (target._isVue || (ob && ob.vmCount)) {
process.env.NODE_ENV !== 'production' && warn(
'Avoid deleting properties on a Vue instance or its root $data ' +
'- just set it to null.'
)
return
}
// 如果属性压根不在对象上, 什么都不做处理
if (!hasOwn(target, key)) {
return
}
// 走到这一步说明, target是对象, 并且key在target上, 直接使用delete删除
delete target[key] // 如果ob不存在, 说明target本身不是响应式数据，
if (!ob) {
return
}
// 存在ob, 通过ob里面存储的Dep实例的notify方法通知依赖更新
下载后可阅读完整内容，剩余4页未读，立即下载
2020-10-14 上传
2021-12-29 上传
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
