Vue2.x的响应式原理

最新推荐文章于 2022-05-19 19:08:42 发布

思绪摸摸头·

最新推荐文章于 2022-05-19 19:08:42 发布

阅读量184

点赞数 1

本文链接：https://blog.csdn.net/qq_44910864/article/details/117650148

版权

Vue2.x的响应式原理

Vue2.x中响应式的实现是通过Object.defineProperty来完成的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="box"></div>
  <script>
    let data = []
    let _name = '李白'
    Object.defineProperty(data, 'name', {
      get() {
        return _name
      },
      set(newValue) {
        _name = newValue
        console.log(newValue);
      }
    })
  </script>
</body>

</html>

在浏览器中查看数据

在这里插入图片描述

将数据显示在页面上

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p></p>
    <p></p>
  </div>
  <script>
    let data = { name: '李白', age: 18 }
    Object.keys(data).forEach(key => {
      defineReactiveProperty(data, key, data[key])
    })
    function defineReactiveProperty(data, key, value) {
      Object.defineProperty(data, key, {
        get() {
          return value
        },
        set(newValue) {
          value = newValue
          document.querySelector('#app p').innerHTML = data.name
        }
      })
    }
    document.querySelector('#app p').innerHTML = data.name
  </script>
</body>

</html>

页面会跟随数据的改变而改变

在这里插入图片描述

声明式操作操作多个视图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p v-text="name"></p>
    <p v-text="age"></p>
  </div>
  <script>
    let data = { name: '李白', age: 18 }
    Object.keys(data).forEach(key => {
      defineReactiveProperty(data, key, data[key])
    })
    function defineReactiveProperty(data, key, value) {
      Object.defineProperty(data, key, {
        get() {
          return value
        },  
        set(newValue) {
          value = newValue
          compile()
        }
      })
    }
    function compile() {
      let app = document.querySelector('#app')
      const nodes = app.childNodes
      nodes.forEach(node => {
        console.log(node);
        // 筛选出了元素节点
        if (node.nodeType === 1) {
          // 获取节点的属性
          const attrs = node.attributes
          Array.from(attrs).forEach(attr => {
            console.log(attr);
            const nodeName = attr.nodeName
            const nodeValue = attr.nodeValue
            if (nodeName === 'v-text') {
              node.innerHTML = data[nodeValue]
            }
          })
        }
      })
    }
    compile()
  </script>
</body>

</html>

页面也会跟随数据的变化而变化

在这里插入图片描述

发布订阅模式

在这里插入图片描述

$on实现事件的注册，而且可以注册多个事件

Observer

Observer的功能

负责把data选项中的属性转换成响应式数据
data中的某个属性也是对象，把该属性转换成响应式数据（例如data中的某个属性为Student对象，也要将Student对象中的属性转换成响应式）
数据变化发送通知

Compiler

负责编译模板，解析指令/差值表达式
负责页面的首次渲染
当数据变化后重新渲染视图

Compiler主要就是对DOM进行操作

对响应式的个理解

通过Object.defineProperty， Vue 在初始化数据时，会传入一个data对象，内部会默认的对data对象进行遍历，使用 Object.defineProperty 重新定义所有属性，当页面取到对应属性时。会进行依赖收集（收集当前组件的watcher）如果属性发生变化会通知相关依赖进行更新操作。

为什么要使用Object.defineProperty

可以使数据的获取和设置增加一个拦截的功能，我们可以在获取和设置的时候增加一些我们自己的逻辑，这个逻辑叫做依赖收集。比如我们取数据的时候可以收集一些依赖，过一会数据变化了可以告诉这些收集的依赖去更新。

思绪摸摸头·

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.x的响应式原理

Vue2.x的响应式原理Vue2.x中响应式的实现是通过Object.defineProperty来完成的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-
复制链接

扫一扫