簡單的搭建一下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文件中：

const path = require(’path’);const HtmlWebpackPlugin = require(’html-webpack-plugin’);module.exports = { entry: ’./src/index.js’, output: { filename: ’bundle.js’, path: path.resolve(__dirname, ’dist’) }, resolve: { modules: [ path.resolve(__dirname, ’’), path.resolve(__dirname, ’node_modules’) ] }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, ’public/index.html’) }) ]}

ok，基本配置好webpack就可以開始正題了。

在v2中，通過new Vue(el, options)的方式，完成vue的實例化。我們需要新建一下vue文件，把數據劫持的方法統一到vue中。

新建一個vue/index.js，作為數據劫持的入口文件。

import {initState} from ’./init.js’;function Vue (options) { this._init(options); // 數據初始化}Vue.prototype._init = function (options) { var vm = options; // 保存一下實例 vm.$options = options; // 實例掛載 initState(vm); // 實例初始化}

新建一個init.js文件初始化實例：

初始化的時候注意幾個問題：

1. 需要分別對computed，watch， data進行處理。

2. 不要在用戶定義的data上直接修改。

3. 官方指定data為函數，是為了保證組件內部有自己的作用域不會有污染，直接訪問data函數是不行的，需要自動執行。data也可以是對象(需要考慮到這個情況)

4. 這種方式獲取data是通過vm._data.xxx 但是在vue中不需要data來獲取，所以這里需要攔截重寫。

5. 內部的引用類型需要遞歸

function initState (vm) { var options = vm.$options; // 獲取options if (options.data) { initData(vm); // 因為computed，watch都需要在這里初始化，所以針對data初始化};function initData (vm) { var data = vm.$options.data; // 對data重新賦值，不要改變用戶定義的data data = vm._data = typeof data === ’function’ ? data.call(vm) : data || {}; for (var key in data) { proxyData(vm, ’_data’, key); // 對data的取值重新賦值 }; observe(vm._data); // 對data內部進行觀察}

新建一個proxy.js作為代理層:

function proxyData(vm, target, key) { Object.defineProperty(vm, key, { get () { // 這里做了攔截： vm.xxx => vm._data.xxx return vm[target][key]; }, set(newValue) { // vm.xxx = yyy ===> vm._data.title = yyy vm[target][key] = newValue; } }) }export default proxyData;

處理好了訪問問題，現在需要遞歸一下data內部元素。obseve(vm._data);

新建一個observe.js:

function observe (data) { if (typeof data !== ’object’ || data = null) return; return new Observer(data); // 如果是應用類型，直接添加一個觀察者}

新建一個觀察者：observer.js

function Observer(data) { if (Array.isArray(data)) { // 處理數組 data._proto_ = arrMethods; } else { // 處理對象 this.walks(data); }}Observer.prototype.walks = function (data) { let keys = Object.keys(data); // 拿到data下面所有的key，并且還是一個數組 for (var i = 0 ; i < keys.length ; i++) { var key = keys[i]; var value = data[key]; defineReactiveData(data, key, value); // 每個重新生成響應式數據 }}

新建一個reactive.js 處理對象等響應式

function defineReactiveData (data, key, value) { observe(value); // 對子元素接著遞歸。 Object.defineProperty(data, key, { get() { return value; }, set (newValue) { if (newValue === value) return; value = newValue; // 觸發更改 } } )};

ok，這里處理好了對象的數據劫持，剩余的需要處理數組了

在V2中采用重寫原型上的7種方法，做到數據劫持。

劫持數組：

新建一個Array.js文件：

import {ARR_METHODS} from ’./config.js’; // 7個數組方法的合集import observeArr from ’./observeArr.js’;var originArrMethods = Array.prototype, arrMethods = Object.create(originArrMethods); ARR_METHODS.map(function (m) { arrMethods[m] = function () { var args = Array.prototype.slice.call(arguments); // 類數組轉為數組 var rt = originArrMethods[m].apply(this, args); var newArr; switch (m) { case ’push’: case ’ushift’: newArr = args; case ’splice’:newArr = args.slice(2);break; default: break; }; newArr && observeArr(newArr); return rt; } }); export { arrMethods }

observeArr(newArr)： 數組也可能有嵌套，所以需要對數據進行觀察。

import observe from './observe';function observeArr (arr) { for (var i = 0 ; i < arr.length ; i++) { observe(arr[i]); // 重新走到了observe上。 }}export default observeArr;三：總結

基本流程就是這樣的，不僅僅是object.defineProperty對數據進行get和set這么簡單。總結一下主要流程：

(1): 在初始化的時候：保存一下實例，掛載實例。通過initState方法來初始化數據，這里主要是data數據，也有computed和watch需要處理。

(2): 調用initData()； 重新賦值data，然后執行data，修改用戶獲取data屬性的寫法統一為this.xxx同時observe(data)

(3):在observe(data)的時候需要對data進行判斷，如果是引用類型需要加上一個觀察者observer，同時在觀察者終判斷data是為數組還是對象，對象直接重新觸發object.defineProperty，同時對內部重新observe。如果是數組直接重新7種數組方法，然后對數組內部接著observe。

以上就是手寫Vue2.0 數據劫持的示例的詳細內容，更多關于手寫vue 數據劫持的資料請關注好吧啦網其它相關文章！