面试问题：Vuejs如何实现双向绑定

snowLu 发布于2019-08-23 12:40 / 3071人阅读

摘要：最近出去面试，栽在这个问题上，提到，面试官一般会让你说的特点，一般就要回答以及数据双向绑定然后面试官会追问你，是如何实现数据双向绑定的，前面的问题算基础的话，能答出这个就更上一个台阶，说明你的思考能力不停留在表层，遗憾的是我只能大概说出。

最近出去面试，栽在这个问题上，提到vuejs，面试官一般会让你说vuejs的特点，一般就要回答virtual dom tree, dom tree diff, 以及数据双向绑定,然后面试官会追问你，vuejs是如何实现数据双向绑定的，前面的问题算基础的话，能答出这个就更上一个台阶，说明你的思考能力不停留在表层，遗憾的是我只能大概说出Object.defineProperty。
我回来搜了一下，发现其实vuejs的官网对这个原理是有详尽的阐释的，如果失败了只能怪自己准备不足。这篇文章我就整理一下分享给大家，如果有错误还请指出。

vuejs官网对这个问题的解释是对响应式原理的解释，这里：https://cn.vuejs.org/v2/guide...

问题就是vuejs如何追踪对象的属性变化，答是利用es5的Object.defineProperty,参考：https://developer.mozilla.org...

Object.defineProperty是一个无法被shim的属性，就是说它无法被降级使用，这也是vuejs不支持ie8以下的根本原因。

Object.defineProperty用来设置一个对象的某一个属性，这都不是最关键的，关键是在设置属性的同时，可以设置setter/getter，setter/getter设置两个函数，在这个属性被调用或者设置的时候自动执行，所以在setter的函数里，只要写了更新dom的方法，就可以在这个属性变化的时候执行，实现了属性变化的追踪。

实际上，vuejs的实现更加复杂，遵照这张流程图：

vuejs里每一个组件对应了一个watcher，Object.defineProperty是紫色的圆圈，当组件里某一个属性被get的时候，getter函数会通知Watcher，“说我这有一个属性被渲染了，你记一下”，然后当这个属性的setter被触发（也就是该属性数据被修改的时候），也会通知Watcher，说“我这有这样一个东西被改了，你看看在不在你的名单里。”Watcher此时去检查被改的属性在不在自己记录的名单里，如果在，就通知组件渲染程序，让它再去更新虚拟dom树。

需要注意的几个点：

1.getter/setter对用户是不可见的，是在vue内部实现的。
2.js里无法监听对象属性的增加或者删除，所以vue只能在开始data里添加响应式属性，所以当组件创建完毕，再给这个组件塞一个属性，这个属性是无法响应到dom的。
3.vue会在组件初始化的过程中进行getter/setter转换，所以也无法动态插入新属性，插入了也是非响应数据，但可以通过Vue.set(object, key, value)方法将属性加入到后台可响应的对象中。
4.官网还介绍了更新队列，上文说的Watcher中的更新会被推入到一个更新队列中，那么就是说数据更新后不会马上反映到dom上。
5.但是我们可以通过Vue.nextTick(callback)方法，将这次数据更新马上反映到dom上，这个方法的callback是dom更新完成的回调。

GPU云服务器云服务器 vuejs控件绑定 vuejs数据绑定双向绑定双向数据绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98933.html

前端面试题总结——VUE（持续更新中）

摘要：前端面试题总结持续更新中是哪个组件的属性模块的组件。都提供合理的钩子函数，可以让开发者定制化地去处理需求。前端面试题总结——VUE（持续更新中） 1.active-class是哪个组件的属性？ vue-router模块的router-link组件。 2.嵌套路由怎么定义？在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 //引入两个组件 ...

SimonMa 2019-08-22 16:08 评论0 收藏0
vuejs Q&A

摘要：主要特性模板渲染响应式双向数据绑定组件化开发路由虚拟好处初始视图没有优势，反而中间多了一层虚拟，所以性能没有提高更新视图优势明显减少重复生成与删除操作，减少查询定位元素的操作，能修改操作完成的就绝不使用生成与删除来操作脚手架是什么有什么作 vuejs主要特性？模板渲染响应式双向数据绑定组件化开发路由虚拟DOM好处？初始视图没有优势，反而中间多了一层虚拟DOM，所以性能...

wuaiqiu 2019-08-20 18:12 评论0 收藏0
使用 Proxy 实现简单的 MVVM 模型

摘要：绑定实现的历史绑定的基础是事件。但脏检查机制随之带来的就是性能问题。是谷歌对于简化双向绑定机制的尝试，在中引入。挣扎了一段时间后谷歌团队宣布收回的提议，并在中完全删除了实现。自然全军覆没其他各大浏览器实现的时间也较晚。绑定实现的历史绑定的基础是 propertyChange 事件。如何得知 viewModel 成员值的改变一直是开发 MVVM 框架的首要问题。主流框架的处理有一下三...

BetaRabbit 2019-08-01 17:17 评论0 收藏0
使用 Proxy 实现简单的 MVVM 模型

摘要：绑定实现的历史绑定的基础是事件。但脏检查机制随之带来的就是性能问题。是谷歌对于简化双向绑定机制的尝试，在中引入。挣扎了一段时间后谷歌团队宣布收回的提议，并在中完全删除了实现。自然全军覆没其他各大浏览器实现的时间也较晚。绑定实现的历史绑定的基础是 propertyChange 事件。如何得知 viewModel 成员值的改变一直是开发 MVVM 框架的首要问题。主流框架的处理有一下三...

MarvinZhang 2019-08-20 18:26 评论0 收藏0