如何做慕课网站天津网站策划

ref声明/赋值

操作基本类型数据 string number

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

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-修改'
}

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}
};

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>