Vue——认识day02

此处接上一篇文章Vue------初识Vue开始，欢迎大家。

1.MVVM模型

2.Object.defineproperty方法

3.数据代理简介

4.Vue中的数据代理

总结

1.MVVM模型

MVVM模型是一种软件架构模式，用于将用户界面（View），业务逻辑（Model）和视图模型（ViewModel）之间的关系解耦。MVVM的目标是实现用户界面的可复用性和可维护性。

在MVVM模型中，用户界面（View）负责显示数据和接收用户操作。它通过数据绑定与视图模型（ViewModel）进行交互，以获取和更新数据。视图模型（ViewModel）是用户界面（View）的抽象，它包含了与用户界面相关的业务逻辑和数据。视图模型通过数据绑定从模型（Model）中获取数据，并将数据在用户界面上进行展示。

模型（Model）是业务数据和业务逻辑的抽象。它负责数据的获取和存储，并包含了与数据相关的操作和验证逻辑。模型可以与外部数据源（例如数据库或网络）进行交互。

MVVM模型的核心概念是数据绑定，它将数据和用户界面之间的关系自动化。数据绑定允许视图模型将数据绑定到视图上，并且在数据发生变化时自动更新视图。这种自动更新减少了开发人员的工作量，并提高了用户界面的可维护性。

总结来说，data中的所有属性，最后都会交给vm。vm中的所有属性（包括vue自带的）在vue模版（view）中都可以直接使用。

2.Object.defineproperty方法

具体讲解都放置于代码注释之中了。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>介绍Object.defineproperty方法</title>

</head>
<body>
    <script type="text/javascript">

        let number = 20

        let person = {
            name:'WJJ',
            // 这样写就可以遍历
            // age:20,
            sex:'女'
        }
// 参数解析：第一个参数是 要定义属性的对象。
//          第二个参数是 要定义或修改的属性的名称
//          第三个属性是一个对象，里面写一些（配置）属性
        // 1.使用这中方法添加的属性不参与枚举
        // 2.使用这种方法添加的属性在页面无法修改
        // 3.使用这种方法添加的属性在页面无法被删除
        Object.defineProperty(person,'age',{
            // //value:18,
            // value:number,
            // // 开启这个为true，就可以让这个添加的属性加入枚举
            // enumerable:true,
            // // 开启这个为true，就可以让这个添加的属性在页面可修改
            // writable:true,
            // // 开启这个为true，就可以让这个添加的属性在页面可删除
            // configurable:true,

            // 当有人读取person中的age的数据时
            // get函数(getter)就会被调用，且返回值就是age的值
            get(){
                return number
            },

            // 当有人修改person中的age的数据时
            // set函数(setter)就会被调用，且会收到修改后的值
            set(value){
                number = value
                console.log('修改成功:',value)

            }
        })
        console.log(person)
        // 这里就可以发现并没有找到age这个属性
        console.log(Object.keys(person))
        for(let key in person){
            console.log('值的数据为:',person[key])
        }

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

3.数据代理简介

数据代理：通过一个对象代理对另一个对象中属性的操作（读、写）

如下示例代码所示：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>什么是数据代理</title>
</head>
<body>
    <script type="text/javascript">
    // 数据代理：通过一个对象代理对
    // 另一个对象中属性的操作（读、写）
    let obj = {a:100}
    let objP = {b:200}

    Object.defineProperty(objP,'a',{
        get(){
            return obj.a
        },
        set(value){
            obj.a = value
        }
    })
    </script>

</body>
</html>

4.Vue中的数据代理

在Vue中，数据代理是指将data对象中的所有属性代理到Vue实例上，使得我们可以通过实例访问到data对象中的属性。

Vue实例的data选项中定义的属性会被Vue代理到实例上，这样我们可以直接通过实例访问这些属性，而不需要通过data对象来访问。这样做的好处是可以简化代码，提高代码的可读性和可维护性。

通过数据代理，我们可以在Vue实例中直接访问data中的属性，而无需使用this.data来访问。例如，如果在data中定义了一个属性name，我们可以直接通过this.name来访问该属性。

当我们在Vue实例中访问data中的属性时，Vue会自动进行数据劫持，即在访问属性时会触发get拦截器，从而实现属性的响应式。

需要注意的是，Vue只会对data中已经存在的属性进行代理，而不会代理动态添加的属性。如果需要代理动态添加的属性，可以使用Vue.set或this.$set方法。

下面是一个简单的示例：

javascript 复制代码

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

console.log(vm.message); // 输出：Hello Vue!

在上述示例中，我们将data对象中的属性message代理到了Vue实例vm上，可以直接通过vm.message访问该属性。

下面的来自尚硅谷的图示：

总结

一个字较为ez，祝大家学习愉快！！！