reactive与ref-细节

• 都是Vue3的 composition API中2个最重要的响应式API

• ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式)

• 如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象

• ref内部: 通过给value属性添加getter/setter来实现对数据的劫持

• reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据

• ref的数据操作: 在js中要.value, 在模板中不需要(内部解析模板时会自动添加.value)

<template>
  <h2>reactive与ref-细节</h2>
  <h3>m1:{{m1}}</h3>
  <h3>m2:{{m2}}</h3>
  <h3>m3:{{m3}}</h3>
  <hr color="red" />
  <button @click="update">更新数据</button>
</template>
<script>
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
  name: 'App',
  setup() {
    // 用来定义基本类型的响应式数据
    const m1 = ref('abc')
    // 用来定义复杂类型的响应式数
    const m2 = reactive({
      name: '小强',
      wife: {
        name: '小甜甜'
      }
    })
    const m3 = ref({
      name: '小强',
      wife: {
        name: '小甜甜'
      }
    })
    console.log(m3)
    // 更新数据的方法
    const update = () => {
     //  console.log('哈哈')
     // m1.value+='===' // 可以正常渲染---响应式的数据
     // m2.wife.name+='=====' // 同上
     console.log(m1)
     m3.value.wife.name+='====='
    }
    return {
      m1,
      m2,
      m3,
      update
    }
  }
})
// ref中可以放入复杂类型的数据,返回来的数据是Ref类型的,但是内部的数据已经成为Proxy类型的代理对象数据
</script>