2024年前端最新同学刷抖音的间隙，我学会了Vue数据代理与数据劫持的原理(4)，阿里三面hr面

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

三、数据劫持

1. 定义

2.vue原理

---

一、基础知识

---

我们先看 **Object.defineProperty（）**的用法：

Object.defineProperty（obj，prop，descriptor）

参数介绍：

obj：目标对象

prop：需要定义的属性或者方法的名字

descriptor：prop属性所具有的特性

可供定义的特性列表：

value ：属性的值

writable：若为false，表示属性值不能重写

get：一旦目标属性被访问，则自动调用该方法，并返回该方法的调用结果

set：一旦目标属性被赋值，则自动调用该方法，进行赋值操作

configurable：若为false，则任何尝试删除目标属性，或修改目标属性的

以下特性：writable、configurable、enumerable的行为均无效

enumerable：若为true，则可以在for … in 循环或Object**.**keys()可以枚举出来

二、数据代理

---

1、含义

通过一个对象，代理对另一个对象的操作，即：读、写操作。

2、原理

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({

// 选项options（配置项）

})

// 数据data对象

var data = { a: 1 }

// 该data对象被加入到一个 Vue 实例中

var vm = new Vue({

data: data

})

上面的代码一般写成下面的形式：也就是直接在Vue函数中，传入 data 配置对象

const vm = new MVVM({

el: “#root”,

data: {

a: 1

}

})

数据代理的实质是：

1. 利用 Object.defineProperty() 方法，给new出来的Vue实例 vm ，添加和 data 配置项中一模一样的属性和值。

2. 为每一个添加到 vm 上的属性，都指定一个 getter/setter

3. 在 getter/setter 内部去操作（读/写）data 中对应的属性

我们可以在控制台打印 vm ，如下图

可以看到，每一个属性，都有一对 get/set 或 getter/setter方法，这是实现响应式变化的关键。

数据代理用到的Vue构造函数伪代码如下：

function MVVM(options){

// 将选项对象保存到vm

this.$options = options

// 将data对象保存到 vm和 新定义的data变量中

var data = this._data = this.$options.data

// 将vm保存在me变量

var me = this

// 遍历data中所有属性名

Object.keys(data).forEach(function (key){

// 每次遍历，实现当前属性的代理

me._proxy(key)

})

// 对data进行监视

observe(data,this)

// 创建一个用来编译模板的compile对象,用来解析模板以及模板里的指令

this.$compile = new Compile(options.el || document.body, this)

}

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总