vue2.x 对象劫持的原理实现

2024-09-30 09:37:24

目标：手写迷你版Vue

一：使用rollup打包,打包后的代码体积更小，更适合写框架源码的打包

npm i rollup -D

二：安装babel相关的包，以及实现静态服务，设置环境变量的包

npm i @babel/core @babel/preset-env rollup-plugin-babel roullup-plugin-serve cross-env -D

三：包的相关介绍

rollup (打包工具)
@babel/core(用babel核心模块)
@babel/preset-env（babel将高级语法转成低级语法）
rollup-plugin-serve(实现静态服务)
cross-env(设置环境变量)
rollup-plugin-babel(桥梁)

四：根目录书写rollup.config.js

import babel from 'rollup-plugin-babel';
import serve from 'rollup-plugin-serve';
export default {
 input:'./src/index.js', // 以哪个文件作为打包的入口
 output:{
   file:'dist/umd/vue.js', // 出口路径
   name:'Vue', // 指定打包后全局变量的名字
   format: 'umd', // 统一模块规范
   sourcemap:true, // es6-> es5 开启源码调试 可以找到源代码的报错位置
 },
 plugins:[ // 使用的插件
   babel({
     exclude:"node_modules/**"
   }),
   process.env.ENV === 'development'?serve({
     open:true,
     openPage:'/public/index.html', // 默认打开html的路径
     port:3000,
     contentBase:''
   }):null
 ]
}

配置package.josn

{
 "name": "vue_souce",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "build:dev": "rollup -c",
  "serve": "cross-env ENV=development rollup -c -w"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "@babel/core": "^7.9.0",
  "@babel/preset-env": "^7.9.5",
  "cross-env": "^7.0.2",
  "rollup": "^2.6.1",
  "rollup-plugin-babel": "^4.4.0",
  "rollup-plugin-serve": "^1.0.1"
 }
}

五：新建index.html(public/index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="/dist/umd/vue.js"></script>
  <script>
    let vm = new Vue({
      el:'#app',
      // 随便给些数据
      data(){
        return {
        name:'张三',
        age:11,
        address:{
          number:0,
          name:'李四'
        }}
      },
    })
    vm._data.address = {a:1};
    console.log(vm._data)
  </script>
</body>
</html>

六：编写Vue入口：index.js

// Vue的核心代码 只是Vue的一个声明
import {initMixin} from './init';
function Vue(options){
  // 进行Vue的初始化操作
  this._init(options);

}
// 通过引入文件的方式 给Vue原型上添加方法
initMixin(Vue); // 给Vue原型上添加一个_init方法
export default Vue

七：编写初始化操作 init.js

import {initState} from './state'
// 在原型上添加一个init方法
export function initMixin(Vue){
  // 初始化流程
  Vue.prototype._init = function (options) {
    // 数据的劫持
    const vm = this; // vue中使用 this.$options 指代的就是用户传递的属性
    vm.$options = options;

    // 初始化状态
    initState(vm); // 分割代码
  }
}

八：初始化数据

import {observe} from './observer/index.js'
export function initState(vm){
  const opts = vm.$options;
  // vue的数据来源 属性 方法 数据 计算属性 watch
  if(opts.props){
    initProps(vm);
  }
  if(opts.methods){
    initMethod(vm);
  }
  if(opts.data){
    initData(vm);
  }
  if(opts.computed){
    initComputed(vm);
  }
  if(opts.watch){
    initWatch(vm);
  }
}
function initProps(){}
function initMethod() {}
function initData(vm){
  // 数据初始化工作
  let data = vm.$options.data; // 用户传递的data
  data = vm._data = typeof data === 'function'?data.call(vm):data;
  // 对象劫持 用户改变了数据 我希望可以得到通知 =》 刷新页面
  // MVVM模式 数据变化可以驱动视图变化
  // Object.defineProperty () 给属性增加get方法和set方法
  observe(data); // 响应式原理
}
function initComputed(){}
function initWatch(){}

九：书写核心监听功能

// 把data中的数据 都使用Object.defineProperty重新定义 es5
// Object.defineProperty 不能兼容ie8 及以下 vue2 无法兼容ie8版本
import {
  isObject
} from '../util/index'
// 后续我可以知道它是不是一个已经观察了的数据 __ob__
class Observer{
  constructor(value){ // 仅仅是初始化的操作
    // vue如果数据的层次过多 需要递归的去解析对象中的属性，依次增加set和get方法
    // 对数组监控
    this.walk(value); // 对对象进行观测
  }
  walk(data){
    let keys = Object.keys(data); // [name,age,address]

    // 如果这个data 不可配置 直接return
    keys.forEach((key)=>{
      defineReactive(data,key,data[key]);
    })
  }
}
function defineReactive(data,key,value){
  observe(value); // 递归实现深度检测
  Object.defineProperty(data,key,{
    configurable:true,
    enumerable:false,
    get(){ // 获取值的时候做一些操作
      return value;
    },
    set(newValue){ // 也可以做一些操作
      if(newValue === value) return;
      observe(newValue); // 继续劫持用户设置的值，因为有可能用户设置的值是一个对象
      value = newValue;
    }
  });
}

export function observe(data) {
  let isObj = isObject(data);
  if (!isObj) {
    return
  }
  return new Observer(data); // 用来观测数据
}

十：编写工具类文件，存放校验对象

/**
 *
 * @param {*} data 当前数据是不是对象
 */
export function isObject(data) {
  return typeof data === 'object' && data !== null;
}

总结：

1 创建Vue构造函数,接收所有所有参数options
2 分类初始化options,本章主要处理data，让data上的引用类型的数据通过Object.definePrototy 变成响应式的，初始化是有循序的，先初始化props 然后初始化method 然后初始化data computed watch

3 核心如下

function defineReactive(data,key,value){
  observe(value); // 递归实现深度检测
  Object.defineProperty(data,key,{
    configurable:true,
    enumerable:false,
    get(){ // 获取值的时候做一些操作
      return value;
    },
    set(newValue){ // 也可以做一些操作
      if(newValue === value) return;
      observe(newValue); // 继续劫持用户设置的值，因为有可能用户设置的值是一个对象
      value = newValue;
    }
  });
}

到此这篇关于vue2.x 对象劫持的原理实现的文章就介绍到这了,更多相关vue2.x 对象劫持内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

深入浅出 Vue 系列 -- 数据劫持实现原理

一.前言数据双向绑定作为 Vue 核心功能之一,其实现原理主要分为两部分: 数据劫持发布订阅模式本篇文章主要介绍 Vue 实现数据劫持的思路,下一篇则会介绍发布订阅模式的设计. 二.针对 Object 类型的劫持对于 Object 类型,主要劫持其属性的读取与设置操作.在 JavaScript 中对象的属性主要由一个字符串类型的"名称"以及一个"属性描述符"组成,属性描述符包括以下选项: value: 该属性的值: writable: 仅当值为 true 时
3分钟了解vue数据劫持的原理实现

目的: 了解Object.defineProperty如何实现数据劫持大致原理是这样的: 定义一个监听函数,对对象的每一个属性进行监听通过Object.defineProperty对监听的每一个属性设置get 和 set 方法. 对对象实行监听对对象内嵌对象进行处理对数组对象进行处理 1. 先定义一个对象 let obj = { name: 'jw' } 2. 定义一个监听函数 /** * 判断监听的是否是对象 * 如果是对象,就遍历,并且对每个属性进行定义get 和 set */ fu
详解vue的数据劫持以及操作数组的坑

TL;DR 给data添加新属性的时候vm.$set(vm.info,'newKey','newValue') data上面属性值是数组的时候,需要用数组的方法操作数组,而不能通过index或者length属性去操作数组,因为监听不到属性操作的动作. 安装和初使用vue vue是构建用户界面的渐进式框架.所谓的渐进式:vue + components + vue-router + vuex + vue-cli可以根据需要选择相应的功能. 来串命令mkdir vue-apply;cd vue-ap
vue2.x 对象劫持的原理实现

目标:手写迷你版Vue 一:使用rollup打包,打包后的代码体积更小,更适合写框架源码的打包 npm i rollup -D 二:安装babel相关的包,以及实现静态服务,设置环境变量的包 npm i @babel/core @babel/preset-env rollup-plugin-babel roullup-plugin-serve cross-env -D 三:包的相关介绍 rollup (打包工具) @babel/core(用babel核心模块) @babel/preset-env
vue2.x数组劫持原理的实现

接上篇Vue2.x 对象劫持,继续来写数组劫持实现原理: 1 重新定义原生数组方法push unshift shift pop splice sort reverse 因为这些方法可以修改原数组. 2 拿到原生数组方法 Object.create(Array.prototype) 3 AOP拦截,再执行重写数组方法前,先执行原生数组方法核心监听Observer代码 // 把data中的数据都使用Object.defineProperty重新定义 es5 // Object.definePr
手动实现vue2.0的双向数据绑定原理详解

一句话概括:数据劫持(Object.defineProperty)+发布订阅模式双向数据绑定有三大核心模块(dep .observer.watcher),它们之间是怎么连接的,下面来一一介绍. 为了大家更好的理解双向数据绑定原理以及它们之间是如何实现关联的,先带领大家复习一下发布订阅模式. 一.首先了解什么是发布订阅模式直接上代码: 一个简单的发布订阅模式,帮助大家更好的理解双向数据绑定原理 //发布订阅模式 function Dep() { this.subs = []//收集依赖(也就是
Vue2.x 的双向绑定原理及实现

目录 1.实现过程 2.显示一个 Observer 3.实现 Watcher 4.实现 Compile 5.添加解析事件 6.完整版 myVue Vue 是利用的 Object.defineProperty() 方法进行的数据劫持,利用 set.get 来检测数据的读写. https://jsrun.net/RMIKp/embedded/all/light MVVM 框架主要包含两个方面,数据变化更新视图,视图变化更新数据. 视图变化更新数据,如果是像 input 这种标签,可以使用 oninp
Vue2 与 Vue3 的数据绑定原理及实现

目录介绍 Object.defineProperty Proxy 介绍数据绑定是一种把用户界面元素(控件)的属性绑定到特定对象上面并使其同步的机制,使开发人员免于编写同步视图模型和视图的逻辑. 观察者模式又称为发布-订阅模式,定义对象间的一种一对多的依赖关系,当它本身的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新.比如用户界面可以作为一个观察者,业务数据是被观察者,用户界面观察业务数据的变化,发现数据变化后,就同步显示在界面上.这样可以确保界面和数据之间划清界限,假定应用程序的需
手写Vue2.0 数据劫持的示例

一:搭建webpack 简单的搭建一下webpack的配置.新建一个文件夹,然后init一下.之后新建一个webpack.config.js文件,这是webpack的配置文件.安装一下简单的依赖. npm install webpack webpack-cli webpack-dev-server -D 在同级目录下新建一个public/index.html和src/index.js,作为出口文件和入口文件. j简单配置一下webpack, 在webpack.config.js文件中: cons
Vue2 的 diff 算法规则原理详解

目录前言算法规则 diff 优化策略老数组的开始与新数组的开始老数组的结尾与新数组的结尾老数组的开始与新数组的结尾老数组的结尾与新数组的开始以上四种情况都没对比成功推荐在渲染列表时为节点设置 key 循环比对结束的后续处理工作源码解析总结前言所谓 diff 算法,就是通过比对新旧两个虚拟节点不一样的地方,针对那些不一样的地方进行新增或更新或删除操作.接下来我们详细介绍节点更新的过程. 首先进行静态节点处理,判断新旧两个虚拟节点是否是静态节点,如果是,就不需要进行更新操作,
Python判断两个对象相等的原理

概述大部分的python程序员平时编程的时候,很少关心两个对象为什么相等,因为教程和经验来说,他们就应该相等,比如1==1就应该返回True,可是当我们想要定义自己的对象或者修改默认的对象行为时,通常会因为不了解原理而导致各种奇奇怪怪的错误. 两个对象如何相等两个对象如何才能相等要比我们想象的复杂很多,但核心的方法是重写 eq 方法,这个方法返回True,则表示两个对象相等,否则,就不相等.相反的,如果两个对象不相等,则重写 ne 方法. 默认情况下,如果你没有实现这个方法,则使用父类(ob

vue2.x 对象劫持的原理实现

相关推荐

随机推荐