数据驱动

最新推荐文章于 2024-02-03 10:27:58 发布

CrystalAngelLee

最新推荐文章于 2024-02-03 10:27:58 发布

阅读量111

点赞数

分类专栏： CrystalのVue学习

本文链接：https://blog.csdn.net/baidu_33591715/article/details/114275506

版权

CrystalのVue学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

数据响应式

数据：指数据模型
基于Vue开发时数据模型是普通的JavaScript对象
数据响应式的核心是指当我们修改数据时，视图会进行更新，不需要我们进行任何的DOM操作，提高了开发效率

双向绑定

双向绑定指的是数据改变，视图改变；视图改变，数据也随之改变
双向绑定包含了数据响应式
可以使用v-model在表单元素上创建双向数据绑定

数据驱动

开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图

Vue数据响应式原理

Vue2.x

https://cn.vuejs.org/v2/guide/reactivity.html

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter

MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/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,
          // 可配置（可以使用 delete 删除，可以通过 defineProperty 重新定义）
          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>

Vue3.x

https://v3.cn.vuejs.org/guide/reactivity.html
当把一个普通的 JavaScript 对象作为 data 选项传给应用或组件实例的时候，Vue 会使用带有 getter 和 setter 的处理程序遍历其所有 property 并将其转换为 Proxy。这是 ES6 仅有的特性，但是我们在 Vue 3 版本也使用了 Object.defineProperty 来支持 IE 浏览器。两者具有相同的 Surface API，但是 Proxy 版本更精简，同时提升了性能。
Proxy MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Proxy 性能有浏览器进行优化，比Object.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>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>

CrystalAngelLee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据驱动

数据响应式数据：指数据模型基于Vue开发时数据模型是普通的JavaScript对象数据响应式的核心是指当我们修改数据时，视图会进行更新，不需要我们进行任何的DOM操作，提高了开发效率双向绑定双向绑定指的是数据改变，视图改变；视图改变，数据也随之改变双向绑定包含了数据响应式可以使用v-model在表单元素上创建双向数据绑定数据驱动开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图Vue数据响应式原理Vue2.xhttps://cn.vuejs.org/v2/gu
复制链接

扫一扫