Vue学习笔记——computed计算属性(用三种方法实现姓名的拼接，及其区别)

一.姓名案例效果

需要实现的效果：输入姓和名，动态的显示全名

修改前


修改后

1.姓名案例，用插值语法实现

<div class="root">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        全名: <span>{{firstName.slice(0,3)}}-{{lastName}} </span>
        <!-- slice(0,3)截取从0-3的字符 -->
 </div>

<script>
        Vue.config.productionTip = false;

        new Vue({
            el: '.root',
            data: {
                firstName: '张',
                lastName: '三'
            }
        })
</script>

2.姓名案例，用methods实现

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

<script>
        Vue.config.productionTip = false;

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

3.姓名案例，用计算属性(computed)实现

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

<script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: '.root',
            data: {
                firstName: '张',
                lastName: '三'
            },
            //computed只调用一次，methods调用多次
            //计算属性有缓存
            computed: {
                //只要有人读取fullName(),get就会被调用
                fullName: {
                    //get什么时候调用？
                    //1.初次读取fullName时  2.所依赖的数据发生变化时
                    get () {
                        console.log(this); //这里的this指vm
                        return this.firstName + '-' + this.lastName
                    },
                    set (value) {
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.firstName = arr[1]
                    }
                }
            }
        })
</script>

二.总结

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

三.参考

Vue3官方文档
尚硅谷Vue3视频