Vue复习日记（每天一个知识点）计算属性 computed

最新推荐文章于 2022-10-12 22:35:06 发布

喜欢Ctrl+v的程序猿

最新推荐文章于 2022-10-12 22:35:06 发布

阅读量129

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/heshuchang1205/article/details/125381410

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="firstName">
        <br />
        <input type="text" v-model="lastName">
        <br />
        <input type="text" v-model="fullName">
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                firstName: '',
                lastName: '',
            },
           
            computed: {
                fullName: {
                    get () {
                        let that = this;
                        if (that.firstName && that.lastName) {
                            return that.firstName + ' ' + that.lastName;
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>

计算属性
1.定义：要用的属性不存在，要通过已有属性计算得来；
2.原理：底层借助了Object.defineproperty 方法提供的getter 和 setter 方法；
3.get函数什么时候执行；
  （1）.初次读取时候会执行一次；
  （2）.当依赖的数据发生改变时会被再次调用；
  4.优势：与methods相比，computed有缓存机制（可复用），效率更高，调试更加方便；