vue2-手写数据劫持

最新推荐文章于 2024-04-16 19:34:48 发布
最新推荐文章于 2024-04-16 19:34:48 发布
阅读量244 收藏
点赞数
分类专栏： 笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43840202/article/details/110449951
版权

开始之前，需要初始化一个webpack环境

1、进入项目目录执行初始化

npm init -y

2、下载webpack依赖

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin

3、新建相关目录

4、public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

5、vue/index.js

import Vue from '../vue'

6、vue/index.js

function Vue() {

}
export default Vue;

7、package.json

{
  "name": "vue2_",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

8、webpack.config.js

const path = require('path'),
    htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 项目入口文件
    entry: './src/index.js',
    // 项目打包输出文件配置
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, 'dist')
    },
    devtool: 'source-map',
    resolve: {
        modules: [path.resolve(__dirname,'',path.resolve(__dirname,'node_modules'))]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/index.html')
        })
    ]
}

启动，一个最简易的webpack环境已经搭建完成

实现vue数据劫持

文件目录

入口文件 src/index.js

import Vue from '../vue'
let vm = new Vue({
    el: '#app',
    data(){
        return {
            title: '零三',
            numArr: [1,2,3],
            strArr: ['vue','react','html'],
            objArr: [
                {
                    name: 'mike',
                    hobby: ['足球','篮球','code'],
                    skill: [
                        {
                            text: '吹牛皮',
                            lv: 3
                        },
                        {
                            text: '撩妹',
                            lv: 0
                        }
                    ]
                }
            ]
        }
    }
})
// 直接获取
// console.log('-----vm.title-----')
// console.log(vm.title)

// 先获取vm.objArr再取值[0]获取hobby
// console.log('-----vm.objArr[0].hobby-----')
// console.log(vm.objArr[0].hobby)

// 原始数据，不会被观察
// console.log('-----vm.objArr[0].hobby[0]-----')
// console.log(vm.objArr[0].hobby[0])

// console.log('-----vm.objArr[0].skill.push( {\n' +
//     '    text: \'吃吃吃\',\n' +
//     '    lv: 6\n' +
//     '})-----')
// console.log(vm.objArr[0].skill.push( {
//     text: '吃吃吃',
//     lv: 6
// }))
// console.log(vm.objArr[0].skill)

console.log('-----vm.objArr[0].skill.splice(1,0)-----')
console.log(vm.objArr[0].skill.splice( 1,1))
console.log(vm.objArr[0].skill)

vue/index.js

import {initState} from './init'
function Vue(options) {
    this._init(options)
}
// vue的初始化
Vue.prototype._init = function (options) {
    var vm = this;
    vm.$options = options;
    initState(vm);
}
export default Vue;

vue/init.js

import proxyData from "./proxy";
import observe from "./observe";
function initState(vm) {
    var options = vm.$options;
    if (options.data) {
        initData(vm);
    }
}
function initData(vm) {
    var data = vm.$options.data;
    // 判断data是对象还是方法，如果是方法，取他的返回值并且把this指向vm，如果是对象，那不用处理，如果啥也不是就默认给空对象
    // 并且再声明一个_data用于代理
    data = vm._data = typeof data === 'function' ? data.call(vm) : data || {};
    for (var key in data){
        proxyData(vm,'_data', key)
    }
    observe(vm._data)
}
export {
    initState
}

vue/observe.js

// 观察者
import Observer from "./observer";
function observe(data) {
    // 不是对象，或者为null 不进行观察
    if (typeof data !== 'object' || data === null) {
        return
    }
    return new Observer(data);
}
export default observe;

vue/observeArr.js

// 观察数组每一项
import observe from "./observe";
function observeArr(arr) {
    for (var i = 0; i < arr.length; i++) {
        observe(arr[i])
    }
}
export default observeArr;

vue/observer.js

import defineReactiveData from './reacitive'
import {arrMethods} from './array';
import observeArr from "./observeArr";
function Observer(data) {
    if (Array.isArray(data)) {
        data.__proto__ = arrMethods;
        // data可能还包含数组，使用递归观察
        observeArr(data);
    } else {
        // 观察对象
        this.walk(data)
    }
}
Observer.prototype.walk = function (data) {
    var keys = Object.keys(data);
    for (var i = 0; i < keys.length; i++) {
        var key = keys[i],
            value = data[key];
        defineReactiveData(data, key, value);
    }
}
export default Observer;

vue/proxy.js

// 代理vm._data
function proxyData(vm,target,key) {
    Object.defineProperty(vm,key,{
        get() {
            // 如访问的是vm.xxx 那么 get方法返回的会是vm._data.xxx
            return vm[target][key];
        },
        set(v) {
            // 如设置的是vm.xxx=v 那么 set方法会执行vm._data.xxx = v
            vm[target][key] = v
        }
    })

}
export default proxyData;

vue/reactive.js

// 处理响应式
import observe from "./observe";

function defineReactiveData(data, key, value) {
    // value可能还会是个数组 对象 继续判断观察
    observe(value);
    Object.defineProperty(data, key, {
        get() {
            console.log('响应式数据获取',value)
            return value
        },
        set(v) {
            if (value === v) {
                return
            }
            console.log('响应式数据设置',v)
            // 设置的内容可能也是一个数组或者对象，仍然需要继续判断观察
            observe(v);
            value = v;
        }
    })
}
export default defineReactiveData;

vue/config.js

// 定义哪些是会改变原数组的方法
var ARR_METHODS = [
    'push',
    'pop',
    'shift',
    'unshift',
    'slice',
    'sort',
    'reserve'
]
export {
    ARR_METHODS
}

vue/array.js

import {ARR_METHODS} from './config'
import observeArr from "./observeArr";

var originArrMethods = Array.prototype,
    arrMethods = Object.create(originArrMethods);
ARR_METHODS.map(function (method) {
    arrMethods[method] = function () {
        // 将类数组转换成数组
        var args = Array.prototype.slice.call(arguments),
            rt = originArrMethods[method].apply(this, args),
        newArr;
        switch (method) {
            case 'push':
            case 'unshift':
                newArr = args;
                break;
            case 'splice':
                newArr = args.slice(2);//拿到添加的那一项
                break;
            default:
                break;
        }
        newArr && observeArr(newArr);
        return rt;
    }
});
export {
    arrMethods
}

实现对象以及数组的观察，对数组的方法处理后新增元素进行观察，并且对数组对象进行深度观察

src/index.js进行测试运行

流程图

【03】
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue知识点】——Vue2和Vue3的数据劫持
m0_50785976的博客
10-21 2033
Vue2的Object.defineProperty和Vue3的Proxy实现数据劫持
Vue-Object.defineProperty:Vue源码解析之手写Vue源码-源码解析
03-24
本篇文章通过学习文档及视频教程实现手写一个简易的Vue原始码实现数据双向绑定，解析指令等。 几种实现双向绑定的做法 目前几种主流的mvc（vm）框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向...
手写Vue2响应式框架之数据劫持
W215731932的博客
09-12 856
大家好，我是小傲。这是 **手写 Vue2 响应式框架** 系列的第一篇，本篇将讲解 Vue2 是如何通过 defineProperty 完成对数据的劫持和递归操作，所有示例代码见文末。
浅谈Vue2数据劫持
vike_123的博客
09-24 1424
今天我们一起来看看Vue2中数据劫持的方法 ps:本章脱离vue2单讲数据劫持 什么是数据劫持 对属性的读取和修改拦截 简单来说就是数据的任何变化都要能监测到，这样才能根据数据变化做对应操作 为什么要用数据劫持 Vue2中data里的数据都是响应式数据，数据一经更改，页面上的数据就会进行局部更新 如果不进行数据劫持，不知道数据状态就无从更新数据 Vue2中数据劫持使用了Object.defineProperty方法 使用Object.defineProperty可以给对象
动手写写Vue的数据劫持
nnni
03-15 228
一、引 周末开写， IG NB！ 二、介绍 这里学习的是 Vue 2.x 下双向绑定的方法，是 数据劫持 + 订阅发布者模式。用 Object.defineProperty(obj,prop,descriptor) 方法去绑定 data 中的值，然后在发现值变化的时候触发更新函数，去更新视图。 2.1介绍下函数 Object.defineProperty(obj,key,descriptor) ...
Vue2实现数据劫持
weixin_48142622的博客
10-12 547
【代码】Vue2实现数据劫持。
vue-source-code:手写vue源码-vue source code
03-24
Vue的响应式系统是其独特魅力之一，它基于数据劫持和发布订阅模式，当数据发生变化时，视图能够自动更新。这一功能主要由`Dep`（依赖）和`Observer`（观察者）实现，它们监控数据变化，并通过`Watcher`（监视器）将...
【手写 Vue2.x 源码】第五篇 - 数组的劫持
01-09
文章：【手写 Vue2.x 源码】第五篇 - 数组的劫持 链接：、https://blog.csdn.net/ABAP_Brave/article/details/128566890 内容：本篇主要介绍了 Vue 数据初始化流程中，数组类型的数据劫持，核心有以下几点： 出于对...
【手写 Vue2.x 源码】第十篇 - 数组数据变化的观测情况
01-12
文章：【手写 Vue2.x 源码】第十篇 - 数组数据变化的观测情况 链接：https://brave.blog.csdn.net/article/details/128601406 内容：第十篇 - 数组数据变化的观测情况； 实现了数组数据变化被劫持后，已重写原型...
vue2.x 对象劫持的原理实现
01-19
目标：手写迷你版Vue 一：使用rollup打包,打包后的代码体积更小，更适合写框架源码的打包 npm i rollup -D 二：安装babel相关的包，以及实现静态服务，设置环境变量的包 npm i @babel/core @babel/preset-env ...
实现简易版vue2（数据劫持，观察者，发布订阅）
furfur-jiang的博客
04-22 294
仅笔记使用，如果想要下面代码的视频，关注公众号“程序江”，回复001 html使用下面js文件的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
VUE2.0 数据劫持
lx392118613的博客
08-05 325
vue 数据劫持
Vue2.0数据劫持
m0_61839558的博客
03-02 117
Vue2.0数据劫持
es5 实现简单的数据劫持
wy的博客
09-09 235
代码有任何疑问之处欢迎留言。 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> ...
Vue源码 - 2.数据劫持
qq_35432512的博客
07-14 174
新建src/index.js import { initMixin } from "./init" function Vue(options) { // 运行 Vue 的初始化操作 this._init(options) } // 通过引入文件的方式给 Vue 原型上添加方法 initMixin(Vue) export default Vue 新建src/init.js import { initState } from './state'; // 在原型上添加一个 init 的方.
Vue数据劫持
qq_45633169的博客
03-19 136
vue 数据劫持详解_weixin_33757609的博客-CSDN博客 方法:劫持Object.defineProperty中的get,set方法,利用这两个方法,监测数据改变的同时,提醒Vue需要去解析模板,生成虚拟DOM,开始接下来的一系列操作 这同时也是数据监测的原理,只不过数据和对象的监测有一点点不一样 ...
vue2数据劫持（源码剖析）
最新发布
IT_Mr_wu的博客
04-16 860
vue2中如何实现对data数据的监听，以及数组的添加、删除等方法的监听和更新视图
vue2原理--数据劫持
weixin_52786170的博客
02-24 849
vue2响应式原理 vue2数据劫持 vue数据劫持 vue响应式原理
手写Vue3.0 数据劫持 响应式数据（深浅）
weixin_48969871的博客
03-07 137
vue3.0 手写 shallowReactive与reactive，响应式数据
vue2-org-tree动态加载数据
09-14
你可以使用 `vue2-org-tree` 组件来动态加载数据。首先，你需要安装并引入 `vue2-org-tree` 组件： ```bash npm install vue2-org-tree ``` 然后，在你的 Vue 组件中，你可以按照以下方式动态加载数据： ```vue <template> <div> <org-tree :data="treeData"></org-tree> </div> </template> <script> import OrgTree from 'vue2-org-tree'; export default { components: { OrgTree }, data() { return { treeData: [] }; }, mounted() { this.loadData(); }, methods: { loadData() { // 在这里从服务器或其他数据源获取数据 // 并将数据赋值给 treeData // 注意，treeData 应该是一个符合组件要求的树形数据结构 } } }; </script> ``` 在 `loadData` 方法中，你可以从服务器或其他数据源获取数据，并将数据赋值给 `treeData`。请确保 `treeData` 是一个符合 `vue2-org-tree` 组件要求的树形数据结构。 这样，当组件加载完成时，`vue2-org-tree` 组件会根据 `treeData` 动态渲染树形结构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值