零基础入门Vue之画龙点睛——再探监测数据.docx

第

零基础入门Vue之画龙点睛——再探监测数据

上一节：零基础入门Vue之影分身之术列表渲染渲染原理浅析

虽然我深知，大佬告诉我先学应用层在了解底层，以应用层去理解底层，但Vue的数据如何检测的我不得不去学

否则，在写代码的时候，可能会出现我难以解释的bug

对此，本篇文章，将记录我对Vue检测数据的理解

对于Vue检测数据的实现，我打算由浅入深的去记录

JavaScript实现数据监控

实现简单的数据监测（浅浅的响应式）

Vue对哪些数据做了监测，哪些没有？

JavaScript的数据检测

Object.defineProperty()静态方法会直接在一个对象上定义一个新属性，或修改其现有属性，并返回此对象。

熟悉JavaScript的人，应该在一个月黑风高的夜晚都了解过Object上的一个方法：Object.defineProperty()

而Vue大部分的数据监测都是依赖于这个方法来实现的

ps：本篇不会深度探讨这个静态方法的用法，仅仅对其get和set方法的用法讲解，为下一章节做铺垫

Object.defineProperty(obj,prop,descriptor)

obj：要添加新属性的对象

prop：要添加属性的名称（一般为字符串）

descriptor：这个属性的相关描述（配置）

假设现在有一个对象如下：

letperson={

name:张三

现在，我试图这个person对象新增一个age属性，那么我可以这么干

Object.defineProperty(person,age,{

value:18//设置默认的值

此时输出person时可以看到

{name:张三,age:18}

题外话：关于为什么是点开后为什么age属性与其他属性颜色不一样，可以将enumerable:true，使它可迭代

但这真的是一个普通属性了吗？并不会，当我试图

person.age=20

console.log(person.age);//18

似乎修改不了数据，因为少了一个配置项

Object.defineProperty(person,age,{

value:18,

writable:true//配置为可修改

此时上述代码差不多等同于

person.age=18;//假设age没定义过，重新给person追加一个属性

用作属性getter的函数，如果没有getter则为undefined。当访问该属性时，将不带参地调用此函数，并将this设置为通过该属性访问的对象（因为可能存在继承关系，这可能不是定义该属性的对象）。返回值将被用作该属性的值。默认值为undefined。

从上面MDN上的话来说，当我们要用到对象上的某个属性时会调用getter，如果对象没有设置，则默认是undefined，当访问这个属性时，访问得到的结果将是getter返回的结果

我现在有一个需求：当age属性被读取时，就加1岁，并且输出变化后的值

在上述代码里面是完不成这个需求的，此时就需要用到get方法了，当读取时会自动调用get方法，我可以在那个里面进行数据的递增

注意：官网描述中，get不能与value或writable同时使用

定义实际年龄数据：_age

当读取person.age，get选择器返回_age，并且把_age递增

具体实现代码如下：

letage=18;//定义一个实际的年龄数据

letperson={//准备好目标对象

name:张三

Object.defineProperty(person,age,{

get(){

console.log(年龄即将递增一岁后：,age+1);

returnage,age++;

person.age

年龄即将递增一岁后：19

person.age

年龄即将递增一岁后：20

综上所述，当有人要读取某个属性的时候，可以对这个属性值做了处理在返回，或者是调用函数通知其他的事件触发等等

用作属性setter的函数，如果没有setter则为undefined。当该属性被赋值时，将调用此函数，并带有一个参数（要赋给该属性的值），并将this设置为通过该属性分配的对象。默认值为undefined。

set的用法正好和get方法对应，一个是读