浅析vue3响应式数据与watch属性

  1. 是Vue3的 composition API中2个最重要的响应式API
  2. ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式)
  3. 如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象
  4. ref内部: 通过给value属性添加getter/setter来实现对数据的劫持
  5. reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据
  6. ref的数据操作: 在js中要.value, 在模板中不需要(内部解析模板时会自动添加.value)



计算属性与监视

computed函数:

  • 与computed配置功能一致
  • 有getter/setter

与watch配置功能一致

  • 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
  • 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
  • 通过配置deep为true, 来指定深度监视

watchEffect函数

  • 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
  • 默认初始时就会执行第一次, 从而可以收集需要监视的数据
  • 监视数据发生变化时回调



到此这篇关于vue3响应式数据与watch属性的文章就介绍到这了,更多相关vue3 watch属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(浅析vue3响应式数据与watch属性)