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方法通知依赖更新
ob.dep.notify()
}
工具函数
// 判断是否v是未定义
export function isUndef (v: any): boolean %checks {
return v === undefined || v === null
}
// 判断v是否是原始数据类型(基本数据类型)
export function isPrimitive (value: any): boolean %checks {
return (
typeof value === 'string' ||
typeof value === 'number' ||
// $flow-disable-line
typeof value === 'symbol' ||
typeof value === 'boolean'
)
}
// 判断对象上是否有属性
const hasOwnProperty = Object.prototype.hasOwnProperty
export function hasOwn (obj: Object | Array<*>, key: string): boolean {
return hasOwnProperty.call(obj, key)
}
关于__ob__属性, 在很多源码地方我们都会看到类似这样获取ob(Observer实例)
const ob = (target: any).__ob__
牢记只要数据被observe过就会打上这个私有属性, 是在Observer类的构造器里面发生的
export class Observer {
constructor (value: any) {
this.value = value
// 依赖是存在Observe上的dep属性, 再次通知依赖更新时候我们一般使用__ob__.dep.notify()
this.dep = new Dep()
this.vmCount = 0
// 定义__ob__
def(value, '__ob__', this)
if (Array.isArray(value)) {
if (hasProto) {
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value)
} else {
this.walk(value)
}
}
...
}
Vue.use()
大家都知道这个方法是用来安装插件的, 是全局api。
具体使用见官网。
通过Vue.use()源码+Vuex部分源码分析插件的安装过程
Vue.use()什么时候被绑在Vue原型上
源码位置: vue/src/core/index.js
Vue
initGlobalAPI()
源码位置: vue/src/core/global-api/index.js
export function initGlobalAPI (Vue: GlobalAPI) {
...
// 初始化use()
initUse(Vue)
...
}
initUse()
源码位置: vue/src/core/global-api/use.js
export function initUse (Vue: GlobalAPI) {
// 这里的Vue是构造器函数.
// 通过以下源码:
// vue-dev/src/core/global-api/index.js initGlobalAPI()中
// vue-dev/src/core/index.js 这里执行了initGlobalAPI() => 初始化一些全局api
// Vue.use(): 安装Vue.js的插件
// 如果插件是一个对象，必须提供 install 方法
// 如果插件是一个函数，它会被作为 install 方法
// install 方法调用时，会将 Vue 作为参数传入
Vue.use = function (plugin: Function | Object) {
// installedPlugins存储install后的插件
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
if (installedPlugins.indexOf(plugin) > -1) {
// 同一个插件只会安装一次
return this
}
// additional parameters
// 除了插件外的其他参数 Vue.use(MyPlugin, { someOption: true })
const args = toArray(arguments, 1)
// 往args存储Vue构造器, 供插件的install方法使用
args.unshift(this)
// 分情况执行插件的install方法, 把this(Vue), 参数抛回给install方法
// 所以我们常说, install这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：
if (typeof plugin.install === 'function') {
// plugin是一个对象
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
// plugin是一个函数
plugin.apply(null, args)
}
// install之后会存储该插件避免重复安装
installedPlugins.push(plugin)
return this
}
}
Vuex源码
我们都知道开发一个Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：
那么我们首先就是看Vuex的install方法是怎么实现的
源码位置: vuex-dev/src/store.js
let Vue // bind on install
// install: 装载vuex到vue, Vue.use(Vuex)也是执行install方法
// 关于Vue.use()源码. vue-dev/src/core/global-api/use.js
export function install (_Vue) {
if (Vue && _Vue === Vue) {
if (process.env.NODE_ENV !== 'production') {
console.error(
'[vuex] already installed. Vue.use(Vuex) should be called only once.'
)
}
return
}
// 首次安装插件, 会把局部的Vue缓存到全局的window.Vue. 主要为了避免重复调用Vue.use()
Vue = _Vue
applyMixin(Vue)
}
applyMixin()
源码位置: vuex/src/mixin.js
export default function (Vue) {
const version = Number(Vue.version.split('.')[0])
if (version >= 2) {
// 如果是2.x.x以上版本，注入一个全局mixin, 执行vueInit方法
Vue.mixin({ beforeCreate: vuexInit })
} else {
// override init and inject vuex init procedure
// for 1.x backwards compatibility.
// 重写Vue原型上的_init方法, 注入vueinit方法 _init方法见 vue-dev/src/core/instance/init.js
const _init = Vue.prototype._init // 作为缓存变量
Vue.prototype._init = function (options = {}) {
options.init = options.init
? [vuexInit].concat(options.init)
: vuexInit
// 重新执行_init
_init.call(this, options)
}
}
/**
* Vuex init hook, injected into each instances init hooks list.
*/
// 注入store到Vue构造器
function vuexInit () {
// 这里的this. 指的是Vue构造器
/**
* new Vue({
* ...,
* store,
* route
* })
*/
// options: 就是new Vue(options)
// 源码见 vue-dev/src/core/instance/init.js initMixin方法
const options = this.$options
// store injection
// store是我们使用new Vuex.Store(options)的实例
// 注入store到Vue构造函数上的$store属性上, 所以我们在Vue组件里面使用this.$store来使用
if (options.store) {
// options.store为真说明是根节点root
this.$store = typeof options.store === 'function'
? options.store()
: options.store
} else if (options.parent && options.parent.$store) {
// 子组件直接从父组件中获取$store，这样就保证了所有组件都公用了全局的同一份store
this.$store = options.parent.$store
}
}
}
至于install方法Vuex是如果执行的?
export class Store {
constructor (options = {}) {
// 浏览器环境下安装vuex
if (!Vue && typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
...
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
简介 Vue.use( plugin ):安装 Vue.js 插件.如果插件是一个对象,必须提供 install 方法.如果插件是一个函数,它会被作为 install 方法.install 方法将被作为 Vue 的参数调用. 当 install 方法被同一个插件多次调用,插件将只会被安装一次. Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: MyPlugin.install = function (Vue, op
-
关于axios不能使用Vue.use()浅析
前言 最近在学习axios,在使用过程遇到了一些问题,觉着有必要给大家分享下,关于axios的基本知识大家可以参考这篇文章:axios基本入门用法教程 ,下面话不多说了,来一起看看详细的介绍吧. 问题 相信很多人在用Vue使用别人的组件时,会用到 Vue.use() .例如:Vue.use(VueRouter) . Vue.use(MintUI) .但是用 axios时,就不需要用 Vue.use(axios) ,就能直接使用.那这是为什么呐? 答案 因为 axios 没有 install. 什
-
浅谈Vue.use的使用
vue.use(plugin, arguments) 语法 参数:plugin(Function | Object) 用法: 如果vue安装的组件类型必须为Function或者是Object 如果是个对象,必须提供install方法 如果是一个函数,会被直接当作install函数执行 install函数接受参数,默认第一个参数为Vue,其后参数为注册组件时传入的arguments 先举个? 我们先来看一个简单的事例 首先我使用官方脚手架新建一个项目vue init webpack vue-dem
-
详解Vue.use自定义自己的全局组件
通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-simple这个简单版本的脚手架为例,安装就不啰嗦了,直接进入正题 首先看下目前的项目结构: webpack首先会加载main.js,所以我们在main的js里面引入.我以element ui来做对比说明 import Vue from 'vue' import App from './App.vue'
-
Vue.use源码学习小结
由于最近在做一些前端的项目,并且接手了Weex的项目,所以难免和Vue打起了交道,js也是从入门到学习中.项目里用到了Vue的插件机制,所以看了看Vue.use的源码,还是比较简单的,适合新手阅读,所以记录下来以免遗忘. 感谢 本文最后一章节[结合实际场景]是参考了eros这个开源项目的,感谢eros项目组的开发. 什么是Vue插件 关于什么是Vue插件大家可以去看官网的解释 ,总得来说就是提供一个全局注册/调用的能力. 怎么用 我们以Weex为例. 首先有一个toast.js const To
-
Vue.use源码分析
我想有过vue开发经验的,对于vue.use并不陌生.当使用vue-resource或vue-router等全局组件时,必须通过Vue.use方法引入,才起作用.那么vue.use在组件引入之前到底做了那些事情呢?让我们一窥究竟. 先上vue.use源码 // javascript的方法是可以传递的,哈哈 Vue.use = function (plugin) { /* istanbul ignore if */ if (plugin.installed) { return } // addit
-
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 na
-
Java源码解析之HashMap的put、resize方法详解
一.HashMap 简介 HashMap 底层采用哈希表结构 数组加链表加红黑树实现,允许储存null键和null值 数组优点:通过数组下标可以快速实现对数组元素的访问,效率高 链表优点:插入或删除数据不需要移动元素,只需要修改节点引用效率高 二.源码分析 2.1 继承和实现 public class HashMap<K,V> extends AbstractMap<K,V> implements Map<K,V>, Cloneable, Serializable {
-
JDK源码之线程并发协调神器CountDownLatch和CyclicBarrier详解
目录 引言 CountDownLatch 使用场景 底层实现原理 初始化 计数器递减 阻塞线程 CyclicBarrier 使用场景 底层实现原理 初始化 阻塞等待 总结 引言 那么在程序的世界中是如何对这种协调关系进行描述的呢?今天就和大家聊聊Java大神Doug Lea在并发包中如何通过CountDownLatch和CyclicBarrier实现任务协调的代码描述. CountDownLatch 我相信大家都知道好代码的一个重要特性就是代码中类.变量等的命名可以做到顾名思义,也就是说看到命名
-
关于Vue源码vm.$watch()内部原理详解
关于vm.$watch()详细用法可以见官网. 大致用法如下: <script> const app = new Vue({ el: "#app", data: { a: { b: { c: 'c' } } }, mounted () { this.$watch(function () { return this.a.b.c }, this.handle, { deep: true, immediate: true // 默认会初始化执行一次handle }) }, met
-
jQuery源码解读之extend()与工具方法、实例方法详解
本文实例讲述了jQuery源码解读之extend()与工具方法.实例方法.分享给大家供大家参考,具体如下: 使用jQuery的时候会发现,jQuery中有的函数是这样使用的: $.get(); $.post(); $.getJSON(); 有些函数是这样使用的: $('div').css(); $('ul').find('li'); 有些函数是这样使用的: $('li').each(callback); $.each(lis,callback); 这里涉及到两个概念:工具方法与实例方法.通常我们
-
Linux下源码包安装Swoole及基本使用操作图文详解
本文实例讲述了Linux下源码包安装Swoole及基本使用操作.分享给大家供大家参考,具体如下: 下载Swoole PECL扩展源码包:http://pecl.php.net/package/swoole 关于PHP版本依赖选择: 下载好放到/usr/local/src下,解压缩: tar -zxvf swoole-2.2.0.tgz 准备扩展安装编译环境: phpize 查看php-config位置: find / -name php-config 配置:(--with-php-config=
-
vue源码入口文件分析(推荐)
开发vue项目有段时间了, 之前用angularjs 后来用 reactjs 但是那时候一直没有时间把自己看源码的思考记录下来,现在我不想再浪费这 来之不易的思考, 我要坚持!! 看源码我个人感觉非常开心,每每看上一段,自己就充实许多,不知道你是否和我一样. vue 源码是众多module(模块)用 rollup 工具合并而成, 从package.json 中能够看到.现在让我们从github上下载vue项目,开始我们今天的"思考". 我下载的源码版本是:"version&q
-
Vue源码学习之关于对Array的数据侦听实现
摘要 我们都知道Vue的响应式是通过Object.defineProperty来进行数据劫持.但是那是针对Object类型可以实现, 如果是数组呢? 通过set/get方式是不行的. 但是Vue作者使用了一个方式来实现Array类型的监测: 拦截器. 核心思想 通过创建一个拦截器来覆盖数组本身的原型对象Array.prototype. 拦截器 通过查看Vue源码路径vue/src/core/observer/array.js. /** * Vue对数组的变化侦测 * 思想: 通过一个拦截器来覆盖
-
手写Vue源码之数据劫持示例详解
源代码: 传送门 Vue会对我们在data中传入的数据进行拦截: 对象:递归的为对象的每个属性都设置get/set方法 数组:修改数组的原型方法,对于会修改原数组的方法进行了重写 在用户为data中的对象设置值.修改值以及调用修改原数组的方法时,都可以添加一些逻辑来进行处理,实现数据更新页面也同时更新. Vue中的响应式(reactive): 对对象属性或数组方法进行了拦截,在属性或数组更新时可以同时自动地更新视图.在代码中被观测过的数据具有响应性 创建Vue实例 我们先让代码实现下面的功能:
-
浅析从vue源码看观察者模式
观察者模式 首先话题下来,我们得反问一下自己,什么是观察者模式? 概念 观察者模式(Observer):通常又被称作为发布-订阅者模式.它定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖于它的对象都会得到通知并自动更新,解决了主体对象与观察者之间功能的耦合. 讲个故事 上面对于观察者模式的概念可能会比较官方化,所以我们讲个故事来理解它. A:是共产党派往国民党密探,代号 001(发布者) B:是共产党的通信人员,负责与 A 进行秘密交接(订阅者) A 日常工作就是在明面采集