vue数据绑定实现原理。以及defineproterty和proxy区别

最新推荐文章于 2024-04-16 11:41:37 发布

置顶

luo1990xing

最新推荐文章于 2024-04-16 11:41:37 发布

阅读量501

点赞数 1

分类专栏： es6 js vue

本文链接：https://blog.csdn.net/luo1990xing/article/details/104174944

版权

我们通过三个问题来分解下上面的问题

1.前端面试经常会问到一个问题，vue的数据绑定是怎么实现的？

答：vue2.x是通过defineProterty劫持对象的属性的get和set方法，当访问属性和获取属性，就可以执行相应的操作。

我们用代码实现下数据劫持：

   let obj  = {};
   Object.defineProperty(obj,'name',{
        get:()=>{
            console.log('get')
        },
        set:()=>{
            console.log('set')
        }
    })
    console.log(obj.name)
    obj.name = 'haveset'

如上代码，当通过obj.name访问name属性会触发get方法，当给name赋值的时候，会触发set方法。

2.上面的代码实现了数据劫持，数据绑定怎么实现呢？

数据驱动视图只需要在set里面更新视图即可，

视图修改数据呢?vue是单向数据流，但是提供了v-model可以实现双向绑定，原理就是在input，textarea onchage的时候，去修改data，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
&

最低0.47元/天解锁文章

luo1990xing

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue数据绑定实现原理。以及defineproterty和proxy区别

我们通过三个问题来分解下上面的问题1.前端面试经常会问到一个问题，vue的数据绑定是怎么实现的？答：vue2.x是通过defineProterty劫持对象的属性的get和set方法，当访问属性和获取属性，就可以执行相应的操作。我们用代码实现下数据劫持： let obj = {}; Object.defineProperty(obj,'name',{ g...
复制链接

扫一扫