Vue 3 - day1学习笔记

setup() 函数

基本概念

setup() 是 Vue 3 Composition API 的入口点，在组件创建之前执行。

代码示例

<script lang="ts">
export default {
  name: 'Person',
  setup() {
    console.log(this) // undefined，Vue3弱化this
    
    let name = '张三'
    let age = 18
    let tel = '13888888888'
    
    function changeName() {
      name = 'zhang-san' // 修改了，但页面不会更新
    }
    
    return { name, age, tel, changeName }
  }
}
</script>

关键点

• setup() 中的 this 是 undefined
• 必须通过 return 将数据和方法暴露给模板
• 普通变量不是响应式的，修改后页面不会更新

setup 语法糖 + defineOptions

setup 语法糖基本概念

更简洁的 Composition API 写法，自动暴露顶层变量和函数。

<script lang="ts" setup>
defineOptions({
  name: 'Person123',
})

let name = '张三'
let age = 18
let tel = '13888888888'

function changName() {
  name = 'zhangsan' // 非响应式，页面不更新
}
</script>

defineOptions 详细介绍

功能：

• 在 <script setup> 中定义组件选项
• Vue 3.3+ 新增的宏函数
• 解决无法在 <script setup> 中直接设置 name 等选项的问题

支持的选项：

defineOptions({
  name: 'ComponentName',      // 组件名
  inheritAttrs: false,        // 是否继承属性
  components: { ... },        // 注册组件
  directives: { ... },        // 注册指令
  // 和其他组件选项
})

优势

• 代码更简洁
• 自动暴露变量和函数
• 不需要写 return 语句
• 可以在 <script setup> 中定义组件名等选项

ref() 函数

基本概念

ref() 用于创建响应式数据，可以包装基本类型和对象类型。

代码示例

<script lang="ts" setup>
import { ref } from 'vue'

defineOptions({
  name: 'Person',
})

// 使用 ref() 创建响应式数据
let name = ref('张三')        // 字符串 - 响应式
let age = ref(18)            // 数字 - 响应式  
let tel = '13888888888'      // 普通字符串 - 非响应式

// 方法
function changeName() {
  name.value = 'zhang-san'   // JS中操作ref对象时候需要.value
  console.log(name.value) 
}

function changeAge() {
  age.value += 1             // JS中操作ref对象时候需要.value
  console.log(age.value)
}

function showTel() {
  alert(tel)                 // 普通变量直接使用
}
</script>

ref() 特性：

• 基本类型：ref(0)、ref('字符串')、ref(false)
• 对象类型：ref({ name: '张三' })
• 访问：JS 中需要 .value，模板中自动解包

reactive() 函数

基本概念

reactive() 用于创建响应式对象，当对象属性变化时，视图会自动更新。

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

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

function changeName() {
  person.name = '李四' // 直接修改属性
}
</script>

ref() vs reactive() 对比

特性	ref()	reactive()
数据类型	基本类型 + 对象类型	只接受对象类型
访问方式	JS中需要 .value，模板中自动解包	直接访问属性
模板使用	{{ name }}	{{ obj.property }}
重新赋值	name.value = 新值	不能直接重新赋值整个对象

使用原则：

• 若需要一个基本类型的响应式数据，必须使用ref
• 若需要一个响应式对象，层级不深，ref、reactive都可以
• 若需要一个响应式对象，且层级较深，推荐使用reactive