全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  应聘面试  >  html5面试题

Vue的双向数据绑定原理是什么

发布时间:2022-09-30 15:21:39
发布人:qyf

Vue的双向数据绑定原理是什么

  在Vue2.x中,双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的,也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变。

  核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法。

  Vue3.x则是用ES6的语法Proxy对象来实现的。Object.defineProperty()的缺点:

  1. 只能监听对象(Object),不能监听数组的变化,无法触发push, pop, shift,

  unshift,splice, sort, reverse。

  2. 必须遍历对象的每个属性

  3. 只能劫持当前对象属性,如果想深度劫持,必须深层遍历嵌套的对象。 Proxy的优点:

  4. Proxy 可以直接监听对象而非属性。

  5. Proxy 可以直接监听数组的变化。

  6. Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的。

  7. Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改。

  8. Proxy 作为新标准将受到浏览器厂商重点持续的性能优化,也就是传说中的新标准的性能红利。 let arr = []; let proxy = new Proxy(arr, { get: function(obj, prop){ return obj[prop]; }, set: function(obj, prop, value){ obj[prop] = value; //可以被监听到变化 return true; } }); setTimeout(()=>{ proxy.push(1); }, 2000)

相关文章

前端公司面试题——jquery移除class

2023-08-07

前端JavaScript面试题——js时间戳转换时间的方法

2023-08-04

前端中JavaScript常见的面试题——js年月日转为时间戳

2023-08-02

前端jquery面试题——jquery字符串包含哪些?

2023-08-01

前端JavaScript面试题——js如何创建函数?

2023-07-31

前端程序员面试题——jquery发送get请求的步骤

2023-07-28
在线咨询 免费试学 教程领取