vue双向数据绑定原理

最新推荐文章于 2022-03-07 16:03:03 发布

正儿八经学前端

最新推荐文章于 2022-03-07 16:03:03 发布

阅读量115

点赞数

分类专栏：方法

本文链接：https://blog.csdn.net/weixin_42101753/article/details/117512398

版权

方法专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在这里插入图片描述
view(视图)到model(数据)的变化通过事件监听方法addEventListener()。
model(数据)到view(视图)的变化是通过es5的数据劫持方法Object.defineProperty()。
vue内部设置Object.defineProperty()方法中的get和set操作，属性拦截方式，把data对象中的数据转化get和set，数据变化视图更新。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <p></p>
  <input type="text">

  <script>
  
    // 数据
    const data={
      msg: 'hello'
    }
    const p = document.querySelector('p')
    p.innerText = data.msg
    const input = document.querySelector('input')
    input.value = data.msg

    input.addEventListener('input', function() {
      data.msg = input.value
    })

    // 给对象 某个属性增加修饰
    // 参数1：对象名
    // 参数2：属性名
    // 参数3：增加的修饰
    let temp = data.msg
    Object.defineProperty(data, 'msg', {
      // 数据的劫持
      // 当访问了data的msg属性，get方法就会触发
      // get方法劫持了msg属性的获取操作
      get() {
        console.log('get', '访问msg值了');
        return temp
      },
      // set方法劫持了msg属性的设置操作
      set(value) {
        console.log('set', '修改msg值了');
        temp = value
        p.innerText = value
        input.value = value
      }
    })
    
  </script>
</body>
</html>

在这里插入图片描述

正儿八经学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue双向数据绑定原理

view(视图)到model(数据)的变化通过事件监听方法addEventListener()。model(数据)到view(视图)的变化是通过es5的数据劫持方法Object.defineProperty()。vue内部设置Object.defineProperty()方法中的get和set操作，属性拦截方式，把data对象中的数据转化get和set，数据变化视图更新。代码如下：<!DOCTYPE html><html lang="en"><head> .
复制链接

扫一扫

专栏目录