Vue.js响应式原理,数据双向绑定

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

响应式原理

数据驱动

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

Vue2 数据响应式核心原理:

<!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")<
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值