Vue如何进行数据代理

2024-08-02 17:03:31

了解如何代理

准备工作

准备一个容器，供vue实例对象指定
在实例对象当中配置供页面调用的数据（data）
测试页面

<body>
    <!-- 准备一个容器 -->
    <div class="subject">
        <div>昵称:{{name}}</div>
        <div>电话:{{phone}}</div>
    </div>
</body>
<script>
    new Vue({
        el: '.subject',
        data: {
            name: 'wavesbright',
            phone:"134****2557"
        }
    });
</script>

查看VM

通过之前的复习，我们知道，在vm这个实例对象当中配置项data当中的属性，会挂载到vm上，供页面调用而鼠标悬停在二者身上，出现了 invoke property getter，说明什么？说明，vm上的name和phone，是通过defineProperty 添加上去的 === 做了数据代理

和谁做了数据代理？

当你访问 name 或者 phone的时候一定会调用get（getter），这个get 一定会从某个地方，将所需要的值进行返回什么地方？ data嘛

var vm =  new Vue({
  el: '.subject',
  data: {
     name:'wavesbright'
     phone:"134****2557"
}
});

那你要对 name 和 phone 进行修改的时候，那肯定要调用set嘛如何确定呢？

get和set

确实有，在哪里呢，往下翻就可以看到

这不就是代理么

验证两条线

vm当中的name 与 phone 是与data进行数据绑定的

get

既然绑定了，那当我访问name变量的时候先调用getget 返回 data.name当中配置的value值

验证过程

很简单，直接修改data.name的值不就知道了

原图

修改后

说明是绑定到一起的嘛，但我为什么不修改 vm.name的值去查看data是否发生改变了呢？

问题引出1

我们设计的data当中的属性，经过vue的一系列操作最终挂载到了vue实例上，实现了数据绑定数据绑定是一个事实，我们现在所做的是验证这个过程通过修改配置项 data当中的name属性，页面当中确实发生了变化但是我现在想验证的是，我修改 vm.name的值的时候，data如何确定变化

用vm.data查看就能完成了，这不很简单嘛？是吗？

开国际玩笑哦，你data在全局定义了吗？没有吧？vm当中为什么也没有data呢？

set

解决方式1

定义一个全局的data不就行了

验证一下嘛，修改vue当中的name属性，data是否会发生变化

确实可以

问题衍生2

那么又有一个问题，我这个全局data是自己定义的，而正常构建的vue实例对象可不会这么写

但事实情况就是，我修改配置项data当中的数据，可以影响页面，而修改页面也可以影响data

我辛辛苦苦配置了一个data对象，交给了vm，vm如果不把我这个data存下来，那人家以后要用属性去那里取？vm一定会把这个data留下来。

这就说明一个问题，配置项data，一定在构建完成的这个实例对象vm身上,但是为什么找不到呢？

因为人家叫 vm._data

这个就不展开了，因为 vm当中的data除了做数据代理，还有数据劫持

我们当下只需要记住一点，vm._data === data

验证set的过程

这是当前页面，现在我们要修改name属性

修改成全大写

分析过程

我们修改了vm.name的值一定调用了 set函数，拿到这个value值并且将这个 value值赋给了vm._data(data)

图文解析

第一部分

一切的一切都是因为开头写了这段代码

var vm =  new Vue({
  el: '.subject',
  data: {
     name:'wavesbright'
     phone:"134****2557"
}
});

紧随其后，马上就给我们创建了一个vue的实例对象

然后，vue开始为vm这个实例对象准备一些东西（属性）

重点，data来了，完全来自于上方的配置项data

截止到目前来说，没有数据代理的存在。我们所写的data，就是单纯的进行了一次赋值，然后给了下划线data（_data）

第二部分

实际上，vue做到这一步已经差不多了，代码也是可以写下去的

但是，请问，目前vm身上，有name吗，没有

但是我能拿到name的值吗？可以的，因为我有 _data

<body>
      <!--准备一个容器-->
      <div class="subject">
         <div>昵称:{{_data.name}}</div>
	 <div>电话:{{_data.phone}}</div>
      </div>
</body>
<script>
    /* var data = {...
    var vm = new Vue({
       el:'.subject',
       data:{
         name:'wavesbright'
	 phone:"134****2557"
	 }
});
</script>

一样可以拿到name和phone的值

因为，vm这个对象身上的所有属性，在模板上面都能够直接使用

但是这样写，那不是直接崩溃，创建一个变量就需要 _data一次，vue在这里做了一个很棒的操作

也就是数据代理

第三部分

vm在自己身上创建了一个变量name什么方式创建的？defineProperty通过get拿到vm自身上的_data.name的值修改数据的时候通过set,获取value，然后再将_data当中的属性进行修改完成了数据代理，双向绑定

为什么要将data当中的数据放在vm身上一份呢（_data）

就是为了让你编码的时候更方便（不至于每次都是 _data.xxx）

总结

vue中的数据代理
- 通过vm对象 来代理 data对象（配置项）中的属性操作（get/set）
Vue中数据代理的好处
- 更加方便操作data中的数据（_data.xxx）
基本原理

通过Object.defineProperty()将data配置项当中的所有属性配置到vm对象上

为每一个添加到vm上的属性，指定一个get和set函数（getter/setter）

在getter/setter内部去操作（读/写），data中对应的属性

展开_data

思考

老师不让展开是对的

因为如果按照之前的理解，这个符号代表什么 (...) 代表数据代理

这样容易引起理解误区，，这里实际上并不是数据代理，而是做了一个数据劫持

我希望看到的 _data的展开内容是什么？是这样的

data:{
   name:'wavesbright'
   phone:"134****2557"
}

实际上并不是

vue的承诺

只要你敢修改data当中的属性值，我就敢在页面当中 {{property}}一起发生变化

当name的值发生了改变，最终影响到的是谁 === _data.name
那么页面元素是怎么同步进行修改的？
vue是不是必须要知道，name这里发生了改变，他需要做什么 === 监听
经历了一系列变动后，完成了小小的升级，最终达成响应式操作

到此这篇关于vue如何进行数据代理的文章就介绍到这了,更多相关vue数据代理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

VUE的数据代理与事件详解

目录回顾Object.defineProperty方法何为数据代理 Vue中的数据代理事件的基本使用事件的修饰符键盘事件总结回顾Object.defineProperty方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法</title> </head> <
vue之数据代理详解

目录一.下面我讲的是前端人员在vue-cli中就可以完成的一种解决方式--数据代理二.上面的数据代理还是有以下缺陷的总结解决跨域的方式有多种,例如jsonp.cors但这两种都需要后台人员的帮助, 一.下面我讲的是前端人员在vue-cli中就可以完成的一种解决方式--数据代理 (1)首先需要在vue-cli官方文档的配置项下载一个插件 (2)将上图红圈中的部分粘贴到vue脚手架的babel.config.js中 (3)上图中红圈部分http://localhost:5000为本地服务器地
vue Proxy数据代理进行校验部分源码实例解析

目录 initProxy 触发代理数据过滤总结 initProxy 数据拦截的思想除了为构建响应式系统准备,它也可以为数据进行筛选过滤,我们接着往下看初始化的代码,在合并选项后,vue接下来会为vm实例设置一层代理,这层代理可以为vue在模板渲染时进行一层数据筛选 Vue.prototype._init = function(options) { // 选项合并 ... { // 对vm实例进行一层代理 initProxy(vm); } ... } initProxy // 代理函数 var
Vue如何进行数据代理

目录了解如何代理准备工作查看VM 和谁做了数据代理? get和set 验证两条线 get 问题引出1 set 解决方式1 问题衍生2 验证set的过程分析过程图文解析第一部分第二部分第三部分总结展开_data 思考 vue的承诺在了解了关于js当中的Object.defineProperty()这个方法后,我们继续对vue当中的数据代理做一个基于现在的解析建议观看之前先了解下js当中的Obejct.defineProperty() 链接地址了解如何代理准备工作准备一
javascript数据代理与事件详解分析

目录数据代理与事件回顾Object.defineProperty方法何为数据代理 Vue中的数据代理事件的基本使用事件的修饰符键盘事件数据代理与事件星光不负赶路人,满身花香蝶自来回顾Object.defineProperty方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法<
Vue数据代理的实现流程逐步讲解

目录一,前言二,对象劫持回顾 1,Demo 三,数组类型的处理 1,当前逻辑分析 2,Vue 对性能的权衡 3,数组的劫持思路 4,数组方法的拦截思路 5,数组方法重写的实现 6,数组方法拦截的实现四,结尾一,前言上篇,主要介绍了 Vue 数据初始化流程中,对象属性的深层劫持是如何实现的核心思路就是递归,主要流程如下: 1.通过 data = isFunction(data) ? data.call(vm) : data;处理后的 data 一定是对象类型 2.通过 data = o
Vue.js实现数据响应的方法

许多前端JavaScript框架(例如Angular,React和Vue)都有自己的数据相应引擎.通过了解相应性及其工作原理,您可以提高开发技能并更有效地使用JavaScript框架.在视频和下面的文章中,我们构建了您在Vue源代码中看到的相同类型的Reactivity. 如果您观看此视频而不是阅读文章,请观看系列中的下一个视频,与Vue的创建者Evan You讨论反应性和代理.
Vue data的数据响应式到底是如何实现的

研究过程一般形式 data:{ n:0 } :以这样的方式存储数据,vue能够监听其变化吗?显然是不能的. 使用Obj.defineProperty let data1 = {} Object.defineProperty(data1, 'n', { value: 0 }) 为什么要使用defineProperty呢?这不是把一般形式复杂化了吗? 引出主角getter setter. 如果我们想对数据监听进行处理呢?(假设修改的数据必须>=0) let data2 = {} data2._n
vue实现简单数据双向绑定

本文实例为大家分享了vue实现简单数据双向绑定的具体代码,供大家参考,具体内容如下这里是简单的实现,有助于新手理解消化,当然vue要实现双向数据代理不可缺少,期待后续在更新 vue双向数据绑定 -> Object.defineProperty() //2.0核心语法 -> 数据代理 -> 双向绑定 -> 订阅发布模式 compile-> 模版解析 (template模版 html 指令 {{表达式}}) observer-> 观察者(订阅发布) data里的所有的属性
Vue监听数据的原理详解

目录一.引入二.监测对象 2.1 为什么需要监测对象 2.2数据代理 2.3 对象监测相关API之Vue.set 2.4 为对象赋多个新值三.监测数组总结一.引入首先画一个简单的图. 我们在写Vue的时候总会和数据打交道,将我们的目标数据写在data中,然后在template的差值表达式中通过{{xxx}}的格式可以响应式的渲染数据.当data中的数据改变时,这里橙色的线就会引起差值表达式的变化.那么问题来了,我们如何监测到data中数据的改变呢?这里就涉及到了Vue监测数据的问题.