探讨Vue 数据监测原理-第一节-引入Vue 中一些简单介绍

一平米

已于 2022-07-13 19:28:12 修改

阅读量83

点赞数

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

于 2022-07-10 20:54:03 首次发布

本文链接：https://blog.csdn.net/pymxb1991/article/details/125698645

版权

vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

探讨一下Vue 数据监测的原理

探讨一下Vue 数据监测的原理

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
Vue 教程 https://cn.vuejs.org/v2/guide/
MDN Web Docs 社区 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object

本次探讨共的第一个章节

第一节：引入Vue 中一些简单介绍

主要简单的介绍一下 Vue 中的 data 、_data、数据代理；
在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

1. data

data ：类型是Object|Function 但是此处只探讨 data 类型为 Object

1.1. Vue实例的数据对象

Vue实例的数据对象：创建普通的Vue实例，data是Vue实例的数据对象

  var data = { a: 1 }
   // 直接创建一个实例
   var vm = new Vue({
	    data: data
   })
   vm.a // => 1
   vm.$data === data // => true

实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data对象上所有的 property，因此访问 vm.a 等价于访问 vm.$data.a。

Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化

 const vm = new Vue({ 
    el: "#root",
    data: {                  // 可以直观的看到，在Vue 实例里面，data其实就是一个对象，里面
       name: "安锐捷",       // 定义的数据都是以键值对形式体现出来的
       address: "普天科技园"    
    }
  })

2. 存储data 数据 : _data

2.1. vm._data == option.data == data

其实就是vm._data 它是用来存储data 数据使用的，此处有一个连等的操作 vm._data == option.data == data （options 是new vue 之后的配置对象）
不同之处 _data跟data 不同的地方就是，_data 通过数据代理把所有的属性都添加到vm上，同时给对应属性添加getter/settter 方法，使其变为响应式，data纯粹的对象 (含有零个或多个的 key/value 对)

3 数据代理 Object.defineProperty()

3.1 基本应用

方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

      // 通过使用 Object.denfieProperty 添加属性age 并使其age 变量可以被枚举、修改、删除；
      let deptPerson3 = {
           name: '阿毛',
           sex: '男' ,
        }
      Object.defineProperty(deptPerson3,'age',{
           value: 18,
           enumerable: true , //控制属性是否可以被枚举，默认值为false 
           writable: true,  // 控制属性是否可以被 修改，默认值为false 
           configurable: true // 控制属性是否可以被 删除，默认值为false
      }) 
      console.log("deptPerson3: ",Object.keys(deptPerson3));
  ```

添加属性后，页面打印效果如下图所示：
注意以上Object.defineProperty中的控制属性默认值都是false 配置true才会生效

3.2 高级应用

Object.defineProperty() getter/setter 方案的高级应用

    // Object.defineProperty  高级配置项；getter   setter 方法使用；
   // 现提供  let number = 18 ;  要求 deptPerson4 对象要求有一个age 属性，并且deptPerson4 的年龄是读取number属性值 读取出来的；而不是自己手写的；
   let number = 18 
   let deptPerson4 = {
        name: '阿毛',
        sex: '男' ,
     }
   Object.defineProperty(deptPerson4,'age',{
        get(){
            console.log("有人要查看年龄了: ");
            return number;
        },
        set(value){
            console.log("有人要修改年龄了: ");
            number = value;
        }
   }) 
   console.log("deptPerson4: ",deptPerson4);

页面显示打印效果如下图示例：

数据代理：通过一个对象代理对另一个对象中属性的操作

    <!--
        数据代理： 通过一个对象代理对另一个对象中属性的操作
        例如： 有两个对象 let obj ={ x: 20} ; let obj2 = {y: 30} 
             通过 obj2 对象 对 obj 对象的属性值 进行修改 ，这就是数据代理
    -->
  <script type="text/javascript">
    let obj = { x: 20} 
    let obj2 = {y: 30} 

    Object.defineProperty(obj2,'x',{ // 给obj2 添加一个 x 属性 
        get(){
            return obj.x;  // 获取obj2 中的X 其它就是返回了obj 中的x 
        },
        set(value){
            obj.x = value // 修改obj2 中的x 其它就是修改了 obj 中的X
        }
    })
  </script>