vue2-手写数据劫持

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

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

npm init -y

2、下载webpack依赖

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

3、新建相关目录 4、public/index.html

    
    Title

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