ref和reactive

1. ref方法

ref方法用于为数据添加响应式状态，可以支持基本的数据类型，也可以支持复杂的对象数据类型，是Vue 3中推荐的定义响应式数据的方法，也是最基本的响应式方法，需要注意的是：

  • 获取数据值的时候需要加.value。
  • ref的本质是原始数据的拷贝，改变简单类型数据的值不会同时改变原始数据。

使用方法如实例代码所示。

<div id="app">
  <component-b  />
</div>
const componentB = {
  template:'<div>{{name}}</div>',
  setup(props) {

    // 为基本数据类型添加响应式状态
    const name = Vue.ref('John')

    let obj = {count : 0};

    // 为复杂数据类型添加响应式状态
    const state = Vue.ref(obj)

    console.log(name.value) // 打印John

    console.log(state.value.count)// 打印0

    let newobj = Vue.ref(obj.count)

    // 修改响应式数据不会影响原数据
    newobj.value = 1

    console.log(obj.count)// 打印0

    return {
      name
    }
  }
}
Vue.createApp({
  components: {
    'component-b': componentB
  }
}).mount("#app")

需要注意的是，改变的这个数据必须是简单数据类型，一个具体的值，这样才不会影响到原始数据，如上面的代码中的obj.count。

2. reactive方法

ref方法用于为复杂数据添加响应式状态，只支持对象数据类型，需要注意的是：

  • 获取数据值的时候不需要加.value。
  • reactive的参数必须是一个对象，包括JSON数据和数组都可以，否则不具有响应式。
  • 和ref一样，reactive的本质也是原始数据的拷贝。

ref本质也是reactive，ref(obj)等价于reactive({value:obj})，使用方法如示例代码所示。

<div id="app">
  <component-b  />
</div>
const componentB = {
  template:'<div>{{state.count}}</div>',
  setup(props) {

    // 为复杂数据类型添加响应式状态
    const state = Vue.reactive({count : 0})

    console.log(state.count)// 打印0

    return {
      state
    }
  }
}
Vue.createApp({
  components: {
    'component-b': componentB
  }
}).mount("#app")

reactive和ref都是用来定义响应式数据的。reactive更推荐去定义复杂的数据类型，不能直接解构，ref更推荐定义基本类型。ref可以简单地理解为是对reactive的二次包装，ref定义的数据访问的时候要多一个.value。