Vue源码解析—new Vue()响应性数据劫持

最新推荐文章于 2023-03-21 20:21:06 发布
最新推荐文章于 2023-03-21 20:21:06 发布
阅读量112 收藏
点赞数
分类专栏： Vue源码实现原理 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43775179/article/details/129527999
版权

Vue源码解析—响应性数据劫持

1

响应性数据劫持

a

本章主要讲解红框中重要部分——数据劫持，其他先不看

本章完整代码：https://github.com/gitboyzcf/vue2-mini

阅读完将会了解：

  • vue2的data选项中对象是怎样劫持
  • vue2的data选项中数组是怎样劫持

话不多说直接代码讲解！！！

代码讲解

注意：根据数字序号引导进行阅读，仔细阅读注释

index.html

<body>
  <div id="app">vue2</div>
  <script type="module">
    import Vue from './dist/vue.js'
    let vm = new Vue({
      data() {
        return {
          name: 'zhagsan',
          age: 123,
          address:{
            test:'123321'
          },
          list:[1,2,3],
          list2:[{a:123}]
        }
      }
    });
    vm.name = 'lise'
    vm.address = {
      test2:444
    }
    console.log(vm);
  </script>
</body>

index.js

import { initMixin } from "./init";

// vue构造函数 
function Vue(options) {
  this._init(options) // ==== 1
}

initMixin(Vue); //_init 在此进入 -》 init.js
// ...

export default Vue;

init.js

import { initState } from "./state";

export function initMixin(Vue) {
  Vue.prototype._init = function (options) {
    const vm = this; // this 当前vue实例对象

    //将传入的选项放到vue示例上 ==== 2
    vm.$options = options;

    // 初始化状态 ==== 3 -》 state.js
    initState(vm);
  };
}

state.js


import { observe } from "./observe/index";

export function initState(vm) {
  // 得到选项（data、methods、watch ...） ==== 4
  const opts = vm.$options;
  // 是否有data选项 
  if (opts.data) {
    initData(vm); // ==== 5
  }
  // ...
}

function proxy(vm, target,key){
  // 将data中的属性代理一份放到vm下
  Object.defineProperty(vm,key,{
    get(){
      return vm[target][key];
    },
    set(newValue){
      vm[target][key] = newValue;
    }
  })
}

function initData(vm) {  // 处理data数据 ==== 6
  // 得到data选项
  let data = vm.$options.data;
  // 判断data是否为方法（如果是data选项是个方法 就调用此方法并改变this指向为 当前vue实例） ==== 7
  data = typeof data === "function" ? data.call(vm) : data;
  // console.log(data);

  vm._data = data;

  // 数据劫持 ==== 8  -》 observe/index.js
  observe(data);

  
  
  //============== 此部分先不看 根据序号引导来看 
  // 为了方便是vm直接获取_data中的属性 再次代理
  /**
   * data(){
   *   return {
   *      test:1
   *    }
   * }
   * this.test 或者  vm.test
   */
  for (let key in data) {
    proxy(vm, "_data", key);
  }
  //=====
}

observe/index.js

import { ArrayMethods } from "./array"; // ==== 15 -》 observe/array.js

class Observe {
  constructor(data) {

    // ========！！！ 根据引导去看
    // 对每个对象添加Observe实例
    Object.defineProperty(data,'__ob__',{
      enumerable: false, // 不允许枚举（遍历）
      value:this
    })
    // =======


    // 判断是否为数组对数组进行操作  ==== 11
    if (Array.isArray(data)) {
      // 将数组对象的原型指向新创建的对象 // ==== 20
      data.__proto__ = ArrayMethods;
      // 如果是数组对象 再次给对象进行响应拦截处理[{a:1}]
      this.observeArray(data)

    } else {
      // 循环对象中的属性进行defineProperty劫持 ==== 12
      this.walk(data);
    }
  }
  // 定义循环对属性依次进行劫持
  walk(data) {
    // “重新定义”属性 ——性能消耗 ==== 13
    Object.keys(data).forEach((key) => defineReactive(data, key, data[key]));
  }

  // 处理数组对象 [{a:123}] （遍历数组中的每一个对象进行数据劫持） ==== 21 （15 - 21 是对数组方法以及数组对象的劫持）去往-》array.js 看感叹号处
  observeArray(data){
    for(let i = 0; i < data.length; i++){
      observe(data[i]);
    }
  }
}

// 公共响应式拦截  
export function defineReactive(target, key, value) {
  // 如果data中的属性还是对象递归代理
  /**
   * 为何在此递归？（当默认data中属性值为对象时进行深层劫持变为响应式）
   * data(){
   *  return{
   *    test:{
   *      a:123
   *    }
   *  }
   * }
   * 
   */
  observe(value);

  Object.defineProperty(target, key, {  // ==== 14 (1 - 14  为data数据对象劫持，数组的劫持在上面👆从15开始)
    // 属性劫持
    get() {
      // 取值走get
      return value;
    },
    set(newValue) {
      // 修改值走set
      // 判断值是否一致
      if (newValue === value) return;
      /**
       * 为何在此递归？(当赋值为对象时，再次将对象中的属性进行劫持变为响应式)
       * data(){
       *  return{
       *    test:1
       *  }
       * }
       * 
       * this.test = {a:123}
       * 
       */
      observe(newValue);
      value = newValue;
    },
  });
}

export function observe(data) {
  // 判断data是否为对象 ==== 9
  if (typeof data !== "object" || data == null) {
    return; //只对对象进行劫持
  }

  // 创建劫持对象
  return new Observe(data); // ==== 10
}

observe/array.js

//获取原来的数组方法 ==== 16
let oldArrayProtoMethods = Array.prototype;

// 创建新对象并用原型链方式将新对象继承Array原型 ==== 17
let ArrayMethods = Object.create(oldArrayProtoMethods);

// 定义劫持的方法 ——当data中的数组调用下面任意方法时 可拦截操作
let methods = ["push", "pop", "unshift", "shift", "splice"];

// 在新对象中添加劫持的方法 ==== 18
methods.forEach((item) => {
  ArrayMethods[item] = function (...args) {
    // 做劫持操作...
    console.log("数组劫持",this);
    
    /**
     * 当前的this指向调用着（例如下面代码 this指向 test对应的值）
     * data(){
     *  return {
     *    test:[{a:123}]
     *  }
     * }
     * test.push({b:456})
     * 
     * args 输出[{b:456}]
     */

    // 使用原生数组方法
    let result = oldArrayProtoMethods[item].apply(this, args);

    // ====== 此处是解决当使用push添加为对象时为对象进行劫持 先不看 根据序号引导走！！！  ======
    
    let ob = this.__ob__ //Observer实例对象  __ob__此属性的添加请看 -》observe/index.js 的感叹号标记（细品this指向）
    let inserted; // 参数
    switch (item) {//判断是否为调用添加数组方法
      case "push":
      case "unshift":
        inserted = args;
        break;
      case "splice":
        inserted = args.slice(2);
        break;
    }
    if(inserted){
      ob.observeArray(inserted) // 对数组添加的对象进行数据劫持
    }
    //======
    return result;
  };
});

export { ArrayMethods }; // ==== 19 -》 observe/index.js






到这里就结束了，后续还会跟进，还请持续关注！
感谢阅读，若有错误可以在下方评论区留言哦！！！

111

Thetimezipsby
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue知识点】——Vue2和Vue3的数据劫持
m0_50785976的博客
10-21 2043
Vue2的Object.defineProperty和Vue3的Proxy实现数据劫持
【手把手教你搓Vue响应式原理】（三）observe 以及 __ob__
油墨香^-^的博客
02-27 343
在上一文中，我们已经成功将深度对象（好几层的对象）成功遍历，全部绑定了，也就是全部弄成了响应式对象。虽然上述功能已经基本实现了对象的成功遍历，但是，在 Vue 的源码中，在我们遍历对象的同时，会将创建的实例赋值到__ob__属性添加到每一个对象中。这篇文章主要对标源码，新增了__ob__属性，以及observe入口方法，相当于是对标源码，更规范地书写响应式。这个__ob__属性，在vue使用中大家也可能有所眼熟，这篇文章本意也在于更规范地书写响应式。并且，由于少了一个observe。
手撕Vue源码（二）对象数据劫持
wenyeqv的博客
04-07 156
我们的vue.js文件编译工作配置好之后,就可以继续写了,首先在html中调用vue,声明好数据,然后一步一步的完善vue中的功能 引入vue.js <script src="./dist/vue.js"></script> 声明好数据 <div id="app">{{name}}</div> <script> let vm = new Vue({ .
【手写 Vue2.x 源码】第五篇 - 数组的劫持
BraveWangDev
01-05 1595
第五篇 - 数组的劫持；出于对性能的考虑，Vue 没有对数组类型的数据使用 Object.defineProperty 进行递归劫持，而是通过对能够导致原数组变化的 7 个方法进行拦截和重写实现了数据劫持；
.3-Vue源码之数据劫持（1）
weixin_30817749的博客
05-23 118
写了一半关机了，又得重新写，好气。 　　上一节讲到initData函数，其中包含格式化、代理、监听。 // Line-3011 function initData(vm) { var data = vm.$options.data; //data = vm._data = ... 格式化data // ...pr...
数组数据劫持(Vue2源码分析)
ajhdd的博客
03-12 273
如果数组中的每个数据都进行劫持的话那么就是产生一大堆的冗余数据,极大的影响性能,所以对数据方法例如(push,unshift,splice)进行劫持。**实现目的:**对数组方法进行劫持,如果调用数组方法了,那么监听数组更新,如果添加数据那么进行数据劫持。在复制出的原型上进行新方法的重写,这样不影响原有的数组的方法 aop编程。对数组进行循环,如果数组里面是数组类型或者对象类型进行劫持。使用Object.create()方法,复制出数组的原型。
vue2数据劫持源码剖析
最新发布
04-16
Vue2 数据劫持是其响应式系统的核心机制，它使得数据变化时能够自动触发视图更新，实现数据和视图的双向绑定。在Vue2中，这一机制主要通过`Object.defineProperty`来实现。下面我们将深入探讨这个过程。 首先，Vue...
vue源码解析课件讲义
03-27
Vue源码解析课件讲义是针对深入理解Vue.js内部工作原理和设计模式的重要学习资料。这份讲义可能包含了Vue的组件系统、虚拟DOM、响应式原理、生命周期、指令系统、插件扩展等多个核心主题。 1. **Vue组件系统**：Vue...
vue源码解析如何实现一个MVVM框架
08-10
Vue.js是一款轻量级的前端JavaScript框架，以其易用性、高效性和可扩展性而闻名。MVVM（Model-View-ViewModel）模式是Vue的核心设计理念，它将数据模型、视图和视图模型紧密地结合在一起，实现了数据驱动的开发方式...
vue源码解析 vue教程使用
11-22
1. **响应式系统**：Vue的核心之一是其响应式系统，它基于数据劫持和发布订阅模式。当数据发生变化时，Vue能够自动更新对应的视图。这个过程涉及到了`Observer`、`Dep`和`Watcher`等关键对象。 2. **虚拟DOM**：Vue...
Vue.js实现数据响应的方法
10-18
下面详细解释了Vue.js实现数据响应性的几种关键方法。 ### Vue.js响应式系统 Vue.js的响应式系统是建立在观察者模式基础上的。当数据模型发生变化时，Vue能够检测到变化并通知依赖于这些数据的DOM部分进行更新。...
理解vue的数据劫持
qq_52622178的博客
03-26 1486
上篇讲到vue的数据代理，这篇来讲一下我对数据劫持的理解。 数据劫持的通俗理解就是数据监视，当我们修改vue实例对象中的data属性中的值时，页面中的数据会立马改变，这又是如何检测到的呢？ **数据劫持：**就是vue通过Object.defineProperty对data中的属性添加了set，get方法，并在调用该方法时为该方法添加一些操作来劫持对象属性的操作。 vue监视数据的原理： Vue数据绑定之前，通过observe每个对象的属性，添加到订阅器dep中，当数据发生变化的时候发出一个notice，即
vue js判断一个变量是数组还是对象
撑起自己半边天
06-16 5060
vue js判断一个变量是数组还是对象
Vue 核心之数据劫持
l_XIANA的博客
11-28 377
Vue框架核心之数据劫持 前瞻 当前前端界空前繁荣，各种框架横空出世，包括各类mvvm框架横行霸道，比如Angular、Regular、Vue、React等等，它们最大的优点就是可以实现数据绑定，再也不需要手动进行DOM操作了，它们实现的原理也基本上是脏检查或数据劫持。那么本文就以Vue框架出发，探索作者运用Object.defineProperty来实现数据劫持的奥秘（本文所选取的相关代码源自于Vue v2.0.3版本的源码）。 回顾一下Object.defineProperty 语法 Object.de
Vue2源码学习 - 2.初始化数据，属性劫持，对象的响应式原理，数组的函数劫持
Hiyori02的博客
12-23 524
Vue2源码，初始化数据，属性劫持，对象的响应式原理，数组的函数劫持
Vue2.x源码：data对象的劫持
YanHSama的博客
03-21 422
data()，直接执行，this 指向的是 window，要改变 data 的 this 指向，执行。将会形成 observe “对象的单层劫持”的递归，从而实现对象属性的深层劫持；observe 方法保证 data 必须是一个对象，否则直接返回，不进行监测。data 是一个对象时，使用 Observe 类对 data 进行监测。此处只关注 data 的处理，而 data 的处理在。监测 data，从而实现 data 的响应式。中的 data 是函数值，执行。Vue 初始化时会调用。data 默认为{}
vue2.x源码：data数组劫持
YanHSama的博客
03-21 129
observeArray 主要遍历数值，执行 observe(item[i]),开始对深层数据进行监测，则进行递归处理。监测 data 时，进行 observe 时，判断 data 是数组时，重写数组原型刚发，执行。
vue源码-数据劫持
weixin_48807072的博客
07-24 180
(1).简单的数据劫持 Const data = { msg:”hello word” } Let vm = {};//模拟对象 //数据劫持; //参数:对象,对象增加的属性,属性描述{get,set} Object.defineProperty(vm,’mag’,{ get(){ console.log(‘get’,data.msg) }, set(newValue){ console.log(‘set’,newValue); If(newValue === data.msg)
Vue源码之Object数据劫持
yuan_me_da的博客
12-18 393
目录 vue中如何侦测Object变化？ Object.defineProperty 数据劫持原理 Object 响应式中的问题 vm.$set内部原理 vm.$delete内部原理 vm.$watch内部原理 用法 watch内部实现原理 deep实现原理 vue中如何侦测Object变化？ js中两种侦测对象变化方法： 使用Object.defineProperty E...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值