要记住的前端knowledge(简记版)

1.Vue响应式原理

• Vue2响应式原理：通过defineProperty捕获对象中属性的变化，读取属性调用get方法，修改属性时调用set(value)方法。缺点：1.只能捕获读取、修改方法，无法捕获添加、删除操作；2.需要为每个属性实现get、set(value)方法。
• Vue3响应式原理：通过proxy(代理)捕获对象中属性的变化，包括：读、写、添加和删除。可以用reflect实现对属性的操作，对于错误，可以及时抛出。

2.reactive对比ref

• 从定义数据角度对比：ref定义基本类型数据；reactive定义对象(或数组)类型数据。ref定义对象（或数组）类型数据时,内部会自动通过reactive转为代理对象。
• 从原理角度对比：ref通过Object.defineProperty的get与set(value)来实现响应式。reactive通过proxy实现响应式, 并通过reflect操作源对象内部的数据。
• 从使用角度对比：ref定义的数据：操作数据需要 .value ，读取数据时模板中直接读取不需要 .value。reactive均不需要 .value。
• 从监视角度对比 ：用reacive定义的响应式数据，watch无法正确的获取oldValue，会强制开启深度监视。