Vue企业开发实战（第2版）-课件 项目8 计算属性和侦听器

《Vue企业开发实战》·Vue3企业级项目教程项目8计算属性和侦听器任务1计算属性·任务2侦听器授课教师：XXX派生展示·缓存·购物车·副作用学习目标能算的用computed，有副作用的用watch01会写computed能把拼接、过滤、合计从模板抽走，知道有缓存02依赖多个数据购物车两个包裹的总价随数量自动变03会做购物车加减只改数量，小计和总价由计算属性出，减到1不能再减04会选题全名拼接用computed；问句请求用watch05不混用不在computed里发请求，不在模板里堆长表达式项目知识导图两个任务：先算出来，再做额外的事任务1计算属性倒序示例、购物车总价、缓存、上机任务2侦听器watch全名、与computed对比、异步问句项目导读模板里一长串表达式，多处还要用数据变了，有的只是算一个展示值，有的还要请求、写日志、改标题。前者用computed，后者用watch。官方不推荐在插值里写复杂逻辑（项目4已强调）。本项目用倒序字符串、购物车和问句请求把这条界划清。算反转、过滤、总价、带px的宽度。缓存依赖不变不重算；普通函数每次渲染都跑。副作用请求、等用户停键，用watch。购物车加减只碰count，总价只读computed。TASK01计算属性01是什么02购物车03缓存8.1.1什么是计算属性需求：把字符串倒序显示<h1>{{msg}}转为{{reversedMsg}}</h1>import{ref,computed}from'vue'constmsg=ref('helloworld')constreversedMsg=computed(()=>msg.value.split('').reverse().join(''))图8.1helloworld倒序显示组合式API用computed()函数定义，不再写选项式的computed:{}。8.1.2可以依赖多个数据只要最终return一个结果；任一依赖变了就重算constpackage1=ref([{name:'iphone8',price:5688,count:1},{name:'ipad',price:2888,count:1}])constpackage2=ref([{name:'apple',price:3,count:5},{name:'banana',price:6,count:3}])constprices=computed(()=>{lettotal=0package1.value.forEach(i=>total+=i.price*i.count)package2.value.forEach(i=>total+=i.price*i.count)returntotal})<h1>总价：{{prices}}</h1>图8.3多包裹总价自动更新props进来，计算属性派生展示数值计算一般不带单位；展示时再拼px<!--父示例4--><Child:width="200"/><!--子示例5-->constprops=defineProps({width:{type:Number,required:true}})conststyle=computed(()=>({width:`${props.width}px`}))<div:style="style"class="page">组件内容</div>图8.4计算属性拼出width:200px8.1.3缓存意味着什么普通函数也能倒序，为什么还要computed？<!--示例6：注意带()--><h1>methods改写:{{reversedMsg()}}</h1>constreversedMsg=()=>{returnmsg.value.split('').reverse().join('')}图8.5普通函数也能倒序，但无缓存课上实验：在计算函数和普通函数里console.log，改无关数据看谁会重跑。点击按钮仍用普通函数，不要把点击写成computed。对照表：computed还是方法Vue3不再有methods选项，但“会不会每次都跑”这条界还在对比项computed普通函数模板写法{{reversedMsg}}当属性{{reversedMsg()}}要括号缓存依赖不变不重算每次渲染都执行参数一般不接参数可以接参数用途派生展示值、过滤、总价点击、提交、带参计算副作用不要发请求、不要改别的数据可以，但复杂副作用更适合watch8.1.4购物车上机怎么验收加减只碰源数据；总价不要只写在点击函数里01+对应商品count++。02−count--；减到1时按钮不能再点（:disabled或方法里拦截）。03移除从数组删掉该项，总价自动少一块。04总价computedreduce/forEach，模板只绑{{total}}。购物车关键代码不要直接改DOM上的数字functioninc(row){row.count++}functiondec(row){if(row.count>1)row.count--}functionremove(i){cart.value.splice(i,1)}consttotal=computed(()=>cart.value.reduce((s,r)=>s+r.price*r.count,0))constempty=computed(()=>cart.value.length===0)图8.6加减、移除、总价走computed上机1购物车项目8的主要技能证据要求•实现页面基本布局•数量加减与行小计；减到1不能再减•移除当前商品•用computed计算总价并展示•空车提示可配合v-if合格加减后总价同步。总价写在模板长表达式、未用computed、减到0仍能减，不算过。TASK02侦听器01watch做什么02和computed怎么选03异步8.2.1什么是侦听器观察响应式数据变化，并执行额外逻辑有些数据要随着另一些数据变而做事。用不好会冗余，所以要和计算属性分场景。<inputv-model="firstName"/><inputv-model="lastName"/><h1>{{fullName}}</h1>constfirstName=ref('Foo')constlastName=ref('Bar')constfullName=ref('FooBar')watch([firstName,lastName],()=>{fullName.value=`${firstName.value}${lastName.value}`})图8.7初始FooBar图8.8改输入后全名跟着变示例8同样的全名，改用computed能算出来的展示值，优先计算属性constfirstName=ref('Foo')constlastName=ref('Bar')constfullName=computed(()=>`${firstName.value}${lastName.value}`)<h1>{{fullName}}</h1>图8.9同样效果，改用computed更干净口诀：有没有返回值给模板用？有→computed。要不要另外做事？要→watch。示例9问句变化后去请求停键后再问；没有问号先不请求<inputv-model="question"/><p>{{answer}}</p>constquestion=ref('')constanswer=ref('Icannotgiveyouanansweruntilyouaskaquestion!')watch(question,()=>{answer.value='Waitingforyoutostoptyping...'getAnswer()})constgetAnswer=async()=>{if(!question.value.includes('?')){answer.value='Questionsusuallycontainaquestionmark.;-)'return}//axios去问yes/no接口……}图8.10没有问号先不请求图8.11有?才去问yes/nowatch常用选项课上点到即可，上机用得到再写01immediate一上来就跑回调。页码默认1也要先拉一次列表时用。02deep侦听对象内部字段。能拆成具体ref就拆开，少用深侦听。03新旧值watch(src,(newVal,oldVal)=>{})可对比页码，避免重复请求。04停掉返回的stop函数在卸载时调用，和onBeforeUnmount清理同一思路。大觅里怎么选题作业要能各举一例并说清理由场景用哪个理由票价加“元”、倒序标题computed派生展示值，可缓存购物车总价、已选座位数computed只依赖数量和单价搜索关键字过滤当前列表computed纯计算，不发请求页码/栏目变化重新请求watch副作用：Axios登录态变化写本地或打日志watch没有要展示的派生值上机2页码或问句联动展示层仍走computed；变化拉数走watch要求•侦听页码或搜索问句，执行模拟请求或过滤•展示列表可用另一计算属性•改页码/输入能看到副作用发生（日志或新数据）•不要在computed里axios•不要在模板里直接请求合格能讲清：这一处为什么不是computed。全名拼接若仍用watch算演示，但作业要能改写成computed。简易分页器效果图8.12–8.14：上一页/当前页/下一页，页码变了再拉数图8.12第1页图8.13第2页图8.14第3页页码变化拉列表展示过滤用computed；页码变了拉数用watchconstpage=ref(1)constraw=ref([])watch(page,(p,old)=>{if(p===old)returnloadList(p)//axios，副作用},{immediate:true})constshown=computed(()=>raw.value.filter(i=>!i.soldOut))<button@click="page++">下一页</button><liv-for="iinshown":key="i.id">{{i.itemName}}</li>同一页里两套•loadList绝不写进computed•immediate保证第一页也会拉•过滤售罄是纯计算•和项目5的Axios、项目6的v-for接上•这是教材作业“页码联动”的写法购物车模板骨架对照教材示意图：行小计+总价+空车<pv-if="empty">购物车是空的</p><ulv-else><liv-for="(row,i)incart":key="row.id">{{}}{{row.price}}元×<button:disabled="row.count<=1"@click="dec(row)">-</button>{{row.count}}<button@click="inc(row)">+</button>小计{{row.price*row.count}}<button@click="remove(i)">移除</button></li></ul><p>总价：{{total}}元</p>本项目小结口诀：能算出来的用计算属性，要做事的用侦听器任务1computed有缓存。购物车加减改数据，总价自动出。props只派生不改。任务2