`Vue`中为什么访问不了以`$`和`_`开头的属性?

时间:2021-09-27 01:48:53

Vue中为什么访问不了以$_开头的属性?

背景:航班管家H5使用了Vue进行新版开发,预订流程逻辑copy参考了野鹅国际机票小程序,小程序中使用__开头的属性作为私有属性。

如题,在data中定义的以_开头的属性就不 work 了。我很想问一句:WTF?

官方解答

以 _ 或 $ 开头的属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置的属性、API 方法冲突。—— data

emm,奈斯!本次分享可以结束了。

`Vue`中为什么访问不了以`$`和`_`开头的属性?

然鹅,你想不想知道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循环不生效。

破菲特!

诶,等等,还有$是怎么回事儿?

???