【Vue】14 Vue技术—— Vue.js计算属性详解：实现姓名拼接与双向响应的完整案例-平芜编程栈

文章目录

- - - 前言
    - 一、计算属性的核心概念
    - 二、案例代码解析
    - 三、关键代码分析
    - 四、计算属性的优势
    - 五、注意事项
    - 六、总结

前言

在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）。