Vue.js响应式原理,数据双向绑定_使用了vue的响应式数据绑定来创建一个博客文章列表使用到的技术是什么-CSDN博客

本文链接：https://blog.csdn.net/weixin_44811288/article/details/108107524

响应式原理数据驱动数据响应式数据模型仅仅是普通的JavaScript对象,而当我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率双向绑定数据改变,视图改变;视图改变,数据也随之改变我们可以使用v-model在表单元素上创建双向绑定数据数据驱动开发过程中仅需要关注数据本身,不需要关心数据是如何渲染到视图Vue2 数据响应式核心原理:defineProperty介绍浏览器兼容IE8以上<!DOCTYPE html><html

摘要由CSDN通过智能技术生成

响应式原理

数据驱动

数据响应式
- 数据模型仅仅是普通的JavaScript对象,而当我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率
双向绑定
- 数据改变,视图改变;视图改变,数据也随之改变
- 我们可以使用v-model在表单元素上创建双向绑定数据
数据驱动
- 开发过程中仅需要关注数据本身,不需要关心数据是如何渲染到视图

Vue2 数据响应式核心原理:

defineProperty介绍
浏览器兼容IE8以上

<!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>
        <div id="app">
            hello
        </div>
    </body>
    <script>
        // 模拟Vue中的data选项
        let data = {
    
            msg: "hello",
            count: 10,
        };
        // 模拟Vue中的实例
        let vm = {
    };

        // 调用封装响应式函数
        proxyData(data);

        function proxyData(data) {
    
            // 遍历data对象的所有属性
            Object.keys(data).forEach((key) => {
    
                // 数据劫持：当访问或者设置vm中的成员的时候，做一些干预操作
                Object.defineProperty(vm, key, {
    
                    // 可枚举
                    enumerable: true,
                    // 可配置(可以使用delete删除，可以通过defineProperty重新定义)
                    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>
</html>

Vue3 数据响应式原理:

Proxy介绍
直接监听对象,而非属性
ES6中新增,IE不支持,性能由浏览器优化

<!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>
        <div id="app">hello</div>
    </body>
    <script>
        // 模拟Vue中的data选项
        let data = {
    
            msg: "hello",
            count: 22,
        };
        // 模拟Vue实例
        let vm = new Proxy(data, {
    
            // 当访问vm的成员时会执行
            get(target, key) {
    
                console.log("get:", key, target[key]);
                return target[key];
            },
            // 当设置 vm 的成员时会执行
            set(target, key, newValue) {
    
                console.log(console.log("set:", key, newValue));
                if (target[key] === newValue) {
    
                    return;
                }
                target[key] = newValue;
                document.querySelector("#app")<