vue2和vue3实现响应式原理

vue2实现响应式原理

Object.defineProperty()来实现,它的作用是精准修改或增加对象上的一个属性

这个方法接收三个参数

1.需要定义的属性所在的当前对象

2.需要定义的属性名

3.属性描述符

属性描述符中有6个配置项(默认值:1,3,4为undefined,2,5,6为false)

1.value 

2.writable

3.get

4.get

5.configrable

6.enumerable ​​​​​​

属性描述符分为两种:数据描述符,存取描述符,且这两种描述符不能混用,一次只能用其中的一种,这两种的区别

1.数据描述符:有两个属性(value,writable)

vue2和vue3实现响应式原理_第1张图片 

vue2和vue3实现响应式原理_第2张图片

vue2和vue3实现响应式原理_第3张图片

vue2和vue3实现响应式原理_第4张图片 

2.存取描述符 :是由getter、setter 函数功能来描述的属性

get:返回值作为属性值,默认值为undefined

set: 接收唯一参数(修改的新值),默认值也为undefined

configrable: 默认值为false,不能删除当前属性,为true时,当前属性可以被删除,存在的问题就是删除属性时,尽管返回值为true,但不会捕获成功,不会引起页面的自动更新。(vue2处理响应式数据存在的问题)

vue2和vue3实现响应式原理_第5张图片

vue2和vue3实现响应式原理_第6张图片

vue3实现响应式原理(Reflect和proxy配合一起使用,Refelct是避免重复定义同一个属性时出现错误)

proxy(代理):这种方式解决了vue2中删除数据时不能自动更新页面的问题

vue2和vue3实现响应式原理_第7张图片

 

 

     

你可能感兴趣的:(关于vue,vue)