如何通过JavaScript实现基础的数据监听功能？

本文共计545个文字，预计阅读时间需要3分钟。

目录概述第一步第二步为什么需要单独的_data？给data添加一点数据格式化初始值格式化object对象监听值概述主要使用Object.defineProperty实现类似Vue的数据绑定。

第一步const d=d;

目录

• 概述
• 第一步
• 第二步
• 为什么需要单独的_data？
• 给data多添加一点数据
• 格式化初始值
• 格式化object对象，监听值

概述

主要是用Object.defineProperty实现类似vue的数据绑定。

第一步

const data = { name: "tom", age: 14 } Object.defineProperty(data, "name", { get(){ return "name被读取了" }, set(val){ console.log(‘我被赋值了‘,val) } }) //将此代码放到浏览器控制台查看效果 console.log(data.name )

输出的data.name并不是tom，而是name被读取了，因为defineProperty对data的name字段进行的监听劫持，修改了，name字段本应该返回的值。