文章詳情頁(yè)

Vue2 中的數(shù)據(jù)劫持簡(jiǎn)寫(xiě)示例

瀏覽：271日期：2022-06-02 08:22:40

package.json 相關(guān)依賴

我們今天要編寫(xiě)的項(xiàng)目通過(guò)需要使用 Webpack 進(jìn)行編譯，package.json 相關(guān)依賴如下：

{  "scripts": {    "dev": "webpack-dev-server",    "build:": "webpack"  },  "devDependencies": {    "html-webpack-plugin": "^4.5.2",    "webpack": "^4.46.0",    "webpack-cli": "^3.3.12",    "webpack-dev-server": "^3.11.3"  }}

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")  },  devtool: "source-map",  resolve: {    // 表示解析模塊引入的時(shí)候先從當(dāng)前文件夾尋找模塊，再去 node_modules 找模塊    modules: [      path.resolve(__dirname, ""),       path.resolve(__dirname, "node_modules")    ]  },  plugins: [    new HtmlWebpackPlugin({      template: path.resolve(__dirname, "public/index.html")    })  ]};

public/index.html 文件內(nèi)容

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title></title>  </head>  <body>    <div id="app"></div>  </body></html>

全部文件目錄結(jié)構(gòu)

好了，接下來(lái)我們就開(kāi)始發(fā)車！

實(shí)例一個(gè)模擬的 Vue 應(yīng)用

首先，我們需要編寫(xiě)我們的入口文件 index.js，該文件很普通主要就是實(shí)例一個(gè)模擬的 Vue 應(yīng)用：

// index.js// 我們?cè)?webpack.config.js 中進(jìn)行了配置，所以這里優(yōu)先在當(dāng)前目錄下尋找 vue 文件，也就是我們的 vue/index.js 文件import Vue from "vue"; let vm = new Vue({  el: "#app",  data() {    return {      title: "學(xué)生列表",      classNum: 1,      teacher: ["張三", "李四"],      info: {a: {  b: 1}      },      students: [{  id: 1,  name: "小紅"},{  id: 2,  name: "小明"}      ]    };  }});console.log(vm);

vue/index.js 文件主要是負(fù)責(zé)初始化內(nèi)容

// src/sindex.jsimport { initState } from "./init";function Vue(options) {  this._init(options);}Vue.prototype._init = function (options) {  // this 指向當(dāng)前實(shí)例對(duì)象  var vm = this;  // 我們把 new Vue() 時(shí)候傳遞的數(shù)據(jù)統(tǒng)稱為 options  // 并且掛載到 Vue 的實(shí)例對(duì)象上  vm.$options = options;  // 調(diào)用 initState 初始化 data 數(shù)據(jù)  initState(vm);};export default Vue;

initState方法

vue/init.js 文件暴露出一個(gè)initState方法，該方法主要是處理初始化的數(shù)據(jù)：

// vue/init.jsimport proxyData from "./proxy";import observer from "./observe"function initState(vm) {  var options = vm.$options;  // 如果 options 中存在 data 屬性，我們才會(huì)繼續(xù)處理  if (options.data) {    initData(vm);  }}function initData(vm) {  var data = vm.$options.data;  // 把 data 數(shù)據(jù)單獨(dú)保存到 Vue 的實(shí)例化對(duì)象上，方便我們獲取  // 如果 data 是一個(gè)函數(shù)，我們需要執(zhí)行返回得到返回的對(duì)象  data = vm._data = typeof data === "function" ? data.call(vm) : data || {};  // 遍歷 data 對(duì)象，通過(guò) proxyData 對(duì)數(shù)據(jù)進(jìn)行攔截  for (const key in data) {    // 傳入的參數(shù)分別是：當(dāng)前實(shí)例、key值（也就是 vm._data）、data 中的 key 值（例如 vm._data.title）    proxyData(vm, "_data", key);  }  // 調(diào)用觀察者模式  observer(vm._data)}export {   initState};

以上代碼，我們通過(guò)proxyData對(duì)data中的數(shù)據(jù)進(jìn)行攔截，詳情如下：

// vue/proxy.jsfunction proxyData(vm, target, key) {  // 當(dāng)訪問(wèn) vm.title 的時(shí)候轉(zhuǎn)換為 vm._data.title  //（請(qǐng)記住這句話！！！）  Object.defineProperty(vm, key, {    get: function () {      return vm[target][key];    },    set: function (newVal) {      vm[target][key] = newVal;    }  });}export default proxyData;

我們還調(diào)用了observer方法進(jìn)行事件訂閱，詳細(xì)如下：

// vue/observe.jsimport Observer from "./observer"function observe(data) {  // 判斷只處理對(duì)象，如果不是對(duì)象直接返回  if (typeof data !== "object" || data === null) {    return false;  }  // 觀察數(shù)據(jù)  return new Observer(data)}export default observe;

核心文件vue/observer.js

接下來(lái)就是我們的核心文件vue/observer.js，該文件主要負(fù)責(zé)對(duì)數(shù)據(jù)類型進(jìn)行判斷，如果是數(shù)組就需要單獨(dú)處理數(shù)組，這個(gè)我們后面再說(shuō)：

// vue/observer.jsimport defineReactiveData from "./reactive";import { arrMethods } from "./array";import observeArr from "./observeArr";// 這個(gè)方法會(huì)在多個(gè)地方調(diào)用，請(qǐng)記住這個(gè)方法以它的作用function Observer(data) {  // 如果 data 是一個(gè)數(shù)組，那面需要單獨(dú)處理  if (Array.isArray(data)) {    // 給數(shù)組新增一層原型    data._proto__ = arrMethods;    // 循環(huán)數(shù)組的每一項(xiàng)，然后讓每一項(xiàng)都調(diào)用 Observer 方法進(jìn)行訂閱    observeArr(data)  } else {    // 處理對(duì)象    this.walk(data);  }}Observer.prototype.walk = function (data) {  // 獲取到 data 全部的 key  // 也就是我們定義的 ["title", "classNum", "teacher", "info", "students"]  let keys = Object.keys(data);  for (var i = 0; i < keys.length; i++) {    let key = keys[i];    let value = data[key];    // 攔截 data 數(shù)據(jù)    // 分別傳入?yún)?shù)為：vm._data、data 中的 key、data 中 key 對(duì)應(yīng)的 value    defineReactiveData(data, key, value);  }};export default Observer;

以上代碼，我們分別對(duì)數(shù)組和對(duì)象執(zhí)行不同的操作，我們先來(lái)看對(duì)象的操作：

在Observer構(gòu)造函數(shù)中我們新增了一個(gè)walk方法，該方法獲取到了所有的key值，然后調(diào)用了defineReactiveData進(jìn)行處理。

// vue/reactive.jsimport observe from "./observe";function defineReactiveData(data, key, value) {  // 例如 info.a 還是個(gè)對(duì)象，那么就遞歸觀察  observe(value);  // 這里的 data 是 vm._data，所以這里攔截的也是 vm._data  Object.defineProperty(data, key, {    get() {      console.log(`?? 響應(yīng)式獲取：data.${key}，`, value);      return value;    },    set(newVal) {      console.log(`

JavaScript

上一條：vue3怎么數(shù)據(jù)監(jiān)聽(tīng)watch/watchEffect下一條：Vue-cli3中使用TS語(yǔ)法示例代碼

排行榜

					
					基于Java實(shí)現(xiàn)記事本功能
IntelliJ IDEA導(dǎo)入jar包的方法
docker鏡像完全卸載的操作步驟
IntelliJ IDEA配置Tomcat服務(wù)器的方法
idea刪除項(xiàng)目的操作方法
使用Maven 搭建 Spring MVC 本地部署Tomcat的詳細(xì)教程
IntelliJ IDEA恢復(fù)刪除文件的方法
IntelliJ IDEA調(diào)整字體大小的方法
IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法
IntelliJ IDEA安裝插件的方法步驟
idea打開(kāi)多個(gè)窗口的操作方法
				