计算属性(computed)

<div id="root">
        姓：<input type="text" v-model:value="firstName"><br />
        名：<input type="text" v-model:value="lastName"><br />
        姓名：<span>{{fullName}}</span>
    </div>

    <script type="text/javascript">
        //创建Vue实例
        const vm = new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root')
            data: {
                firstName: "张",
                lastName: "三"
            },
            //data用于存放数据，数据供el所指定容器服务

            //计算属性
            //底层借助了Object.defineProperty实现get和set
            computed: {
                fullName: {
                    //只要有人读取fullName,get函数就会被调用
                    //计算属性最终会出现在vm上，直接使用就可以
                    //什么时候被调用？1、初次读取fullName时2、所依赖的数据发生改变时
                    get() {
                        console.log('被调用了');
                        return this.firstName + "-" + this.lastName;
                    },
                    //当fullName被修改时调用
                    //fullName没有真正属于自己的值，它的值每次都是通过计算得出来的
                    set(value) {
                        console.log(value);
                        const arr = value.split('-');
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }
        })
    </script>

//计算属性简写
//如果确定只考虑读取，不考虑修改，可以省略set，把计算属性简写成函数形式，但他本质还是属性
            computed: {
                fullName() {
                    console.log('被调用了');
                    return this.firstName + "-" + this.lastName;
                }
            }