Vue 响应式原理【1】

最新推荐文章于 2022-05-12 18:26:56 发布

Daisy__yangyang

最新推荐文章于 2022-05-12 18:26:56 发布

阅读量115

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_37883657/article/details/111475533

版权

vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

数据驱动

数据响应式、双向绑定、数据驱动

数据响应式

数据模型基金是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM操作，提高开发效率。
双向绑定

数据改变，视图改变；视图改变，数据也随之改变

我们可以使用 v-model 在表单元素上创建双向数据绑定
数据驱动是 Vue 独特的特性之一

开发过程中仅需要关注数据本身，不需要关心数据是如何轩然大波视图

数据响应式核心原理-Vue2

Vue 2.x

vue 2.x深入响应式原理
MDN-Object .defineProperty
浏览器兼容 IE8 以上（不兼容 IE8）

defineProperty用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>defineProperty 多个成员</title>
</head>
<body>
  <div id="app">
    hello
  </div>
  <script>
    // 模拟 Vue 中的 data 选项
    let data = {
      msg: 'hello',
      count: 10
    }

    // 模拟 Vue 的实例
    let vm = {}

    proxyData(data)

    function proxyData(data) {
      // 遍历 data 对象的所有属性
      Object.keys(data).forEach(key => {
        // 把 data 中的属性，转换成 vm 的 setter/setter
        Object.defineProperty(vm, key, {
          enumerable: true,
          configurable: true,
          get () {
            console.log('get: ', key, data[key])
            return data[key]
          },
          set (newValue) {
            console.log('set: ', key, newValue)
            if (newValue === data[key]) {
              return
            }
            data[key] = newValue
            // 数据更改，更新 DOM 的值
            document.querySelector('#app').textContent = data[key]
          }
        })
      })
    }

    // 测试
    vm.msg = 'Hello World'
    console.log(vm.msg)
  </script>
</body>
</html>

Vue 3.0 基于new proxy代理实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Proxy</title>
</head>
<body>
  <div id="app">
    hello
  </div>
  <script>
    // 模拟 Vue 中的 data 选项
    let data = {
      msg: 'hello',
      count: 0
    }

    // 模拟 Vue 实例
    let vm = new Proxy(data, {
      // 执行代理行为的函数
      // 当访问 vm 的成员会执行
      get (target, key) {
        console.log('get, key: ', key, target[key])
        return target[key]
      },
      // 当设置 vm 的成员会执行
      set (target, key, newValue) {
        console.log('set, key: ', key, newValue)
        if (target[key] === newValue) {
          return
        }
        target[key] = newValue
        document.querySelector('#app').textContent = target[key]
      }
    })

    // 测试
    vm.msg = 'Hello World'
    console.log(vm.msg)
  </script>
</body>
</html>

发布/订阅模式

订阅者
发布者
信号中心

我们假定，存在一个“”信号中心“，某个任务执行完成，就向信号中心发布一个”信号，其他任务可以向信号中心“订阅”这个信号，从而知道什么时候自己可以开始执行，这就叫做“发布/订阅模式”

    // 事件触发器
    class EventEmitter {
      constructor () {
        // { 'click': [fn1, fn2], 'change': [fn] }
        this.subs = Object.create(null)
      }

      // 注册事件
      $on (eventType, handler) {
        this.subs[eventType] = this.subs[eventType] || []
        this.subs[eventType].push(handler)
      }

      // 触发事件
      $emit (eventType) {
        if (this.subs[eventType]) {
          this.subs[eventType].forEach(handler => {
            handler()
          })
        }
      }
    }

    // 测试
    let em = new EventEmitter()
    em.$on('click', () => {
      console.log('click1')
    })
    em.$on('click', () => {
      console.log('click2')
    })

    em.$emit('click')

观察者模式

观察者（订阅者） -Watch
- update()：当事件发生时，具体要做的事
目标者（发布者） -Dep
- subs 数组：存储所有的观察者
- addSub()：添加观察者
- notify()：当事件发生，调用所有观察者的 update() 方法
没有事件中心

 //发布者-目标
    class Dep {
      constructor () {
        // 记录是哟有的订阅者
        this.subs = []
      }

      addSub (sub) {
        if (sub && sub.update) {
          this.subs.push(sub)
        }
      }
      // 发布通知
      notify () {
        this.subs.forEach(sub => {
          sub.update()
        })
      }
    }

    //订阅者-观察者
    class Watcher {
      update () {
        console.log('update')
      }
    }

    //测试
    let dep = new Dep()
    let watcher = new Watcher()

    dep.addSub(watcher)

    dep.notify()

Daisy__yangyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 响应式原理【1】

数据驱动数据响应式、双向绑定、数据驱动数据响应式数据模型基金是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM操作，提高开发效率。双向绑定数据改变，视图改变；视图改变，数据也随之改变我们可以使用 v-model 在表单元素上创建双向数据绑定数据驱动是 Vue 独特的特性之一开发过程中仅需要关注数据本身，不需要关心数据是如何轩然大波视图数据响应式核心原理-Vue2Vue 2.xvue 2.x深入响...
复制链接

扫一扫