Godot引擎入门：从零开发2D躲避怪物游戏
2026/7/14 21:41:19
文章目录
- 前言
- 一、计算属性的核心概念
- 二、案例代码解析
- 三、关键代码分析
- 四、计算属性的优势
- 五、注意事项
- 六、总结
前言
在Vue.js框架中，计算属性（Computed Properties）是处理数据派生需求的核心工具。本文通过“姓名拼接”案例，结合插值语法与双向绑定，详细解析计算属性的定义、原理、执行机制及实际应用场景。
一、计算属性的核心概念
计算属性是基于已有数据动态计算得出的属性，其核心特性如下：
- 定义逻辑：当需要的属性不存在时，通过已有属性计算生成（如姓名需由“姓”和“名”拼接而成）。
- 底层原理：借助
Object.defineProperty的getter和setter实现数据劫持，自动追踪依赖关系。 - 执行时机：
get函数：初次读取计算属性时调用；依赖数据（如firstname、lastname）变化时重新调用。set函数：当计算属性被修改时触发（需手动定义set逻辑）。
二、案例代码解析
以下是一个基于Vue.js的“姓名案例”，通过计算属性实现姓名的拼接与双向响应：
<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>姓名案例_插值语法实现</title><!-- 引入Vue.js框架 --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 容器挂载点 --><divid="root">姓：<inputtype="text":value="firstname"><br/><br>名：<inputtype="text":value="lastname"><br/><br>姓名：<span>{{fullname}}</span></div><scripttype="text/javascript">Vue.config.productionTip=false// 禁用生产环境提示constvm=newVue({el:'#root',// 挂载容器data:{firstname:'张',// 初始姓lastname:'三'// 初始名},computed:{fullname:{// get：读取fullname时触发，返回拼接后的姓名get(){console.log('get被调用了');// 调试日志returnthis.firstname+'-'+this.lastname;},// set：修改fullname时触发，拆分值并更新依赖数据set(value){console.log('set被调用，新值：',value);// 调试日志constarr=value.split('-');// 拆分姓名（如“李-四”→["李", "四"]）this.firstname=arr[0];// 更新姓this.lastname=arr[1];// 更新名}}}});</script></body></html>三、关键代码分析
HTML结构与数据绑定：
- 姓、名输入框通过
:value（v-bind简写）绑定firstname和lastname，实现单向数据绑定（数据→视图）。 - 姓名显示通过插值语法
{{fullname}}读取计算属性，自动触发get函数。
- 姓、名输入框通过
计算属性
fullname的逻辑：get函数：当首次渲染或firstname/lastname变化时，自动调用并返回拼接结果（如“张-三”）。控制台会输出get被调用了，便于调试。set函数：若需修改fullname（如直接给vm.fullname赋值），set会接收新值（如“李-四”），拆分后更新firstname和lastname，实现双向响应。
四、计算属性的优势
与methods相比，计算属性的核心优势在于缓存机制：
- 性能优化：计算属性基于依赖缓存，仅当依赖数据变化时重新计算；而
methods每次调用都会执行函数，无缓存。 - 调试友好：通过
get/set的调试日志，可清晰追踪数据变化逻辑。
完整代码：
<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>姓名案例_插值语法实现</title><!-- 引入vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 计算属性: 1. 定义: 要用的属性不存在, 要通过已有属性计算得来。 2. 原理: 底层借助了Objcet.defineProperty方法提供的getter和setter。 3. get函数什么时候执行? (1). 初次读取时会执行一次。 (2). 当依赖的数据发生改变时会被再次调用。 4. 优势: 与methods实现相比, 内部有缓存机制(复用), 效率更高, 调试方便。 5. 备注: 1. 计算属性最终会出现在vm上, 直接读取使用即可。 2. 如果计算属性要被修改, 那必须写set函数去响应修改, 且set中要引起计算时依赖的数据发生改变。 --><!-- 准备好一个容器 --><divid="root">姓：<inputtype="text":value="firstname"><br/><br>名：<inputtype="text":value="lastname"><br/><br>姓名：<span>{{fullname}}</span></div></body><scripttype="text/javascript">Vue.config.productionTip=false// 阻止 vue 在启动时生成生产提示。constvm=newVue({el:'#root',data:{firstname:'张',lastname:'三'},computed:{fullname:{// get有什么用？当有人读取fullname时，get就会被调用，且返回值作为fullname的值// get什么时候被调用？1、初次调用fullname时 2、所依赖的值发生变化时get(){console.log('get被调用了')returnthis.firstname+'-'+this.lastname},// set什么时候被调用？当fullname被修改时set(value){console.log('set',value)constarr=value.split('-')this.firstname=arr[0]this.lastname=arr[1]}}}})</script></html>五、注意事项
- 依赖追踪：计算属性的
get仅在依赖数据（如firstname、lastname）变化时触发，若依赖未变，直接返回缓存值。 - set的必要性：若需修改计算属性，必须定义
set函数，且set中需更新依赖数据（如案例中拆分姓名并赋值给firstname/lastname）。
六、总结
通过“姓名案例”，我们清晰展示了计算属性的完整流程：从定义、原理到实际应用。计算属性是Vue.js中处理复杂数据派生的高效工具，结合缓存机制与依赖追踪，既能简化代码逻辑，又能提升性能。掌握其get/set的执行时机与调试技巧，是Vue开发中的关键技能。