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

文章目录

前言

在Vue.js框架中，计算属性（Computed Properties）是处理数据派生需求的核心工具。本文通过"姓名拼接"案例，结合插值语法与双向绑定，详细解析计算属性的定义、原理、执行机制及实际应用场景。

一、计算属性的核心概念

计算属性是基于已有数据动态计算得出的属性，其核心特性如下：

定义逻辑：当需要的属性不存在时，通过已有属性计算生成（如姓名需由"姓"和"名"拼接而成）。
底层原理 ：借助Object.defineProperty的getter和setter实现数据劫持，自动追踪依赖关系。
执行时机 ：
- get函数：初次读取计算属性时调用；依赖数据（如firstname、lastname）变化时重新调用。
- set函数：当计算属性被修改时触发（需手动定义set逻辑）。

二、案例代码解析

以下是一个基于Vue.js的"姓名案例"，通过计算属性实现姓名的拼接与双向响应：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>姓名案例_插值语法实现</title>
    <!-- 引入Vue.js框架 -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 容器挂载点 -->
    <div id="root">
        姓：<input type="text" :value="firstname"> <br/><br>
        名：<input type="text" :value="lastname"> <br/><br>
        姓名：<span>{{fullname}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 禁用生产环境提示

        const vm = new Vue({
            el: '#root', // 挂载容器
            data: {
                firstname: '张', // 初始姓
                lastname: '三'  // 初始名
            },
            computed: {
                fullname: {
                    // get：读取fullname时触发，返回拼接后的姓名
                    get() {
                        console.log('get被调用了'); // 调试日志
                        return this.firstname + '-' + this.lastname;
                    },
                    // set：修改fullname时触发，拆分值并更新依赖数据
                    set(value) {
                        console.log('set被调用，新值：', value); // 调试日志
                        const arr = 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的调试日志，可清晰追踪数据变化逻辑。

完整代码：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>姓名案例_插值语法实现</title>
    <!-- 引入vue -->
    <script type="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中要引起计算时依赖的数据发生改变。
    -->

    <!-- 准备好一个容器 -->
    <div id="root">
        姓：<input type="text" :value="firstname"> <br/><br>
        名：<input type="text" :value="lastname"> <br/><br>
        姓名：<span>{{fullname}}</span>
    </div>

</body>

<script type="text/javascript">
    Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el:'#root',
        data:{
            firstname:'张',
            lastname:'三'
        },
        computed:{
            fullname:{
                // get有什么用？当有人读取fullname时，get就会被调用，且返回值作为fullname的值
                // get什么时候被调用？1、初次调用fullname时 2、所依赖的值发生变化时
                get(){
                    console.log('get被调用了')
                    return this.firstname + '-' + this.lastname
                },
                // set什么时候被调用？当fullname被修改时
                set(value){
                    console.log('set', value)
                    const arr = 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开发中的关键技能。