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`中为什么访问不了以`$`和`_`开头的属性?的更多相关文章

  1. vue中axios访问Java后端跨域问题解决

    问题背景: 前后端分离,前端选用Vue,后端选用Java,vue编译出的静态页面采用ngix发布,在前端访问后端时出现跨域问题. 解决方法: 跨域的问题解决方法有好多种,这里是通过服务端解决,以下是代 ...

  2. Vue中axios访问 后端跨域问题

    public class AllowOriginFilter implements Filter { @SuppressWarnings("unused") public void ...

  3. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue中,class、内联style绑定、computed属性

    1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)" ...

  5. Vue中,父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  6. Vue中的计算属性和监听器(computed 与 watch)

    react中数据是单向绑定的,而vue中数据是双向绑定的.为什么? 在react中,主要是通过setState 去改变state的值:而在vue中,会自动的触发set 与get 改变属性的值. 在vu ...

  7. Vue 中的 ref $refs

    ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例 注意:只要想 ...

  8. vue中比较完美请求的栗子(使用 axios 访问 API)

    vue中比较完美请求的栗子(使用 axios 访问 API) 官网地址:https://vuejs.bootcss.com/v2/cookbook/using-axios-to-consume-api ...

  9. Vue中使用matomo进行访问流量统计的实现

    Vue中使用matomo进行访问流量统计 原文链接 前言 之前做到了一个页面及接口访问流量统计的需求, 然后在网上找了很多帖子,发现有些有的但是写的都不是很详细,所以今天就整理了一下 正文 第一步 首 ...

随机推荐

  1. JVM 系列 ClassLoader

    JVM 系列()ClassLoader 在前面一节中,主要介绍了 Class 的装载过程,Class 的装载大体上可以分为加载类.连接类和初始化 3 个阶段.本小节将主要介绍绍 Java 语言中的 C ...

  2. spring mvc , spring data jpa 知识点

    <mvc:view-controller path="/login" view-name="login.jsp"/> <!-- 会直接跳到/W ...

  3. cocos2d接安卓facebook插件(已测cocos-x 3.7 3.8版本)

    1  控制台创建新工程: a 控制台 进入cocos2d文件夹下面,如cocos2d-x-3.7.1,执行setup.py,未设置NDK SDK ANT 路径的设置路径,需要改路径的 explore ...

  4. Android framework层实现实现wifi无缝切换AP

    http://www.linuxidc.com/Linux/2013-12/93476.htm Android市场上有一款叫Wifijumper的软件,实现相同ssid的多个AP之间根据wifi信号的 ...

  5. KBMMW 4.81.00 发布

    这次更新的速度非常快. 4.81.00 May 9 2015 Important notes (changes that may break existing code) ============== ...

  6. 2018.09.14 codechef Milestone(随机化算法)

    传送门 由于存在不超过7条直线可以覆盖超过所有的点. 所以如果我们随机选点的话(每次随机两个) 那么得到的解恰好为最优解的概率是149" role="presentation&qu ...

  7. noexcept(c++11)

    1.概念 1)c++中的异常处理是在运行时而不是编译时检测的,为了实现运行时检测,编译器可能会创建额外的异常处理代码,然而这会妨碍程序优化 2)noexcept说明符:若修饰函数(紧跟在参数列表后面) ...

  8. UVa 11464 Even Parity (二进制法枚举)

    题意:给你一个n*n的01矩阵,让你把最少的0变成1,使得每个元素的上,下,左,右的元素(如果有的话)之和均为偶数. 析:最好想的的办法就是暴力,就是枚举每个数字是变还是不变,但是...时间复杂度也太 ...

  9. nginx 配置图片服务器 (window版本)

    配置nginx二级域名 ①找到配置文件 例如:%nginx_home%/conf/nginx.conf ②配置 #user nobody; worker_processes 1; #error_log ...

  10. day3之函数的初始及进阶

    函数初始 函数的定义与调用 ''' def 函数名 (参数): 函数体 函数名:设定与变量相同 执行函数: 函数名() ''' 函数的返回值 # 函数返回值 return ''' 1.遇到return ...