Vue基础2之MVVM模型和数据代理

VillanelleS

已于 2022-12-23 16:04:14 修改

阅读量375

点赞数 1

分类专栏： Vue基础前端文章标签： vue.js javascript 前端

于 2022-10-12 18:17:28 首次发布

本文链接：https://blog.csdn.net/qq_34306228/article/details/127277703

版权

前端同时被 2 个专栏收录

90 篇文章 3 订阅

订阅专栏

Vue基础

38 篇文章 0 订阅

订阅专栏

Vue基础2

MVVM模型
数据代理

MVVM模型

M：模型（model)：对应data中的数据
V：视图（View)：模板代码
VM：视图模型（ViewModel)：Vue实例对象
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MVVM模型</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    你好，{{name}} <br>
    我的学校是：{{school}} <br>
    VM中的原型方法：{{_c}}
</div>
<script>
    const vm=new Vue({
        el:"#app",
        data:{
            name:"张三",
            school:"幸福中学"
        }
    })
    console.log("vm",vm)

</script>
</body>
</html>

在这里插入图片描述

本质：
在这里插入图片描述
观察发现:
1.data中的所有属性，最后都出现在了vm身上
2.vm身上的所有属性，及Vue原型身上的所有属性，在Vue模板中都可以直接使用

数据代理

Object.defineproperty方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Object.defineproperty方法</title>
</head>
<body>
<script>
    let person={
        name:"张三",
        sex:"男",
    }
    Object.defineProperty(person,'age',{
        value:18
    })

    // age不能枚举
    console.log("枚举",Object.keys(person))
    // age不能修改
    // age不能删除


    console.log(person)

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Object.defineproperty方法</title>
</head>
<body>
<script>
    let person={
        name:"张三",
        sex:"男",
    }
    Object.defineProperty(person,'age',{
        value:18,
        enumerable:true,   //控制属性是否可以枚举，默认值是false
        writable:true,     //控制属性是否可以被修改，默认值是false
        configurable:true   //控制属性是否可以被删除，默认值是false
    })

    console.log(person)

</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Object.defineproperty方法</title>
</head>
<body>
<script>
    let number=18
    let person={
        name:"张三",
        sex:"男",
    }
    Object.defineProperty(person,'age',{
        get:function(){
            console.log("有人读取age属性了")
            return number
        },
        set(value){
            console.log("有人修改age属性了")
            number=value
        }
    })

    console.log(person)

</script>
</body>
</html>

在这里插入图片描述

数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理</title>
</head>
<body>
<script>
    let obj={x:50}
    let obj2={y:20}

    Object.defineProperty(obj2,'x',{
        get(){
            return obj.x
        },
        set(value){
            obj.x=value
        }
    })
</script>
</body>
</html>

在这里插入图片描述

数据代理在Vue中的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理在Vue中的应用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    你好，{{name}} <br>
    欢迎来到{{school.name}}！
</div>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            name:"张三",
            school:{
                name:"幸福中学"
            } 
        }
    })
</script>
</body>
</html>

在这里插入图片描述

数据代理思想：

Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：
更加方便的操作data中的数据
基本原理
通过Object.defineProperty()把data中所有的属性都添加到vm上
为每一个添加到vm上的属性，都指定一个getter/setter
在getter/setter内部去操作（读/写）data中对应的属性