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

最新推荐文章于 2024-07-24 14:58:19 发布

只在无意间

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量559

点赞数 1

分类专栏： vue 响应式文章标签： vue.js 前端

本文链接：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")<

最低0.47元/天解锁文章

只在无意间

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue.js响应式原理,数据双向绑定

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

扫一扫

专栏目录