1. /* not type checking this file because flow doesn't play well with Proxy */
  2.  
  3. import config from 'core/config'
  4. import { warn, makeMap } from '../util/index'
  5.  
  6. let initProxy
  7.  
  8. if (process.env.NODE_ENV !== 'production') {
  9.  
  10. //一些能使用的全局变量
  11. const allowedGlobals = makeMap(
  12. 'Infinity,undefined,NaN,isFinite,isNaN,' +
  13. 'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
  14. 'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
  15. 'require' // for Webpack/Browserify
  16. )

  17. //未定义缺使用了
  18. const warnNonPresent = (target, key) => {
  19. warn(
  20. `Property or method "${key}" is not defined on the instance but ` +
  21. `referenced during render. Make sure to declare reactive data ` +
  22. `properties in the data option.`,
  23. target
  24. )
  25. }

  26. //es6 proxy详解
  27. const hasProxy =
  28. typeof Proxy !== 'undefined' &&
  29. Proxy.toString().match(/native code/)
  30.  
  31. if (hasProxy) {
  32. const isBuiltInModifier = makeMap('stop,prevent,self,ctrl,shift,alt,meta')

  33. //避免设置 系统鼠标 属性
       config.keyCodes = new Proxy(config.keyCodes, {
  34. set (target, key, value) {
  35. if (isBuiltInModifier(key)) {
  36. warn(`Avoid overwriting built-in modifier in config.keyCodes: .${key}`)
  37. return false
  38. } else {
  39. target[key] = value
  40. return true
  41. }
  42. }
  43. })
  44. }
  45.  
  46. const hasHandler = {
  47. has (target, key) {
  48. const has = key in target
  49. const isAllowed = allowedGlobals(key) || key.charAt(0) === '_'
  50. if (!has && !isAllowed) {
  51. warnNonPresent(target, key)
  52. }
    //如果有这个key 或者 不是全局函数, 返回true
  53. return has || !isAllowed
  54. }
  55. }
  56.  
  57. const getHandler = {
  58. get (target, key) {
  59. if (typeof key === 'string' && !(key in target)) {
  60. warnNonPresent(target, key)
  61. }
  62. return target[key]
  63. }
  64. }
  65.  
  66. initProxy = function initProxy (vm) {
  67. if (hasProxy) {
  68. // determine which proxy handler to use
  69. const options = vm.$options
  70. const handlers = options.render && options.render._withStripped
  71. ? getHandler
  72. : hasHandler
  73. vm._renderProxy = new Proxy(vm, handlers)
  74. } else {
  75. vm._renderProxy = vm
  76. }
  77. }
  78. }
  79.  
  80. export { initProxy }

此方法做了一些对象操作的拦截 和 警告

vue.js 源代码学习笔记 ----- instance proxy的更多相关文章

  1. vue.js 源代码学习笔记 ----- instance state

    /* @flow */ import Dep from '../observer/dep' import Watcher from '../observer/watcher' import { set ...

  2. vue.js 源代码学习笔记 ----- instance render

    /* @flow */ import { warn, nextTick, toNumber, _toString, looseEqual, emptyObject, handleError, loos ...

  3. vue.js 源代码学习笔记 ----- instance init

    /* @flow */ import config from '../config' import { initProxy } from './proxy' import { initState } ...

  4. vue.js 源代码学习笔记 ----- instance event

    /* @flow */ import { updateListeners } from '../vdom/helpers/index' import { toArray, tip, hyphenate ...

  5. vue.js 源代码学习笔记 ----- instance index

    import { initMixin } from './init' import { stateMixin } from './state' import { renderMixin } from ...

  6. vue.js 源代码学习笔记 ----- instance inject

    /* @flow */ import { hasSymbol } from 'core/util/env' import { warn } from '../util/index' import { ...

  7. vue.js 源代码学习笔记 ----- html-parse.js

    /** * Not type-checking this file because it's mostly vendor code. */ /*! * HTML Parser By John Resi ...

  8. vue.js 源代码学习笔记 ----- core lifecycle

    /* @flow */ import config from '../config' import Watcher from '../observer/watcher' import { mark, ...

  9. vue.js 源代码学习笔记 ----- 工具方法 option

    /* @flow */ import Vue from '../instance/index' import config from '../config' import { warn } from ...

随机推荐

  1. 20145231熊梓宏 《网络对抗》 实验5 MSF基础应用

    20145231熊梓宏 <网络对抗> 实验5 MSF基础应用 基础问题回答 1.用自己的话解释什么是exploit,payload,encode? exploit就相当于是就是渗透攻击,其 ...

  2. Leetcode(93): Restore IP Addresses

    Given a string containing only digits, restore it by returning all possible valid IP address combina ...

  3. linux c开发环境构成

    1.编辑器:VI.VIM 2.编译器:GNU C/C++编译器gcc 3.调试器:gdb 4.函数库:glibc 5.系统头文件:glibc_header

  4. 源码安装GCC-4.9.2

    本文参考:http://cuchadanfan.blog.51cto.com/9940284/1689556  感谢原作者的分享! 首先安装基础包,安装网络依赖的时候要用 [root@localhos ...

  5. Ad Exchange基本接口和功能

    这里描述下一个exchange通常应该提供的接口和应该满足的功能. 接口 实时竞价接口 实时竞价接口也是最核心的接口,对接的dsp需要向exchange提供竞价地址.每次有广告请求时,exchange ...

  6. LaTeX模板 - FORMCM

    LaTex 模板 - FORMCM \documentclass{mcmthesis} \mcmsetup{CTeX = true, % 使用 CTeX 套装时,设置为 true tcn = 8989 ...

  7. Mysql事物的4种隔离级别

    SQL标准定义了4种隔离级别,包括了一些具体规则,用来限定事务内外的哪些改变是可见的,哪些是不可见的. 低级别的隔离级一般支持更高的并发处理,并拥有更低的系统开销. 首先,我们使用 test 数据库, ...

  8. asp.net core + log4net+exceptionles+DI

    参考了ABP的代码,我也用依赖注入的原则,设计了日志模块. 与abp不同之处在于:1)DI容器使用的是.net core自带的注入容器,2)集成了excetpionless日志模块,3)不依赖于abp ...

  9. 关于http请求ContentType:application/x-www-form-urlencoded

    在又一次http请求过程中,模拟post请求提交form表单数据一直提示部分参数为空,后面检查发现是缺少ContentType:application/x-www-form-urlencoded的原因 ...

  10. HTML5 history API,创造更好的浏览体验

    HTML5 history API有什么用呢? 从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残 ...