<template>  <div>    <p>ref基础类型：{{ count }}</p>    <p>reactive复杂对象：{{ user.name }} - {{ user.age }}</p>    <button @click="updateData">更新数据</button>  </div></template><scriptsetuplang="ts">import { ref, reactive, unref } from 'vue'// 基础类型用refconst count = ref<number>(0)// 复杂对象用reactiveconst user = reactive<{ name: string; age: number; hobbies: string[] }>({  name: '张三',  age: 20,  hobbies: ['篮球', '游戏']})const updateData = () => {  // ref需.value修改，unref简化取值（count.value → unref(count)）  count.value = unref(count) + 10  // reactive直接修改属性，不丢失响应式  user.age += 1  // 禁止直接替换reactive整个对象！如需更新用Object.assign  // user = { ...user }   Object.assign(user, { name: '朱大明' }) }</script>

<template>  <div>    <p>姓名：{{ name }}</p>    <p>年龄：{{ age }}</p>    <button @click="updateName">修改姓名</button>  </div></template><scriptsetuplang="ts">import { reactive, toRefs, toRef } from 'vue'const user = reactive<{ name: string; age: number; gender?: string }>({  name: '李四',  age: 25})// toRefs解构reactive，所有属性转为响应式refconst { name, age } = toRefs(user)// toRef处理可选属性（避免解构undefined）const gender = toRef(user, 'gender')const updateName = () => {  // 解构后仍需.value修改（因为是ref）  name.value = '李小四'  gender.value = '男' // 给可选属性赋值}</script>

<template>  <div>    <inputv-model="keyword"placeholder="输入搜索关键词" />    <p>watch监听结果：{{ watchResult }}</p>    <p>watchEffect请求状态：{{ reqStatus }}</p>  </div></template><scriptsetuplang="ts">import { ref, watch, watchEffect } from 'vue'const keyword = ref<string>('')const watchResult = ref<string>('')const reqStatus = ref<string>('未请求')// watch：精准监听，可获取新旧值，支持配置项watch(  keyword, // 监听的源（ref/reactive/getter）  (newVal, oldVal) => {    if (newVal) watchResult.value = `从${oldVal}改为${newVal}`    else watchResult.value = ''  },  { immediate: false, deep: false } // 立即执行/深度监听)// watchEffect：自动追踪依赖，初始化立即执行，适合接口请求等副作用const stopWatch = watchEffect(() => {  if (keyword.value) {    reqStatus.value = '请求中...'    // 模拟接口请求    setTimeout(() => {      reqStatus.value = '请求成功'    }, 500)  } else {    reqStatus.value = '未请求'  }})// 组件卸载前停止监听（可选，watchEffect会自动停止，手动停止适合特殊场景）// import { onUnmounted } from 'vue'// onUnmounted(() => stopWatch())</script>

<template>  <div>    <p>setup语法糖：{{ msg }}</p>    <button @click="sayHello">点击触发</button>  </div></template><!-- setup语法糖核心：无需配置setup函数，无需return --><scriptsetuplang="ts">// 直接定义变量，模板可直接访问const msg = ref<string>('Vue3 setup语法糖超简洁！')// 直接定义方法，模板可直接调用const sayHello = () => {  alert('setup语法糖yyds')}// 后续技巧会结合defineProps/defineEmits，此处体现核心简化点import { ref } from 'vue'</script>

<template>  <divclass="child">    <p>父组件传值：{{ name }}</p>    <button @click="sendMsgToParent">向父组件传值</button>  </div></template><scriptsetuplang="ts">// 声明接收父组件的props，TS泛型做类型约束const props = defineProps<{  name: string; // 必传属性  age?: number; // 可选属性}>()// 声明可触发的事件，TS泛型约束事件参数类型const emit = defineEmits<{  (e: 'update:age', value: number): void; // 自定义更新事件  (e: 'message', msg: string): void; // 普通消息事件}>()// 触发事件，向父组件传值const sendMsgToParent = () => {  emit('update:age', 18)  emit('message', '我是子组件的消息')}</script>

<template>  <divclass="parent">    <h3>父组件</h3>    <!-- 向子组件传值 + 监听子组件事件 -->    <Child      name="张三"       @update:age="handleAgeUpdate"       @message="handleMessage"    />    <p>子组件传回的年龄：{{ childAge }}</p>  </div></template><scriptsetuplang="ts">import { ref } from 'vue'import Child from './Child.vue'const childAge = ref<number>(0)// 处理子组件的年龄更新事件const handleAgeUpdate = (val: number) => {  childAge.value = val}// 处理子组件的消息事件const handleMessage = (msg: string) => {  console.log('接收子组件消息：', msg)}</script>

<template>  <div>    <divv-for="item in goodsList":key="item.id">      <p>{{ item.name }}：{{ item.price }}元 × {{ item.num }}件</p>    </div>    <h3>合计：{{ totalPrice }}元</h3>    <button @click="addNum">增加第一件商品数量</button>  </div></template><scriptsetuplang="ts">import { ref, computed } from 'vue'// 模拟商品列表type Goods = { id: number; name: string; price: number; num: number }const goodsList = ref<Goods[]>([  { id: 1, name: 'Vue实战', price: 59, num: 1 },  { id: 2, name: 'TS入门', price: 39, num: 2 },  { id: 3, name: 'React基础', price: 49, num: 1 }])// computed缓存计算结果，仅当goodsList中price/num变化时重新计算const totalPrice = computed<number>(() => {  console.log('computed重新计算了') // 测试：仅依赖变化时打印  return goodsList.value.reduce((sum, item) => {    return sum + item.price * item.num  }, 0)})// 修改依赖，触发computed重新计算const addNum = () => {  goodsList.value[0].num++}</script>

<template>  <div>    <p>定时器计数：{{ timerCount }}</p>  </div></template><scriptsetuplang="ts">import { ref, onMounted, onUnmounted, onUpdated } from 'vue'const timerCount = ref<number>(0)let timer: NodeJS.Timeout | null = null// 组件挂载后执行：开启定时器（替代Vue2的mounted）onMounted(() => {  console.log('组件挂载完成')  timer = setInterval(() => {    timerCount.value++  }, 1000)})// 组件更新后执行（替代Vue2的updated）onUpdated(() => {  console.log('组件更新了：', timerCount.value)})// 组件卸载前执行：清理定时器（关键！避免内存泄漏）onUnmounted(() => {  console.log('组件即将卸载')  if (timer) clearInterval(timer)})</script>

<template>  <div>    <!-- 长列表渲染：v-memo缓存，仅id/status变化时重新渲染 -->    <div      v-for="item in longList"       :key="item.id"      v-memo="[item.id, item.status]" <!-- 依赖数组：核心优化点 -->    >      <p>编号：{{ item.id }} - 名称：{{ item.name }}</p>      <p>状态：{{ item.status === 'active' ? '已激活' : '未激活' }}</p>      <p>无关内容：{{ item.content }}</p> <!-- 此属性变化不会触发渲染 -->    </div>    <button @click="changeContent">修改无关内容（不渲染）</button>    <button @click="changeStatus">修改状态（触发渲染）</button>  </div></template><scriptsetuplang="ts">import { ref } from 'vue'// 模拟1000条长列表数据type ListItem = { id: number; name: string; status: 'active' | 'inactive'; content: string }const longList = ref<ListItem[]>(  Array.from({ length: 1000 }, (_, i) => ({    id: i + 1,    name: `列表项${i + 1}`,    status: i % 2 === 0 ? 'active' : 'inactive',    content: `初始内容${i + 1}`  })))// 修改v-memo依赖外的属性：不会触发组件重新渲染const changeContent = () => {  longList.value.forEach(item => {    item.content = `修改后的内容${item.id}`  })}// 修改v-memo依赖内的属性：仅对应项重新渲染const changeStatus = () => {  longList.value[0].status = longList.value[0].status === 'active' ? 'inactive' : 'active'}</script>

<template>  <div>    <button @click="showModal = true">打开弹窗</button>    <!-- Teleport：将内容渲染到body节点下 -->    <Teleportto="body">      <divclass="modal-mask"v-if="showModal" @click="showModal = false">        <divclass="modal-content" @click.stop>          <h3>跨DOM弹窗</h3>          <p>我被渲染到body下，脱离父组件DOM结构</p>          <button @click="showModal = false">关闭</button>        </div>      </div>    </Teleport>  </div></template><scriptsetuplang="ts">import { ref } from 'vue'const showModal = ref<boolean>(false)</script><stylescoped>/* 弹窗样式：避免父组件样式隔离影响 */.modal-mask {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: rgba(0, 0, 0, 0.5);  display: flex;  justify-content: center;  align-items: center;}.modal-content {  width: 400px;  padding: 20px;  background: #fff;  border-radius: 8px;}</style>

<template>  <div>    <p>TS约束ref：{{ count }}（仅能为数字）</p>    <p>TS约束reactive：{{ user.name }} - {{ user.age }}（类型严格校验）</p>    <button @click="testType">测试类型约束</button>  </div></template><scriptsetuplang="ts">import { ref, reactive } from 'vue'// 1. ref添加TS类型约束（基础类型）const count = ref<number>(0)// 2. 接口约束复杂对象（更易复用）interface User {  name: string;  age: number;  hobbies?: string[]; // 可选数组  getInfo: () => string; // 方法类型}// reactive添加TS类型约束（复杂对象）const user = reactive<User>({  name: '王小明',  age: 22,  hobbies: ['跑步', '阅读'],  getInfo: () => {    return `${user.name}，${user.age}岁`  }})// 3. 泛型约束联合类型const status = ref<'active' | 'inactive' | 'pending'>('active')// 4. 类型断言（确定值的类型时使用）const num = ref<number | string>(123)const numOnly = num.value as number// 测试类型约束const testType = () => {  count.value += 1  user.age += 1  console.log(user.getInfo())  status.value = 'pending'}</script>