Vue学习第3天:模板语法+计算侦听+生命周期,TS满血适配!

各位朋友圈的码农老铁、转行大佬、摸鱼进修的家人们，大家好！📣

欢迎归队 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/鸿蒙全栈技术！💪