浅谈Vue3中的ref和reactive

2023-11-21 02:13:38

Vue3中的ref和reactive

在Vue2中，我们经常使用.vue文件来定义组件，并在其中使用data选项来定义组件的状态。而在Vue3中，我们则可以使用setup函数来定义组件的状态。setup函数在组件的生命周期之前运行，它可以访问组件的props和上下文对象，并返回一个包含组件状态的对象。

const App = {
  setup() {
    const count = ref(0)

    const increase = () => {
      count.value++
    }

    return {
      count,
      increase
    }
  }
}

在上面的例子中，我们使用ref函数来定义一个名为count的响应式状态。count是一个引用类型，它的值是一个数字0。我们还定义了一个名为increase的方法，它可以增加count的值。

reactive函数也可以用来定义响应式状态，但它与ref函数有一些不同。reactive函数可以将一个普通的JavaScript对象转换成一个响应式对象，而ref函数只能将基本类型的值转换成响应式值。

const App = {
  setup() {
    const state = reactive({
      count: 0
    })

    const increase = () => {
      state.count++
    }

    return {
      state,
      increase
    }
  }
}

在上面的例子中，我们使用reactive函数将一个名为state的普通JavaScript对象转换成一个响应式对象。state对象包含了一个名为count的属性，它的值是一个数字0。我们还定义了一个名为increase的方法，它可以增加state.count的值。