vue.js 源代码学习笔记 ----- instance proxy
/* not type checking this file because flow doesn't play well with Proxy */ import config from 'core/config'
import { warn, makeMap } from '../util/index' let initProxy if (process.env.NODE_ENV !== 'production') { //一些能使用的全局变量
const allowedGlobals = makeMap(
'Infinity,undefined,NaN,isFinite,isNaN,' +
'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
'require' // for Webpack/Browserify
)
//未定义缺使用了
const warnNonPresent = (target, key) => {
warn(
`Property or method "${key}" is not defined on the instance but ` +
`referenced during render. Make sure to declare reactive data ` +
`properties in the data option.`,
target
)
}
//es6 proxy详解
const hasProxy =
typeof Proxy !== 'undefined' &&
Proxy.toString().match(/native code/) if (hasProxy) {
const isBuiltInModifier = makeMap('stop,prevent,self,ctrl,shift,alt,meta')
//避免设置 系统鼠标 属性
config.keyCodes = new Proxy(config.keyCodes, {
set (target, key, value) {
if (isBuiltInModifier(key)) {
warn(`Avoid overwriting built-in modifier in config.keyCodes: .${key}`)
return false
} else {
target[key] = value
return true
}
}
})
} const hasHandler = {
has (target, key) {
const has = key in target
const isAllowed = allowedGlobals(key) || key.charAt(0) === '_'
if (!has && !isAllowed) {
warnNonPresent(target, key)
}
//如果有这个key 或者 不是全局函数, 返回true
return has || !isAllowed
}
} const getHandler = {
get (target, key) {
if (typeof key === 'string' && !(key in target)) {
warnNonPresent(target, key)
}
return target[key]
}
} initProxy = function initProxy (vm) {
if (hasProxy) {
// determine which proxy handler to use
const options = vm.$options
const handlers = options.render && options.render._withStripped
? getHandler
: hasHandler
vm._renderProxy = new Proxy(vm, handlers)
} else {
vm._renderProxy = vm
}
}
} export { initProxy }
此方法做了一些对象操作的拦截 和 警告
vue.js 源代码学习笔记 ----- instance proxy的更多相关文章
- vue.js 源代码学习笔记 ----- instance state
/* @flow */ import Dep from '../observer/dep' import Watcher from '../observer/watcher' import { set ...
- vue.js 源代码学习笔记 ----- instance render
/* @flow */ import { warn, nextTick, toNumber, _toString, looseEqual, emptyObject, handleError, loos ...
- vue.js 源代码学习笔记 ----- instance init
/* @flow */ import config from '../config' import { initProxy } from './proxy' import { initState } ...
- vue.js 源代码学习笔记 ----- instance event
/* @flow */ import { updateListeners } from '../vdom/helpers/index' import { toArray, tip, hyphenate ...
- vue.js 源代码学习笔记 ----- instance index
import { initMixin } from './init' import { stateMixin } from './state' import { renderMixin } from ...
- vue.js 源代码学习笔记 ----- instance inject
/* @flow */ import { hasSymbol } from 'core/util/env' import { warn } from '../util/index' import { ...
- vue.js 源代码学习笔记 ----- html-parse.js
/** * Not type-checking this file because it's mostly vendor code. */ /*! * HTML Parser By John Resi ...
- vue.js 源代码学习笔记 ----- core lifecycle
/* @flow */ import config from '../config' import Watcher from '../observer/watcher' import { mark, ...
- vue.js 源代码学习笔记 ----- 工具方法 option
/* @flow */ import Vue from '../instance/index' import config from '../config' import { warn } from ...
随机推荐
- Linux下mysql允许远程连接怎么设置
1.root用户登录到mysql数据库代码示例:/usr/local/mysql/bin/mysql -u root -p (输入密码进入mysql)2.进入mysql,输入:代码示例:use mys ...
- Python面试题之解读Socketserver & Tcpserver
在解析socketserver是如工作之前,我们先看看socektserver类的继承关系图: 请求类继承关系: server类继承关系: 有了上面的继承关系图后,我们解析socketserver就轻 ...
- Django----Request对象&Response对象
Django 使用Request 对象和Response 对象在系统间传递状态. HttpRequest 对象: Request.body:一个字节字符串,表示原始HTTP 请求的正文.它对于处理非H ...
- 如何用纯 CSS 创作一个跳动的字母 i
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pZbrpJ 可交互视频 ...
- 【前端】CSS3的calc()使用
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...
- Tomcat access log配置(二)
前次讨论了spring boot 中添加Tomcat access log 是轻松愉快,配置文件中添加server.tomcat.accesslog即可,那么如果是外置的Tomcat容器又该如何配置呢 ...
- 素数分布 - nefu 117
素数个数的位数 - nefu 117 普及一个公式: 位数公式:要求一个数x的位数,用公式:lg(x)+1 素数分布:n/ln(n) 所以直接求解n/ln(n)的位数就可以了 代码如下: #inclu ...
- 8条规则图解JavaScript原型链继承原理
原形链是JS难点之一,而且很多书都喜欢用一大堆的文字解释给你听什么什么是原型链,就算有图配上讲解,有的图也是点到为止,很难让人不产生疑惑. 我们先来看一段程序,友情提示sublimeText看更爽: ...
- Asp.net mvc word预览与打印
解决方案: 1. 在后台把word文件转化成pdf,在前台用iframe显示pdf,打印iframe,即可. 优点:用户体验好. 缺点:不支持IE. 实现 : 引用netoffice组件 主要代码: ...
- Vuex最基本样例
通过vue-cli建立基本脚手架(需要安装vuex),需要新建一个store.js文件.基本目录如下 1,store.js文件代码: import Vue from 'vue' import Vuex ...