`Vue`中为什么访问不了以`$`和`_`开头的属性?
Vue
中为什么访问不了以$
和_
开头的属性?
背景:航班管家H5使用了Vue
进行新版开发,预订流程逻辑copy参考了野鹅国际机票小程序,小程序中使用__
开头的属性作为私有属性。
如题,在data
中定义的以_
开头的属性就不 work 了。我很想问一句:WTF?
官方解答
以 _ 或 $ 开头的属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置的属性、API 方法冲突。—— data
emm,奈斯!本次分享可以结束了。
然鹅,你想不想知道Vue
内部是如何屏蔽掉此类属性的呢?往下看↓
在继续之前,我们有必要先了解下Proxy
是个什么东西。
Proxy
Proxy
译为'代理器',在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截。
举个栗子:假设你要和韩梅梅相亲,但妹子岂是你想见就见的?就需要一个中间人——媒婆作为韩梅梅的代理人和你通信。这里的媒婆所谓的代理器了。
虽然这个概念早已有之,但直到ES6
才出现在javascript
中。Proxy
提供了一种机制,可以对外界的访问进行过滤和改写:
var proxy = new Proxy({}, {
get: function(target, property) {
return 35;
}
});
proxy.time // 35
proxy.name // 35
阮老师的ECMAScript 6 入门——proxy讲的很详细。
Vue 实现
当执行new Vue()
时,函数内部会执行_init()
方法,其中有这一段:
// src/core/instance/init.js
Vue.prototype._init = function (options?: Object) {
...
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
...
}
initProxy
来自src/core/instance/proxy.js
initProxy = function initProxy (vm) {
vm._renderProxy = new Proxy(vm, {
has (target, key) {
const has = key in target
const isAllowed = key.charAt(0) === '_'
return has || !isAllowed
}
})
}
proxy.js
中,has
方法用于拦截hasProperty
操作,用来判断对象是否有某个属性或方法。
结论
当在Vue
中访问对象的属性时,initProxy
函数会将那些以_
开头的属性给过滤掉。
另,has
拦截的是hasProperty
操作,而不是hasOwnProperty
。
再另,虽然for...in
循环也用到了in
运算符,但是has
拦截对for...in
循环不生效。
破菲特!
诶,等等,还有$
是怎么回事儿?
???
`Vue`中为什么访问不了以`$`和`_`开头的属性?的更多相关文章
- vue中axios访问Java后端跨域问题解决
问题背景: 前后端分离,前端选用Vue,后端选用Java,vue编译出的静态页面采用ngix发布,在前端访问后端时出现跨域问题. 解决方法: 跨域的问题解决方法有好多种,这里是通过服务端解决,以下是代 ...
- Vue中axios访问 后端跨域问题
public class AllowOriginFilter implements Filter { @SuppressWarnings("unused") public void ...
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中,class、内联style绑定、computed属性
1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)" ...
- Vue中,父组件向子组件传值
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
- Vue中的计算属性和监听器(computed 与 watch)
react中数据是单向绑定的,而vue中数据是双向绑定的.为什么? 在react中,主要是通过setState 去改变state的值:而在vue中,会自动的触发set 与get 改变属性的值. 在vu ...
- Vue 中的 ref $refs
ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例 注意:只要想 ...
- vue中比较完美请求的栗子(使用 axios 访问 API)
vue中比较完美请求的栗子(使用 axios 访问 API) 官网地址:https://vuejs.bootcss.com/v2/cookbook/using-axios-to-consume-api ...
- Vue中使用matomo进行访问流量统计的实现
Vue中使用matomo进行访问流量统计 原文链接 前言 之前做到了一个页面及接口访问流量统计的需求, 然后在网上找了很多帖子,发现有些有的但是写的都不是很详细,所以今天就整理了一下 正文 第一步 首 ...
随机推荐
- JVM 系列 ClassLoader
JVM 系列()ClassLoader 在前面一节中,主要介绍了 Class 的装载过程,Class 的装载大体上可以分为加载类.连接类和初始化 3 个阶段.本小节将主要介绍绍 Java 语言中的 C ...
- spring mvc , spring data jpa 知识点
<mvc:view-controller path="/login" view-name="login.jsp"/> <!-- 会直接跳到/W ...
- cocos2d接安卓facebook插件(已测cocos-x 3.7 3.8版本)
1 控制台创建新工程: a 控制台 进入cocos2d文件夹下面,如cocos2d-x-3.7.1,执行setup.py,未设置NDK SDK ANT 路径的设置路径,需要改路径的 explore ...
- Android framework层实现实现wifi无缝切换AP
http://www.linuxidc.com/Linux/2013-12/93476.htm Android市场上有一款叫Wifijumper的软件,实现相同ssid的多个AP之间根据wifi信号的 ...
- KBMMW 4.81.00 发布
这次更新的速度非常快. 4.81.00 May 9 2015 Important notes (changes that may break existing code) ============== ...
- 2018.09.14 codechef Milestone(随机化算法)
传送门 由于存在不超过7条直线可以覆盖超过所有的点. 所以如果我们随机选点的话(每次随机两个) 那么得到的解恰好为最优解的概率是149" role="presentation&qu ...
- noexcept(c++11)
1.概念 1)c++中的异常处理是在运行时而不是编译时检测的,为了实现运行时检测,编译器可能会创建额外的异常处理代码,然而这会妨碍程序优化 2)noexcept说明符:若修饰函数(紧跟在参数列表后面) ...
- UVa 11464 Even Parity (二进制法枚举)
题意:给你一个n*n的01矩阵,让你把最少的0变成1,使得每个元素的上,下,左,右的元素(如果有的话)之和均为偶数. 析:最好想的的办法就是暴力,就是枚举每个数字是变还是不变,但是...时间复杂度也太 ...
- nginx 配置图片服务器 (window版本)
配置nginx二级域名 ①找到配置文件 例如:%nginx_home%/conf/nginx.conf ②配置 #user nobody; worker_processes 1; #error_log ...
- day3之函数的初始及进阶
函数初始 函数的定义与调用 ''' def 函数名 (参数): 函数体 函数名:设定与变量相同 执行函数: 函数名() ''' 函数的返回值 # 函数返回值 return ''' 1.遇到return ...