vue双向绑定原理面试题_面试可以记笔记吗

vue双向绑定原理面试题_面试可以记笔记吗2019年6月6号,为了爱情,我离开工作了一年多的广州来到了杭州这个互联网城市。开始我的前端面试之旅…放下拧螺丝的扳手,开始造起了飞机…面试的第一家,一开始就问Vue双向绑定怎么实现。一脸蒙蔽,之前看过源码,但是没有深入研究,只回答出了使用Object.definePropertyObject.defineProperty(obj,prop,{//…g…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

 2019年6月6号,为了爱情,我离开工作了一年多的广州来到了杭州这个互联网城市。开始我的前端面试之旅…

放下拧螺丝的扳手,开始造起了飞机…

面试的第一家,一开始就问 Vue 双向绑定怎么实现

一脸蒙蔽,之前看过源码,但是没有深入研究,只回答出了使用 Object.defineProperty

Object.defineProperty(obj, prop, { // ... get: function() {} set: function() { // ... } })复制代码

要是再给我一次机会我会这样回答

Vue 双向绑定,使用数据劫持和发布订阅模式实现的

然后我再画一个图来描述整个实现过程是怎样的

vue2.0 采用的是Object.defineProperty进行数据劫持的

主要实现原理是使用描述对象中的set方法进行拦截,并发送订阅器信号

// ...  let dep = new Dep() return Object.defineProperty(obj, prop, { // ... get: function(key) { dep.target = this dep.addSub() // ... } set: function(newVal) { val = newVue; // 发送一个dep信号 dep.notify() // ... } })复制代码

而vue3.0中可能会采用Proxy来实现数据劫持

let target = {}

let p = new Proxy(target, {
    set: function() {
        //...
    },
    get: function() {
        //...
    }
})
复制代码

为啥呢?

我们知道 Object.defineProperty 是有局限性的,他的拦截的 target 就是单纯的对象的key的值

所以呢,对象属性的删减,数组,数组长度的改变,它就没法进行劫持了

而 ES6 的新特性,Proxy,它可以拦截对象,数组几乎一切对象包装类型

但是 Proxy 没法兼容 IE,所以 Vue3.0 底层还是采用 Object.defineProperty

而 使用 Proxy 作为一个 api ,也就是说:

我们不兼容IE, 就大胆用 Proxy 双向绑定而且不会有属性删减和数组劫持不到的问题

我们要兼容IE,就用原来的双向绑定,但是要注意它的不能劫持部分变化的缺陷


从上图我们可以看到,Observer 观察了 object 值的变化,这是一种观察者模式

而 Observer 将观察的信号发布给订阅器这是一种 发布订阅模式

那么观察者模式与发布订阅模式有什么区别呢?

我们先谈观察者模式

什么是观察者模式,首先有一个观察者,一个被观察者,被观察者这里是数据,而观察者是Observer,被观察者发生变化时,主动发生信号给被观察者

按照这个思路来说,我们也能想象尤大,当时设计双向绑定时候,思考怎样去监听这个数据的变化,也就是如何使用观察者模式来实现,而恰好对一个对象的处理中有个对象方法我们可以使用,就是 Object.defineProperty

假如没有这个方法我们怎么实现呢?

这就是 angular 的另外一种实现方式脏检测,也就是不停的轮询数据的变化情况,显然脏检测对性能消耗比较大

再谈谈发布订阅模式

软件架构中,发布订阅是一种消息范式,消息的发送者(称为发布者)不会将消息直接发送给特定的接收者(称为订阅者)。而是将发布的消息分为不同的类别,无需了解哪些订阅者(如果有的话)可能存在。同样的,订阅者可以表达对一个或多个类别的兴趣,只接收感兴趣的消息,无需了解哪些发布者(如果有的话)存在。

这里很明显了,区别就在于,不同于观察者和被观察者,发布者和订阅者是互相不知道对方的存在的,发布者只需要把消息发送到订阅器里面,订阅者只管接受自己需要订阅的内容

由此发布订阅模式是一种松耦合的关系,watcher 和 Observer 之间是互相不受影响

后记

感谢观看,第一次写公开博客文笔不好,惭愧惭愧!

转载于:https://juejin.im/post/5d08abeaf265da1b8e70a1d7

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/180972.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 群辉 Docker-x64-17.05.0-0400.spk,用来群晖洗白,安装ddsm使用

    群辉 Docker-x64-17.05.0-0400.spk,用来群晖洗白,安装ddsm使用链接:https://pan.baidu.com/s/1_J5uQTBmEolNT8T_9P6gLQ提取码:jyq8复制这段内容后打开百度网盘手机App,操作更方便哦

  • docker flask_sqlallochandle on sql_handle

    docker flask_sqlallochandle on sql_handleFlask-SQLAlchemy-config一、配置键SQLALCHEMY_DATABASE_URI#连接数据的数据库SQLALCHEMY_DATABASE_URI=’sqlite:////tmp/test.db’SQLALCHEMY_DATABASE_URI=’mysql://username:password@server/db’#SQLAlchemy把一个引擎的源表示为一个连同设定引擎选项的可选字符串参数的URI。URI的形式是:dialect+driver://userna

  • php getrealpath,PHP SplFileInfo getRealPath()用法及代码示例「建议收藏」

    php getrealpath,PHP SplFileInfo getRealPath()用法及代码示例「建议收藏」SplFileInfo::getRealPath()函数是PHP中的标准PHP库(SPL)的内置函数,用于获取绝对文件路径。用法:intSplFileInfo::getRealPath(void)参数:该函数不接受任何参数。返回值:成功时,此函数返回文件的路径。以下示例程序旨在说明PHP中的SplFileInfo::getRealPath()函数:程序1://PHPProgramto…

  • 用户日志管理「建议收藏」

    用户日志管理「建议收藏」摘要本发明涉及应用系统日志管理技术领域,提供了一种日志管理方法和系统,所述方法包括如下步骤:S1:初始化系统业务功能列表和业务功能方法列表;S2:将业务操作中的具体操作信息与系统日志表和历史数据日志表直接相关联;S4:根据业务操作自动记录日志信息。本发明从整体考虑整个应用系统的日志信息与业务操作挂接,用户在运行时可以根据当前的需要,选择某业务操作是否需要记录日志,并且在业务操作界面能即时将相关的日…

  • Hadoop生态圈的核心组件包括哪些

    Hadoop生态圈的核心组件包括哪些Hadoop生态圈的核心组件包括哪些Hadoop是现在最流行的大数据分布式基础架构,其实现了很多大数据相关的核心功能,并且支持大量的核心项目。那么,今天小编就给大家盘点一下Hadoop生态圈核心组件,感兴趣的小伙伴快来学习下吧!1、Hbase:一个基于列的存储的分布式数据库,其数据模型为Key-Value模式,便于扩展并且查询高效。2、Hive:Hive是Hadoop提供的一个数据仓库,也提供数据库部分功能。其最大的作用还是简化了编写MapReduce程序的过程,只需要利用SQL语句即可完成MapRe

  • nginx location 匹配_nginx的location例子

    nginx location 匹配_nginx的location例子nginx执行请求的工作原理之location匹配详解

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号