vue3相关内容

ref声明/赋值

操作基本类型数据 string number

// 引入方法
import {ref} from 'vue'
// 声明变量
const name = ref('A')
// 修改值
name.value = 'B'
1
2
3
4
5
6

reactive声明/赋值

操作引用类型数据 array object
proxy不能直接赋值，会破坏响应式对象

// 引入方法
import {reactive} from 'vue'
// 声明变量
const infoObj = reactive({
    title: '小记',
    date: '2023-11-17'
})
// 修改值
const changeInfo = ()=>{
    infoObj.title = '小记-修改'
    infoObj.date = '2023-11-17-修改'
}
1
2
3
4
5
6
7
8
9
10
11
12

hooks模块化抽离

HelloWorld.ts

import { reactive } from "vue";

export default () => {
  const infoObj = reactive({
    title: '小记',
    date: '2023-11-17'
  })
  const changeInfo = ()=>{
    infoObj.title = '小记-修改'
    infoObj.date = '2023-11-17-修改'
  }

  return { infoObj, changeInfo}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

HelloWorld.vue

<template>
  <button @click="changeInfo">修改信息</button>
  <div>标题：{{infoObj.title}}</div>
  <div>日期：{{infoObj.date}}</div>
</template>
<script setup lang="ts">
  import HelloWorld from './HelloWorld'//自动识别后缀ts的文件

  const {infoObj, changeInfo} = HelloWorld()
</script>
1
2
3
4
5
6
7
8
9
10