Vue中的数据驱动、数据响应式核心原理、Vue 2.x响应式原理

最新推荐文章于 2022-10-14 11:57:44 发布

@皮皮榴

最新推荐文章于 2022-10-14 11:57:44 发布

阅读量436

点赞数

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_39357822/article/details/119425663

版权

Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

数据驱动

数据响应式、双向绑定、数据驱动
数据响应式
- 数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率
双向绑定
- 数据改变，视图改变；视图改变，数据也随之改变
- 我们可以使用v-model 在表单元素上创建双向数据绑定
  所以双向绑定针对的是和用户有交互的表单元素
数据驱动是Vue 最独特的特性之一
- 开发过程中仅需关注数据本身（业务本身），不需要关心数据是如何渲染到视图

总结

数据驱动就是一种开发过程，在这个开发过程中，程序员不需要关注如何把数据渲染到DOM上，因为现在主流的MVVM框架内部已经帮我们实现了数据响应式以及双向绑定。

数据响应式核心原理

官方解释

Object.defineProperty是ES5中一个无法shim的特性

shin特性意思是无法降级处理的
重点：浏览器兼容IE8以上（不兼容IE8及以下）

数据响应式核心原理

当给data中msg属性重新赋值的时候，把新的值渲染到div中来，整个DOM操作不希望在外部赋值的时候去做，所以这里做了一个数据劫持

数据劫持如何去实现

通过definProperty实现数据劫持

Object.definProperty方法参数
- 第1个参数：vm是Vue实例对象
- 第2个参数：给vm对象增加的一个属性
- 第3个参数：属性描述符，可以给msg属性设置get、set方法等
  当访问msg的时候会执行get方法，当给msg重新赋值的时候回执行set方法

Vue 2.x中响应式原理

<!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>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 的 getter/setter
                // 数据劫持：当访问或者设置 vm 中的成员的时候，做一些干预操作
                Object.defineProperty(vm, key, {
                    // 描述 key 属性是否 可枚举（可遍历）
                    enumerable: true,
                    // 描述 key 属性是否 可配置（可以使用 delete 删除，可以通过 defineroperty 重新定义）
                    configurable: true,
                    // 当获取值的时候执行
                    get() {
                        console.log('get: ', data[key])
                        return data[key]
                    },
                    // 当设置值的时候执行
                    set(newValue) {
                        console.log('set: ', 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>