Vue.js3前端开发实战（微课版）-课件 项目3 计算属性与侦听器-Markdown学习笔记编辑工具的开发

项目3计算属性与侦听器Vue.js3前端开发实战PROJECT3计算属性侦听器缓存数据持久化Markdown学习笔记编辑工具的开发知识目标技能目标素养目标能够熟练使用computed选项进行数据计算与优化，提升应用性能能够合理使用watch选项监听数据变化，实现动态响应能够根据项目需求，正确选择并应用method、computed和watch能够使用localStorage()实现数据的读取和存储，确保用户数据的安全性与持久化遵守代码编写规范，保持代码的整洁、可读性和可维护性保持对新技术的敏感度和学习热情，不断提升自身的技术水平和专业素养学习目标理解并熟悉Vue.js中计算属性computed选项的语法格式及其应用场景了解并掌握侦听器watch选项的语法知识及其在项目中的应用区分method、computed和watch的异同，理解它们各自的使用时机掌握Web端本地存储方法localStorage的基本概念及其在数据持久化中的应用Markdown编辑器当今技术社区中，各大平台均采用Markdown编辑器作为文章撰写工具，它已成为开发者和创作者的标准选择。Markdown语言特性轻量级标记语言易读易写的纯文本格式高效转换为HTML文档支持图片、图表、数学公式项目核心目标开发简易版Markdown学习笔记编辑器掌握计算属性computed的语法与应用掌握侦听器watch的语法与应用项目背景掘金闪念笔记掌握计算属性的语法与应用动态计算性能优化缓存机制任务3.1计算属性computedTASK3.1模板中直接计算的问题计算属性computed数据结构courseList:[

{name:'前端基础入门',score:90},{name:'Javascript',score:80},

{name:'Javascript',score:80},

{name:'Vue.js',score:75}}示例3-1计算期中考试3门专业课的总分与平均分

Methods写法methods:{

//计算总分

getTotal(){

returnthis.courseList.reduce((sum,item)=>sum+item.score,0)

},

//计算平均分

getAverage(){letlen=this.courseList.length

return(this.getTotal()/len).toFixed(2);

}}重复执行每次调用getTotal()和getAverage()都会执行完整计算逻辑无法利用缓存普通方法无法利用Vue的响应式缓存机制性能开销当依赖数据未变化时造成不必要的系统开销计算属性computed示例3-1计算期中考试3门专业课的总分与平均分

computed写法computed:{

total:{

get(){

console.log(`统计总分计算属性-total：

${++this.i}次`)

returnthis.courseList.reduce((sum,item)=>sum+item.score,0)

}

},average(){letlen=this.courseList.length

return(this.total/).toFixed(2);

}}优化要点自动缓存：基于响应式依赖进行缓存依赖追踪：courseList数组内数据变化时自动更新性能优化：依赖不变时使用total、average不重复计算√通义灵码优化建议语法格式简写方式若计算属性仅需get方法，可直接定义为一个函数，更加简洁核心方法说明get方法set方法可选方法，用于实现可写计算属性用于处理计算属性的赋值操作接收新值作为val参数传递当显式修改计算属性的值时自动调用计算属性computedcomputed:{

计算属性名:{

get(){

},

set(val){

}

}}computed:{

计算属性名(){

}}是计算属性的核心，默认实现方式读取计算属性值，执行逻辑并返回计算结果必须返回一个值，否则无法正常使用当计算属性所依赖的响应式状态发生变化时，Vue会自动调用什么是可写计算属性默认只读特性若只写了计算属性的getter获取值，不能对其进行修改修改触发警告如果尝试修改只读计算属性，将会触发运行时警告实现方式同时配置getter和setter通过set方法处理计算属性的赋值操作实现属性的双向数据绑定应用案例：汇率换算器功能需求人民币换算成不同货币（美元、欧元、日元、英镑等）显示汇率和反向汇率双向换算：输入人民币自动计算目标货币，反之亦然计算属性computed功能实现要点1.目标货币选择用户通过下拉菜单选择目标货币（美元、欧元、日元、英镑等）3.汇率动态计算使用计算属性computed实现汇率和反向汇率的动态计算2.双向数据绑定使用v-model双向绑定人民币金额和目标货币金额数据结构设计计算属性computed4.计算属性设计get方法：人民币→目标货币计算set方法：目标货币→人民币计算cnyValue:1,

//人民币金额selectedLabel:'美元',

selectedCurrency:'USD',

//存储用户选择的目标货币代码exchangeRates:[{

//存储一组汇率数据

currency:'USD',

label:'美元',

rate:0.1377

},

//...省略代码

]}换算逻辑computed:{

//...省略代码

//目标货币值计算

targetValue:{

get(){

returnyValue*this.currentRate

},

set(newValue){

yValue=newValue/this.currentRate

}

}}掌握侦听器的语法与应用数据变化监听副作用操作异步机操作支持任务3.2侦听器watchTASK3.2定义观察响应式数据变化，并在变化时执行特定回调函数应用场景异步操作API请求、延迟加载、数据处理DOM操作页面更新、动画效果、元素操作复杂逻辑状态同步、验证处理、条件触发watchvscomputedcomputed计算属性纯计算，返回派生值自动缓存，性能优化不建议执行副作用watch侦听器执行回调，处理副作用灵活配置，深度监听适合复杂逻辑处理使用建议派生数据用computed，副作用操作用watch

侦听器watch示例3-3

登录状态监听功能实现监听isLogin状态变化触发后更新用户信息2秒延迟自动登录基本语法watch:{

数据名(newVal,oldVal){

//newVal:新值

//oldVal:旧值（可省略）

处理逻辑

}}代码示例data(){

return{

isLogin:false,

userInfo:{}

}},watch:{

isLogin(newVal,oldVal){

if(newVal){

this.userInfo={

name:"智能工匠",

gender:"男",

age:"00后",fav:"喜欢阅读技术书籍..."

}

}

}}侦听器watch嵌套属性监听watch:{

"loginInfo.isLogin"(newVal,oldVal){

if(newVal){this.userInfo={name:"智能工匠",gender:"男",age:"00后",fav:"喜欢阅读技术书籍..."

}

}

}}侦听器watchdeep属性深层监听递归追踪对象或数组内部任意嵌套属性的变化都会触发侦听回调'dataName':{//处理函数

handler:function(newVal,oldVal){},

deep:true,

immediate:false,

flush:'pre'}使用场景需要监听对象内部所有属性变化时使用注意事项性能开销大，大规模数据或深层嵌套时慎用如果isLogin是loginInfo对象的属性，应如何设置监听对象呢？方法一：将监听对象设置成用点（.）分隔的路径方法二：使用deep属性创建深层侦听immediate立即执行初始化执行侦听器创建后立即执行一次回调函数使用场景页面加载时需根据初始值执行逻辑执行特点第一次执行时oldVal为undefinedflush执行时机控制时机控制回调函数在组件更新前后的执行时机"pre"组件更新前（默认）"post"组件更新后"sync"依赖变化时同步使用场景需要操作DOM或精确控制执行时机时使用性能提示sync模式性能要求不高时使用侦听器watch监听器复杂应用watch:{

loginInfo:{

handler(value){

console.log(++this.loginInfo.i)

if(value.isLogin){

this.userInfo={

name:"智能工匠",

gender:"男",

age:"00后",

fav:"喜欢阅读技术书籍..."

}

}

},

deep:true

}}方法二：深层次监听写法综合应用computed和watch编辑器功能实时预览数据持久化处理任务3.3开发简易版Markdown编辑器

TASK3.3技术方案Marked.js+Vue.jsMarkdown解析实时渲染项目需求文本编辑Markdown支持标题、列表、链接、图片、粗体、斜体等Markdow格式实时渲染左侧编辑区，右侧HTML预览保存加载localStorage本地持久化存储，支持删除单篇笔记的功能开发简易版Markdown编辑器3.3.2项目开发实现-初始化项目项目结构目录结构项目配置index.html引入库文件创建Vue实例开发简易版Markdown编辑器markdown/├──index.html#主页面├──css/│└──index.css#样式文件├──js/│├──vue.global.js#Vue框架│├──marked.js#Markdown解析器│└──main.js#业务逻辑└──img/

#图片资源

└──icon-search.svg<!--引入样式文件--><linkrel="stylesheet"href="css/index.css"><!--引入Vue和marked库--><scriptsrc="js/marked.js"></script><scriptsrc="js/vue.global.js"></script><!--挂载Vue应用--><divid="app"></div><scriptsrc="js/main.js"></script>//main.jsconstApp={}Vue.createApp(App).mount('#app')编辑Markdown内容计算属性-Markdown文本转HTML使用computed将note.content派生为markedHtml

开发简易版Markdown编辑器//单篇笔记

note:{

id:0,

//键值

title:"",

//标题

content:""//正文}笔记的数据结构编辑与预览笔记<!--

文档编辑区域

--><div

class="editor-box">

<input

type="text"

class="input-control"

placeholder="请输入标题"

v-model="note.title"

/>

<textarea

class="input-controlnote-editor"

v-model="note.content"

placeholder="请输入markdown语法内容"

></textarea>

<button

type="button"

class="btn">保存</button></div><!--

文档渲染区域

--><divclass="note-html">

<h1>{{note.title}}</h1>

<divclass="note-content"

v-html="markedHtml">

Markdown渲染内容</div></div>markedHtml(){

return

marked(this.note.content)}保存笔记侦听器-自动保存使用watch监听noteList变化，自动同步至localStorage

localStorage-数据本地持久化使用localStorage.setItem/getItem实现笔记的保存与加载技术要点总结

computed用于派生数据

watch用于副作用操作

localStorage用于数据持久化

开发简易版Markdown编辑器methods:{

saveNote(){

if(this.note.title==''||this.note.content=='){

alert("标题或内容不能为空！")

returnfalse;

}

this.note.id=String(newDate().getTime())

this.noteList.push(this.note)

}},watch:{

noteList:{

handler(val){localStorage.setItem('noteList',JSON.stringify(val))

},

deep:true}}<div

class="editor-box">

<!--

...省略代码

-->

<button

type="button"

class="btn"

@click="saveNote">保存</button></div>加载笔记for循环-渲染笔记列表使用for

循环遍历

noteList

数组，将其渲染到侧边栏。created生命周期钩子-初始化笔记列表数据使用created钩子函数从localStorage中加载笔记数据。

开发简易版Markdown编辑器methods:{

//...省略代码

showNote(id,idx){

letnote=this.noteList.find(item=>id==item.id)

this.note=note

this.current=idx

}}created(){

this.noteList=JSON.parse(localStorage.getItem('noteList'))??[]}click事件-选择笔记单击侧边栏的

某个笔记，在高亮该笔记时，同时将笔记信息绑定到表单

。<li

v-for="(item,index)innoteList"

:key="item.id"

class="sidebar-links-item"

:class="{active:index==current}"

@click="showNote(item.id,index)"><!--...省略代码

--></li>修改笔记优化saveNote方法“保存”按钮需要同时处理新增笔记和修改笔记两种场景。saveNote方法中通过判断note对象的id属性来区分操作类型：当id为0时，执行新增操作；当id不为0时，执行更新操作。

开发简易版Markdown编辑器methods:{

//...省略代码

saveNote(){

if(this.note.title==''||this.note.content==''){

alert("标题或内容不能为空！")

returnfalse;

}

if(this.note.id==0){

this.note.id=String(newDate().getTime())this.noteList.push(this.note)this.current=this.noteList.length-1

}else{

letidx=this.noteList.findIndex(item=>this.note.id==item.id)

this.noteList[idx]=this.no