夜雨聆风各位朋友圈的码农老铁、转行大佬、摸鱼进修的家人们，大家好！📣
欢迎归队 Vue3+TS 系统学习栈·第3天！
前两天我们啃完了Vue3的核心地基：setup语法糖 + ref/reactive响应式 + 模块化封装。
地基打完，今天咱直接起楼房！主攻Vue3日常开发使用率100%的四大核心能力：
模板语法、计算属性、侦听器、生命周期。
很多人写Vue代码Bug不断，根源就四个字：乱用硬写！
插值不控类型、指令乱用嵌套、计算属性当方法写、侦听逻辑混乱、生命周期乱放代码。
今天这一篇，我用唠嗑的方式，帮你把这些高频易错点、TS类型坑、逻辑时序坑一次性连根拔起！
全篇口诀贯穿、案例通俗、代码可直接复制，零基础能看懂，老手能查漏补缺！
先上今日总口诀，背完直接入门大半：
模板插值守类型，指令各司其职行；
Computed缓存省性能，Watch侦听异步灵；
Effect自动追踪变，生命周期控时序；
TS加持稳落地，列表实战练真功！
一、模板语法进阶：带TS校验，告别无脑报错
模板就是Vue的“脸面”，页面怎么显示、怎么交互，全靠它撑着。
很多人觉得模板简单，不就是插值、指令吗？
大错特错！不加TS约束的模板，就是裸奔的代码，上线必出玄学Bug。
1. 插值表达式：{{}} TS类型校验
生活类比：插值表达式就像“自动售货机窗口”，你扔什么数据，它就展示什么内容。
Vue3+TS 会严格校验插值数据类型，不允许非法类型渲染，从根源规避页面报错。
<template><div><!-- 合法：TS校验通过，基础类型正常渲染 --><p>用户名：{{ username }}</p><p>用户年龄：{{ age + 1 }}</p><!-- 非法：TS直接爆红拦截（禁止渲染对象、undefined） --><!-- <p>错误渲染：{{ userObj }}</p> --></div></template><scriptsetuplang="ts">import { ref } from "vue";// TS精准类型约束const username = ref<string>("Vue学习者");const age = ref<number>(24);const userObj = ref<object>({ name: "测试" });</script>
✅ 核心规则：插值只支持字符串、数字、布尔、简单运算，禁止直接渲染对象、数组，TS会强制拦截！
2. 四大核心指令进阶（v-bind / v-on / v-for / v-if）
指令就是Vue的“快捷功能键”，每一个都有专属分工，千万别乱嵌套、乱用场景！
① v-bind：动态绑定属性（TS约束属性值类型）
简写 :，专门绑定标签属性，TS可约束属性值类型，避免绑定错误数据。
<template><!-- 动态绑定class、src，TS严格校验值类型 --><img:src="imgUrl":class="isActive ? 'active' : ''"alt="" /></template><scriptsetuplang="ts">const imgUrl = ref<string>("https://vuejs.org/images/logo.png");const isActive = ref<boolean>(true);</script>
② v-on：绑定事件（TS约束事件参数）
简写 @，绑定点击、输入等事件，可精准约束事件参数类型，杜绝参数错乱。
<template><button @click="handleClick(100)">点击传参</button></template><scriptsetuplang="ts">// TS约束：参数为数字，无返回值const handleClick = (num: number): void => {console.log("接收参数：", num);};</script>
③ v-for：列表渲染（TS约束数组项类型）
渲染列表必备，搭配TS接口约束数组每一项，彻底解决列表数据类型混乱问题。
<template><ul><liv-for="item in list":key="item.id">{{ item.name }} - {{ item.price }}元</li></ul></template><scriptsetuplang="ts">import { reactive } from "vue";// TS接口约束列表项类型interface GoodsItem {id: number;name: string;price: number;}const list = reactive<GoodsItem[]>([{ id: 1, name: "Vue3教程", price: 99 },{ id: 2, name: "TS教程", price: 89 }]);</script>
④ v-if：条件渲染（TS校验条件表达式）
按需渲染节点，TS会校验条件表达式的布尔类型，杜绝无效判断。
<template><pv-if="isLogin">欢迎登录！</p><pv-else>请先登录</p></template><scriptsetuplang="ts">const isLogin = ref<boolean>(true);</script>
💡 指令避坑口诀：v-for不嵌套v-if，属性绑定用bind，事件绑定用on，类型校验TS扛！
二、计算属性 computed：TS类型约束，只读/可写全覆盖
很多新手分不清：方法和计算属性到底有啥区别？
大白话讲透：
方法是每次点击都重跑，不管数据变不变；
计算属性是缓存机制，依赖变了才重算，性能直接拉满！
但凡页面需要二次加工数据（筛选、排序、拼接、计算），优先用computed！
1. 只读计算属性（最常用，TS自动推导）
只根据依赖数据计算结果，不支持手动修改，90%业务场景都是只读。
<scriptsetuplang="ts">import { ref, computed } from "vue";const count = ref<number>(10);// TS自动推导返回值为number类型const doubleCount = computed(() => {return count.value * 2;});console.log(doubleCount.value); // 20</script>
2. 可写计算属性（精准TS类型约束）
支持 get 获取、set 修改，双向可控，适合需要二次修改计算结果的场景。
<script setup lang="ts">import { ref, computed } from "vue";const count = ref<number>(0);// 手动泛型约束返回值类型const doubleCount = computed<number>({get() {return count.value * 2;},set(val: number) {// 监听修改，反向更新原数据count.value = val / 2;}});// 可直接修改，触发set逻辑doubleCount.value = 20;console.log(count.value); // 10</script>
✅ 核心口诀：只读写函数，可写对象包get/set；缓存提性能，TS锁类型！
三、侦听器 watch / watchEffect：TS类型+高阶用法
计算属性擅长同步数据计算，侦听器擅长异步操作、数据监听、副作用处理！
比如接口请求、本地存储、弹窗提示、数据同步，全靠watch/watchEffect！
1. watch 精准侦听（TS强类型）
精准监听指定数据，支持单数据、多数据监听，可配置深度监听、立即执行。
<scriptsetuplang="ts">import { ref, watch } from "vue";const keyword = ref<string>("");// TS自动约束新值、旧值类型watch(keyword, (newVal, oldVal) => {console.log("新值：", newVal, "旧值：", oldVal);// 可执行异步请求、筛选逻辑}, {immediate: true, // 立即执行一次deep: true // 深度监听（复杂对象必备）});</script>
2. watchEffect 自动侦听
无需指定监听数据源，自动追踪内部依赖，依赖变化自动执行，代码更简洁。
<scriptsetuplang="ts">import { ref, watchEffect } from "vue";const count = ref<number>(0);// 自动追踪count依赖，count变化自动触发watchEffect(() => {console.log("count值变化：", count.value);});</script>
3. 高阶用法：停止侦听（精准控时序）
部分场景只需监听一次，后续无需监听，手动停止侦听，避免内存泄漏。
<scriptsetuplang="ts">import { ref, watch } from "vue";const num = ref<number>(0);// 接收停止函数const stopWatch = watch(num, (newVal) => {console.log(newVal);});// 执行后停止监听，后续num变化不再触发stopWatch();</script>
💡 侦听口诀：watch精准盯变量，Effect自动抓依赖；immediate立即跑，deep深度查，stop停止防泄漏！
四、组合式API生命周期：TS完美适配
生命周期就是组件的一生时序：诞生、挂载、更新、销毁。
Vue2选项式生命周期杂乱，Vue3组合式API按需引入、逻辑聚合、TS适配完美！
核心常用钩子全覆盖，口诀奉上：
挂载用onMounted，更新onUpdated；
销毁onUnmounted，初始化逻辑全落地！
<scriptsetuplang="ts">import { onMounted, onUpdated, onUnmounted } from "vue";// 组件挂载完成（最常用！接口请求、DOM操作放这里）onMounted(() => {console.log("组件挂载完毕，发起接口请求");});// 组件数据更新完成onUpdated(() => {console.log("组件视图更新完成");});// 组件销毁（清除定时器、停止侦听，防内存泄漏）onUnmounted(() => {console.log("组件销毁，清理副作用");});</script>
✅ 最佳实践：所有异步请求、DOM操作放onMounted；所有清理逻辑放onUnmounted！
五、实战落地：TS版列表筛选+排序组件（computed+watch联动）
学完所有知识点，直接上企业级实战案例！
实现功能：关键词筛选 + 价格升降序排序 + 实时侦听数据变化
全程TS强类型、无类型报错、逻辑清晰，可直接用于前端、鸿蒙项目！
<template><divclass="goods-box"><!-- 搜索筛选 --><inputv-model="keyword"placeholder="请输入商品名称筛选" /><button @click="sortType = 'asc'">价格升序</button><button @click="sortType = 'desc'">价格降序</button><!-- 筛选排序后的列表 --><ul><liv-for="item in filterList":key="item.id">{{ item.name }} - {{ item.price }}元</li></ul></div></template><scriptsetuplang="ts">import { ref, reactive, computed, watch, onMounted } from "vue";// 1. TS严格接口约束商品类型interface GoodsItem {id: number;name: string;price: number;}// 2. 原始列表数据const goodsList = reactive<GoodsItem[]>([{ id: 1, name: "Vue3零基础教程", price: 129 },{ id: 2, name: "TS进阶实战教程", price: 199 },{ id: 3, name: "鸿蒙开发教程", price: 299 },{ id: 4, name: "NodeJS后端教程", price: 169 }]);// 3. 筛选关键词、排序规则const keyword = ref<string>("");const sortType = ref<"asc" | "desc">("asc");// 4. 核心：计算属性实现 筛选+排序（缓存最优解）const filterList = computed(() => {// 1. 关键词筛选let result = goodsList.filter(item => {return item.name.includes(keyword.value);});// 2. 价格排序return result.sort((a, b) => {return sortType.value === "asc" ? a.price - b.price : b.price - a.price;});});// 5. 侦听筛选变化，实时打印日志watch([keyword, sortType], () => {console.log("筛选/排序条件更新，最新数据：", filterList.value);}, { immediate: true });// 6. 生命周期：组件挂载打印原始数据onMounted(() => {console.log("商品列表初始化完成", goodsList);});</script><stylescoped>.goods-box {width: 500px;margin: 30px auto;}input {padding: 6px 12px;margin-right: 10px;}button {margin: 0 5px;padding: 6px 12px;cursor: pointer;}li {margin: 8px 0;list-style: none;padding: 8px;border: 1px solid #eee;border-radius: 4px;}</style>
✅ 实战亮点总结：
TS接口约束，全程零类型报错
computed缓存计算，性能优于methods
watch侦听条件变化，实时响应
生命周期合理运用，逻辑分层清晰
可直接复用在前端页面、鸿蒙跨端项目
六、今日学习目标自查清单
对照自查，全部拿捏即为通关✅
掌握Vue3模板语法TS适配，熟练使用四大核心指令，规避类型绑定错误
掌握computed只读/可写写法，精准添加TS类型，理解缓存机制
熟练使用watch/watchEffect，掌握TS类型、立即执行、深度侦听、停止侦听
熟练运用组合式API生命周期钩子，适配各类业务场景
独立完成筛选排序组件，实现数据交互，保证类型、逻辑双正确
七、结尾唠嗑
各位老铁，今天这节课，直接把Vue3日常开发80%的基础逻辑全搞定了！
模板语法管页面展示，计算属性管数据加工，侦听器管异步副作用，生命周期管代码时序。
这四套组合拳一出，你写的Vue代码，已经从“能跑就行”升级到了规范、高效、类型安全、可商用的级别！
很多人学Vue止步于会写页面，而你已经开始懂原理、懂性能、懂TS规范、懂业务分层。
差距，就是这样一天天拉开的！
明天我们继续进阶：Vue3组件通信+插槽+全局属性，彻底打通组件化开发！
全程依旧无废话、全干货、可落地！
看懂学会的老铁，点赞收藏，评论区扣个“打卡”，一起坚持进阶，深耕前端/Node/鸿蒙全栈技术！💪
