1、姓名案例—插值语法版

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>姓名案例-插值语法版</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"/><br/><br/>
        名：<input type="text" v-model="lastName"/><br/><br/>
        全名：<span>{{firstName}}-{{lastName}}</span>
    </div>

<script>
    // 设置为 false 以阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三'
        }
    })
</script>
</body>
</html>

2、姓名案例—methods版

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>姓名案例-methods版</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"/><br/><br/>
        名：<input type="text" v-model="lastName"/><br/><br/>
        全名：<span>{{initFullName()}}</span>
    </div>
<script>
    // 设置为 false 以阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;

    new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三',
        },
        methods:{
            initFullName(){
                return this.firstName + '-' + this.lastName;
            }
        }
    })
</script>
</body>
</html>

3、姓名案例—计算属性版

data中的变量称为属性

data: {
            // 属性
            firstName: '张',
            lastName: '三',
        },

computed中的叫做计算属性

get作用：当有人读取fullName时候，get就会被调用，且返回值就被作为fullName的值
什么时候调用：①初次读取fullName的时候；②所依赖的数据发生变化的时候

computed: {
            // 计算属性
            fullName: {
                get(){
                    return this.firstName + '-' + this.lastName;
                },
            }
        }

为什么用计算属性？优势在哪

仔细看一下下面的效果，页面打印了5次，但是get只被调用了一次，这是因为当第一次调用了fullName之后，就会被存到缓存，后面用的时候就会直接从缓存里取。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KmlYPVna-1690511728305)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230728102824836.png)]$

set方法

// 什么时候调用：当fullName被修改的时候
                set(value){
                    const arr = value.split('-');
                    this.firstName = arr[0];
                    this.lastName = arr[1];
                }

fullName改变之后，就会调用set方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RQXsSOJs-1690511728306)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230728103432581.png)]$

4、计算总结

计算属性：
- 定义：要用的属性不存在，要通过已有属性计算得来。
- 原理：底层借助了Object.defineProperty方法提供的getter和setter
- get函数什么时候执行：
  - 初次读取时会执行一次
  - 当依赖的数据发生改变时会被再次调用
- 优势：与methods相比，内部有缓存机制，效率更高，调试方便
- 备注：
  - 计算属性最终会出现在vm上，直接读取使用即可
  - 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

5、姓名案例—计算属性简写版

只有考虑get，不考虑set的时候才能使用简写方式。

computed: {
            // 完整写法
            // fullName: {
            //     get(){
            //         return this.firstName + '-' + this.lastName;
            //     },
            //     set(value){
            //         const arr = value.split('-');
            //         this.firstName = arr[0];
            //         this.lastName = arr[1];
            //     }
            // }

            // 简写
            fullName(){
                return this.firstName + '-' + this.lastName;
            }
        }