Vue框架学习笔记——数据代理

桃扇骨 2024-02-17 09:35 33阅读 0赞

#### 文章目录 ####

*  前文提要
 *  数据代理的概念
 *  MVVM模型和Vue中的数据代理
 *   *  M，模型
     *  V，视图
     *  VM，视图模型

--------------------

## 前文提要 ##

本人仅做个人学习记录，如有错误，请多包涵

--------------------

## 数据代理的概念 ##

使用一个对象代理对另一个对象中属性的操作。

## MVVM模型和Vue中的数据代理 ##

Vue框架是建立在MVVM的基础上开发的。  
MVVM框架模型了解：[什么是MVVM框架？][MVVM]  
第一个M代表**Model**，模型，也就是数据  
第一个V代表**View**，视图，也就是呈现出来的效果  
最后的VM代表**ViewModel**，是视图模型，是抽离出来的部分逻辑代码，用于构建视图和模型之间的关联，能够借此管理两部分。

### M，模型 ###

Vue中的Model也就是Vue实例中的data中的数据，也就是下文data后大括号中的内容

const vm = new Vue({
        
          // el: '#box',
          data: {
        
            name: "这里是name的值",
          }
    })

### V，视图 ###

Vue中的View视图，则是html中嵌入了Vue框架特殊语法待处理的模版代码，

<div class="box" id="box">
        <h1>
          hello,world{
       {name}}
        </h1>
      </div>

例如这里的，div标签，就是我理解中的Vue里的视图，

### VM，视图模型 ###

至于VM，视图模型，则是整个Vue实例。

通过这种关系，也就是通过这种数据代理的方法，将html中的数据和Vue实例中的data数据关联起来。

在第一个M中的代码用vm指向整个Vue实例，代码中的data会在vm上生成一个属性\_data，\_data不是Vue实例中的data，但是实例中的data的数据，\_data中都有。

接着就是一串代码

<div class="box" id="box">
        <h1>
          hello,world{
       {name}}
        </h1>
      </div>

在这两层大括号中，我们**可以直接写js表达式**，**也可以写出Vue实例中含有的各类属性**。  
那么Vue实例中有name吗，按照上面的讲述，是不是应该写成

hello,world{
       {_data.name}}

才对，写成\_data.name这样没错，但其中Vue中数据代理的体现还体现在，**它自动地在vm的身上创建了data中的属性**。  
你对data的访问和修改，实际上操控的都是\_data中的数据（这里就是数据代理的体现，用一个对象代理另一个对象的操作），\_data和data中的数据又是关联的。  
就可以通过name实现\_data.name的操作，目的是编写代码更加方便

--------------------

至此，结束。

`如果你觉得这篇文章写的不错，多多点赞~收藏吧！`

[MVVM]: https://zhuanlan.zhihu.com/p/59467370