对于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. 廖雪峰Java11多线程编程-3高级concurrent包-8CompletableFuture

    使用Future可以获得异步执行结果 Future<String> future = executor.submit(task); String result = future.get() ...

  2. Django之深入了解路由层

    目录 ORM表关系建立 一对一 一对多 多对多 Django 请求生命周期 url 路由层 路由匹配 无名分组 有名分组 反向解析 路由匹配条件无分组的情况的反向解析 无名分组情况的反向解析 有名分组 ...

  3. maven相互依赖导致无法编译成功

    起初是新加了个模块,启动前编译时error,提示找不到依赖模块的类,但java文件上是没有报错的. 后经过排查,发现是循环依赖导致的此问题. 如图,弹出框中有循环依赖的模块会显示红色,右键Open M ...

  4. webpack静态资源拷贝插件

    处理不需要使用webpack统一打包处理或webpack不支持的文件 安装 npm install copy-webpack-plugin --save-dev 配置 const copyWebpac ...

  5. Java中的String真的无法修改吗

    Java中String一旦赋值将无法修改,每次对String值的修改都是返回新的String. 如何在不创建新的String对象的情况下,对String的值进行修改呢? String类中的包含一个字段 ...

  6. Windows进程创建的流程分析

    .   创建进程的大体流程:   创建进程的过程就是构建一个环境,这个环境包含了很多的机制 (比如自我保护, 与外界通信等等). 构建这个环境需要两种"人"来协调完成(用户态和内核 ...

  7. Java 使用JDBC连接MySQL

    //  这学期本来不打算深入学习Java的,课上的小项目也就随便写了一个简单计算器和扫雷游戏就糊弄过去.可是我们的Eliza老师偏偏什么都讲了,考虑到期末也会涉及到JDBC的内容,前些天试着学习一番. ...

  8. 02_Hibernate持久化配置

    一.hibernate对象持久化 Web开发的分层: 为了把数据访问细节和业务逻辑分开, 一般把数据访问作为单独的持久化层.DAO是数据访问对象,使用hibernate后,数据访问对象中操作的API将 ...

  9. 编写函数处理user_list,新方法

    写函数,完成以下功能: # 例如有: user_list=[ {"name": "alex","hobby":"抽烟"} ...

  10. python collections 模块 之 deque

    class collections.deque(iterable[,maxlen]): 返回 由可迭代对象初始化的 从左向右的 deque 对象. maxlen: deque 的最大长度,一旦长度超出 ...