Vue面试题28：ref和reactive有何差异？（总结自B站up主‘前端杨村长’视频，仅供自用学习）

• 回答思路

  • 1.两者概念；
  • 2.两者使用场景；
  • 3.两者异同；
  • 4.使用细节；
  • 5.原理；

• 回答范例

  • 1.ref 接收内部值（inner value）返回响应式Ref对象，reactive返回响应式代理对象；
  • 2.从定义上看ref通常用于处理单值的响应式，reactive用于处理对象类型的数据响应式；
  • 3.两者均是用于构造响应式数据，但是ref主要解决原始值的响应式问题；
  • 4.ref返回的响应式数据在JS中使用需要加上.value才能访问其值，在视图中使用会自动解包，不需要.value；ref也可以接收对象或数组等非原始值，但内部依然是reactive实现响应式；reactive内部如果接收Ref对象会自动解包；使用展开运算符（…）展开reactive返回的响应式对象会失去响应性，可以结合toRefs()将值转换为Ref对象之后再展开；
  • 5.reactive内部使用Proxy代理传入对象并拦截该对象各种操作（trap），从而实现响应式；ref内部封装一个Reflmpl类，并设置get value/set value，拦截用户对值的访问，从而实现响应式；