vue数据绑定的实现原理，2024年最新web前端基础面试题

最新推荐文章于 2024-10-08 12:21:22 发布

2401_84140112

最新推荐文章于 2024-10-08 12:21:22 发布

阅读量633

点赞数

分类专栏： 2024年程序员学习文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/2401_84140112/article/details/137619888

版权

82 篇文章 2 订阅

订阅专栏

这个题目本身不是特别难，只能说是作为社招的基础面试题，但是如果想回答好这道题也不是很容易。

不信接着往下看

vue.js是一个非常优秀的前端开发框架，使用vue的版本是v2.x

vue几个核心的地方：vue实例化，虚拟DOM，模板编译过程，数据绑定。

我们开始回到正题，vue.js的作者尤雨溪最初就是尝试实现一个类似angular1的东西，发现里面对于数据处理非常不优雅，于是创造性的尝试利用ES5中的Object.defineProperty来实现数据绑定，于是就有了最初的vue。

vue的数据绑定的实现原理离不开vue中响应式的数据处理方式。

我们可以回想一下官网的图：

vue的响应式基本原理：

概括回答我们只回答了使用ES5的方法 Object.defineProperty 实现数据的监听的，那么具体是如何实现还是没有讲的很清楚。

这时候我们需要问自己，如何找亮点？

vue的响应式原理设计三个重要对象：Observer，Watcher，Dep。

当属性变化会执行主题对象Observer的dep.notify方法，这个方法会遍历订阅者Watcher列表向其发送消息， Watcher会执行run方法去更新视图。

依赖关系图如下，更能方面我们的理解

接着我们需要补充的是：模板编译过程中的指令和数据绑定都会生成Watcher实例，实例中的watch属性也会生成Watcher实例。

说的这些有没有觉得有点乱，那我们总结一下如何亮点回答

1、在生命周期的initState方法中将data，prop，method，computed，watch中的数据劫持，通过observe方法与Object.defineProperty方法将相关对象转为换Observer对象。
2、然后在initRender方法中解析模板，通过Watcher对象，Dep对象与观察者模式将模板中的指令与对象的数据建立依赖关系，使用全局对象Dep.target实现依赖收集。
3、当数据变化时，setter被调用，触发Object.defineProperty方法中的dep.notify方法，遍历该数据依赖列表，执行器update方法通知Watcher进行视图更新。
vue是无法检测到对象属性的添加和删除，但是可以使用全局Vue.set方法（或vm.$set实例方法）。
vue无法检测利用索引设置数组，但是可以使用全局Vue.set方法（或vm.$set实例方法）。
无法检测直接修改数组长度，但是可以使用splice

然后写一个使用Object.defineProperty实现监听变量

var obj = {};

var a;

Object.defineProperty(obj, ‘a’, {

get: function() {

console.log(‘get val’);

return a;

set: function(newVal) {

console.log(‘set val:’ + newVal);

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。