阅读 4187

面试官最爱问的vue(上)

前言

每当开始一场技术面试的过程中,面试官总会是有意去询问想,会vue吗?可见vue在国内的地位不容小觑,首当其问的就是能说说vue是如何实现数据双向绑定吗?

为了避免尴尬的场景再发生,我们一起好好研究下vue的响应式原理吧!

如果小伙伴早已熟知这两个问题,可以浏览下一朋友正在筹划中的 面试汇总库

闲事少管,走路陈展。开始正题。

1.Object.defineProperty()

引用vue官网的一段话。

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

Object.defineProperty在本次项目中扮演着至关重要的角色。

所以暂时不太熟悉这个方法的小伙伴可以点击 MDN

2.数据劫持

什么是数据劫持?

通过Object.defineProperty来定义所有的属性,这些属性就可以拥有get/set方法。

用vue官网的一个🌰。当我在控制台输入 app.$data我就可以访问到app实例中的data对象。

我们可以看到data对象下的属性message,有属于自己的get/set.

如何实现数据劫持?

现在我们vue实例的data属性都有了set()/get()。但我们在vue中经常还会遇到 比如

this.$data.message = {repoter:{person:'zhx'}}
复制代码

既然我们要达到响应式,那么就算后期改变我们也要为它加上get()/set()

我们只需要在set方法中再一次调用Observe()即可,如下代码所示

数据代理

在vue中我们经常取值都是通过this.message取值而不是this.$data.message,所以这一步我们要做$data的代理
复制代码

本次主要分享了有

  • 1.Object.defineProperty
  • 2.数据劫持
  • 3.数据代理

下一次主要分享 1.编译模板处理 2.发布订阅模式

如果面试官再问起这题,我必定能胸有成竹。

希望本文能够对你有所帮助。祝你工作生活都愉快❤

关注下面的标签,发现更多相似文章
评论