Vue源码之关于vm.$delete()/Vue.use()内部原理详解


Posted in Javascript onMay 01, 2019

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源码之关于vm.$delete()/Vue.use()内部原理详解

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)
  }
  ...
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 树形结构的选择器
Feb 15 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
Vue.extend实现挂载到实例上的方法
May 01 #Javascript
JS html事件冒泡和事件捕获操作示例
May 01 #Javascript
JS实现的贪吃蛇游戏案例详解
May 01 #Javascript
javascript原型链学习记录之继承实现方式分析
May 01 #Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 #Javascript
微信小程序常见页面跳转操作简单示例
May 01 #Javascript
浅谈对于react-thunk中间件的简单理解
May 01 #Javascript
You might like
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
python编写简单爬虫资料汇总
2016/03/22 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
python实现媒体播放器功能
2018/02/11 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
python使用matplotlib绘制热图
2018/11/07 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python实现的汉诺塔算法示例
2019/10/23 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
Django缓存Cache使用详解
2020/11/30 Python
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
早会主持词
2014/03/17 职场文书
机关单位动员会主持词
2014/03/20 职场文书
技校毕业生自荐信
2014/06/03 职场文书
毕业证委托书范文
2014/09/26 职场文书
老公保证书怎么写
2015/02/26 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
建房合同协议书
2016/03/21 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android