Vue大佬在JavaScript的“简历”中筛选出一个优秀的人才：Object.defineProperty

vlambda
2022-04-27

Vue大佬在JavaScript的“简历”中筛选出一个优秀的人才：Object.defineProperty

反正这么卷了，不在乎继续卷一下，万一能加个工资呢？！

前端三大框架vue、react和angular，虽然都接触过，但是要说他们是怎么做都，可能大部分人能说出一些大概念，什么数据双向绑定，试图数据分离甚至能够滚瓜熟练地使用各个框架地API。

但是要是问起来，某某API是怎么做地，原理是怎样，你会不会自己写一个VUE地实现。可能大部分人都望而却步（包括我自己）。

所以最近心血来潮，去拆一拆Vue的一些原理，在这里做一些笔记以示来过，留下点东西，并且希望能做到简单易懂的比喻吧。如果能帮助到爱学习得人，那就更好了不是？并且欢迎指正内容的错误。更新频率看时间，看工作状态来，希望做到的效果是看过文章得朋友们，能够有个启发点，可以接着我的笔记继续去研究。

本故事基于Vue2.0去写这系列的学习笔记，主要是去学习里面的思想。

初识Vue这个大佬的时候，有个很明显的感觉：Vue这个大佬，有点东西啊，用起来太方便了，爱了爱了！

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!'  }, methods:{ changeMessage(){ this.message = "Hi Zhang Brother!"  }  }})

<div id="app"> {{ message }}</div

这两段代码来自Vue的文档，用过的人都知道，data里面的message变量，就直接现实在了div里面了，页面上就直接出现了“Hello Vue！”字样。

当我调用一下changeMessage()方法的时候，这个页面上的字样，就变成了“Hi Zhang Brother!”。这个就让新人们感觉特别方便给力！

到这里我们就遇到第一个比较重要的问题：Vue这个大佬是怎么就知道了message数据变化了呢？

大佬Vue进行了夜以继日地苦思冥想，终于找到了解决思路是：想办法监听这个“message”在什么时候什么位置做了什么事情！相当于要找个机制让Vue知道这个“message”到底在干嘛。用行话说就是：变化侦测

大佬Vue已经定下了战略方针：找人盯着“message”，监视他的一举一动，什么时候出过门，和谁见了面，几点上过厕所，吃过什么饭，和谁吃的饭！必须一五一十地记下来，并且准时将报告放到大佬Vue的办公桌前！

战略方针有了，下一个问题就找谁去盯着“message”呢？于是大佬Vue又头悬梁锥刺股，夜以继日地翻着《JavaScript从入门到放弃》，最后终于找到了：

Object.defineProperty()

我这就叫他O.dp吧！

在介绍O.dp是怎么为大佬Vue工作之前，先看看它的简历：

Object.defineProperty(obj, prop, descriptor)的简历
自我介绍：我能修改一个对象的属性或者给这个对象新增不同的属性，并且返回这个对象，就问牛不牛？！
参数	解释	必传
obj	要修改的目标对象	必需
prop	需定义或修改的属性的名字	必须
descriptor	目标属性所拥有的特性	必须
descriptor参数的的详情
value	prop属性对应的值	默认｜可选
writable	prop属性的值是否可以修改	true ｜ false
enumerable	prop的属性能否被枚举（也就是说如果设置成false，在for...in或者Object.keys()循环中是找不到这个prop的）	true ｜ false‍‍
configurable	是否可以删除目标属性或是否可以再次修改属性的特性（writable, configurable, enumerable）	false ｜ true
get	getter的方法	function (){} \| undefined
set	setter的方法	function (newVal){} \| undefined
ps：当设置了get/set的方法，value和writable就不能使用了

‍‍‍‍

举个🌰：

let testData = { name:'zhangsan',age:10}
const monitorData = (data,key,val)=>{ Object.defineProperty(data,key,{ enumerable:true,configurable:true, get(){ console.log("testData getter",val) return val }, set(newVal){ console.log("testData setter") if(val === newVal)return console.log("testData setter newVal",newVal) val = newVal } })}//检测 testData下的name的数据变化monitorData(testData,'name',testData.name) console.log(testData.name) //-输出--> testData getter zhangsan  //-输出--> zhangsan  console.log(testData.name） 打印的

当O.dp的简历放到了大佬Vue的办公桌前，Vue大佬对着上面的get、set方法赞许地点点头！并且说到：这就是我要的人！马上安排入职。

到底Vue大佬看上了它什么？O.dp又是怎样帮大佬解决了数据的变化侦测问题？下期见。

vlambda博客
学习文章列表