Vue封神之路(4.) Vue的数据代理初步认识

最新推荐文章于 2024-08-16 23:32:06 发布

还是那个同伟伟

最新推荐文章于 2024-08-16 23:32:06 发布

阅读量128

点赞数

分类专栏： Vue封神之路文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wei18791957243/article/details/126915840

版权

Vue封神之路专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了Vue中数据代理的概念，重点讲解了Vue实例化对象（vm）如何通过Object.defineProperty将data中的属性代理到vm自身，使得在模板中可以直接访问并带有getter和setter的功能。此外，还提供了一个简单的数据代理示例。

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

1. Vue的vm(实例化的对象)

2. Object.defineProperty

1. Vue的vm(实例化的对象)

下方的代码中，

msg是属于this的，this代表的其实是vm，而vm就是实例化的对象
vue模板当中的数据全部都是vm的，所有的方法也是vm的
数据一上来要经过数据代理，把date当中的msg，代理到vm身上，vm身上也就有一个同名属性msg，但是并没有真正的值而是多了getter和setter

<!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>Document</title>
</head>

<body>
    <div id="app">

    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
                el: "#app",
                data() {
                    return {
                        msg: '这是msg'
                    }
                }
            })
            //
    </script>
</body>

</html>

2. Object.defineProperty

<!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>Document</title>
</head>

<body>
    <script>
        // Object.defineProperty是一个方法（函数）
        // 函数三要素：功能 参数 返回值
        // 功能： 给对象添加或者修改属性，让这个属性是响应式的（这个属性改变引起其他的改变）
        let obj = {
            firstName: 'hello',
            lastName: 'world'
        };
        // 下面的这种写法就写死了，不是响应式的属性
        // obj.fullName = 'hello-world'
        // console.log(obj)
        // obj.fullName = 'vue'
        // console.log(obj)
        Object.defineProperty(obj, 'fullName', {
            get() {
                return this.firstName + '-' + this.lastName;
            },
            set(val) {
                let arr = val.split('-');
                this.firstName = arr[0];
                this.lastName = arr[1];
            }
        });
        console.log(obj.fullName);
        obj.fullName = 'vue-good';
        console.log(obj);
    </script>
</body>

</html>

数据代理的另外的例子，

### 打印vm.msg的值，这个值其实是data的，这就是简单的数据代理。

<!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>Document</title>
</head>

<body>
    <script>
        // Object.defineProperty是一个方法（函数）
        // 函数三要素：功能 参数 返回值
        // 功能： 给对象添加或者修改属性，让这个属性是响应式的（这个属性改变引起其他的改变）
        let obj = {
            firstName: 'hello',
            lastName: 'world'
        };
        // 下面的这种写法就写死了，不是响应式的属性
        // obj.fullName = 'hello-world'
        // console.log(obj)
        // obj.fullName = 'vue'
        // console.log(obj)
        Object.defineProperty(obj, 'fullName', {
            get() {
                return this.firstName + '-' + this.lastName;
            },
            set(val) {
                let arr = val.split('-');
                this.firstName = arr[0];
                this.lastName = arr[1];
            }
        });
        console.log(obj.fullName);
        obj.fullName = 'vue-good';
        console.log(obj);

        // 数据代理
        let data = {
            msg: '这是msg'
        };
        let vm = {};
        Object.defineProperty(vm, 'msg', {
            get() {
                return data.msg;
            },
            set() {
                data.msg = val;
            }
        });
        console.log(vm);
        console.log(vm.msg);
    </script>
</body>

</html>

还是那个同伟伟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue封神之路(4.) Vue的数据代理初步认识

1. Vue的vm(实例化的对象)下方的代码中，msg是属于this的，this代表的其实是vm，而vm就是实例化的对象vue模板当中的数据全部都是vm的，所有的方法也是vm的数据一上来要经过数据代理，把date当中的msg，代理到vm身上，vm身上也就有一个同名属性msg，但是并没有真正的值而是多了getter和setter
复制链接

扫一扫