Vue3之setup()、reactive、ref

2023-10-25 05:14:39

在Vue3中，将Vue2.0的option API制作成hook函数，比如watch,compute方法等，在Vue3中新增的setup()方法中，可以以函数的形式去使用Vue2.0的watch,computed方法，本文将简单介绍Vue3中的setup()、reactive、ref，并给读者一个简单的例子来帮助理解。

什么是setup()

在Vue3中，将Vue2.0的option API 制作成hook函数，比如watch,compute方法等，在Vue3中新增的setup()方法中，可以以函数的形式去使用Vue2.0的watch,computed方法，setup()方法的第一个参数是props，props是父组件传递给子组件的数据，第二个参数是context，context是一个对象，包含了很多有用的属性和方法，比如attrs、slots、emit等。

什么是reactive

reactive()方法可以将一个普通对象转换成一个响应式对象，响应式对象的特点是，当它的属性发生改变时，视图也会自动更新。reactive()方法的用法很简单，只需要将要转换的对象作为参数传入即可，比如：

const obj = reactive({
  name: '张三',
  age: 18
})

上面的代码将一个普通对象转换成了一个响应式对象，当obj.name或obj.age发生改变时，视图也会自动更新。

什么是ref

ref()方法可以将一个值转换成一个响应式引用，响应式引用的特点是，当它的值发生改变时，视图也会自动更新。ref()方法的用法也很简单，只需要将要转换的值作为参数传入即可，比如：

const name = ref('张三')

上面的代码将一个字符串值转换成了一个响应式引用，当name的值发生改变时，视图也会自动更新。

举个例子

<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script>
import { reactive, ref, setup } from 'vue'

export default {
  setup() {
    const name = ref('张三')
    const age = reactive({
      value: 18
    })

    const changeName = () => {
      name.value = '李四'
    }

    const changeAge = () => {
      age.value++
    }

    return {
      name,
      age,
      changeName,
      changeAge
    }
  }
}
</script>