对于Vue的双向绑定,现在基本是个前端都听说过,面试官也喜欢问这个问题。但对于Vue双向绑定的原理,掘金、博客园和segmentfault等技术社区充斥着大量的错误文章。这些文章的题目基本样子如下 “面试题:如何实现Vue的双向绑定”或“Vue源码解读:Vue双向绑定原理”,文章里写的Vue 2.0双向绑定原理都是Object.defineproperty通过get和set来劫持实现。这种文章这不仅仅给前端开发者造成了误导,就连很多面试官也是这么认为的。

  为了遏制这种错误知识的传播,Vue作者尤雨溪亲自在Vue文档进行了说明,解释什么是Vue的双向绑定:你可以用 v-model 指令在表单 <input><textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

  这里大家就了解了,Vue的双向绑定是指表单元素的v-model指令,而v-model只是个语法糖而已。MVVM架构模式在View层更改的时候会触发Model层更改,若Vue仅仅用Object.defineproperty自身是没有办法对{{}}里的数据进行View层的改变的。那广为流传的Object.defineproperty是做什么的呢?Object.defineproperty是Vue3.0之前版本的核心,Vue通过它的set和get进行数据劫持从而实现数据的响应式更新。而我们要对View层的改变,需要的就是v-model这些输入框等表单元素进行View层更改。希望今后能少一些对于双向绑定原理错误理解的文章了。

关于网上大量对Vue双向绑定的错误理解的更多相关文章

  1. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  2. IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题

    先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...

  3. Vue双向绑定原理,教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

  4. 梳理vue双向绑定的实现原理

    Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后 ...

  5. vue双向绑定原理分析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...

  6. vue双向绑定原理及实现

    vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...

  7. vue双向绑定原理源码解析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...

  8. Vue双向绑定实现原理demo

    一.index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  9. Vue双向绑定原理(源码解析)---getter setter

       Vue双向绑定原理      大部分都知道Vue是采用的是对象的get 和set方法来实现数据的双向绑定的过程,本章将讨论他是怎么利用他实现的. vue双向绑定其实是采用的观察者模式,get和s ...

随机推荐

  1. C++右值引用与转移语义

    std::forwad? C++11 中定义的 T&& 的推导规则为: 右值实参为右值引用,左值实参仍然为左值引用. 参考: 右值引用与转移语义

  2. Ignite-Spark

    2017.12.02 Ignite-Spark 讲ppt的时候还是很紧张 PPT地址 https://files.cnblogs.com/files/swobble/Spark.pptx

  3. 如何在屏幕上查看命令的输出以及在Linux中写入文件

    在Linux中输出命令可以做很多事情(http://www.nanke0834.com) 您可以将命令的输出分配给变量,将其发送到另一个命令/程序以通过管道进行处理或将其重定向到文件以进行进一步分析. ...

  4. Dubbo Ecosystem - 从微服务框架到微服务生态

    从微服务框架到微服务生态,这是微服务发展的必然趋势,也是Dubbo社区满足开发者更高效的构建微服务体系期望的使命和担当. 近期,Apache Dubbo PPMC 望陶(社区昵称:ralf0131)做 ...

  5. ssoj 2279 磁力阵

    说不想改最后还是向T1屈服了..然后就de了一下午Bug... 虽然昨天随口扯的有点道理,正解就是迭代加深A星搜索,但实际写起来就十分难受了. 说自己的做法,略鬼畜. 每个正方形的边界上的边.每条边在 ...

  6. System.Web.Mvc.HttpUnauthorizedResult.cs

    ylbtech-System.Web.Mvc.HttpUnauthorizedResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neut ...

  7. Android基础控件ListView和自定义BaseAdapter适配器

    1.简介 ListView用于列表显示,相当于OC中的TableView,和适配器一块使用,相关属性: footerDividersEnabled:是否在footerView(表尾)前绘制一个分隔条, ...

  8. PAT甲级——A1004 Counting Leaves

    A family hierarchy is usually presented by a pedigree tree. Your job is to count those family member ...

  9. 第一周——clone项目到本地

    公司使用的是git进行version control,代码托管在gitlab. 按照公司规范注册了gitlab账号, 漫长的等待clone到本地~ 然而,还是有问题,jar包下载不完全(公司网速dow ...

  10. C#计算两个时间的时间差,精确到年月日时分秒

    喏,计算两个时间的时间差,精确到年月日时分秒 看起来比较笨的方法了,不知道有没有改进 DateTime d1 = new DateTime(2016, 4, 1, 0, 0, 0); DateTime ...