08_Vue计算属性

最新推荐文章于 2024-11-18 18:03:48 发布

我要学前端！

最新推荐文章于 2024-11-18 18:03:48 发布

阅读量56

点赞数

分类专栏： Vue2笔记文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/min0320/article/details/129583667

版权

Vue2笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

计算属性在Vue.js中用于创建基于其他数据动态计算的值，它使用getter和setter方法，具备缓存优化，提高性能。当依赖的数据改变时，计算属性会自动更新。示例展示了如何使用计算属性实现全名的动态显示，以及如何在必要时添加set方法以响应修改。

摘要由CSDN通过智能技术生成

1.什么是计算属性

要用的属性不存在，要通过已有属性计算得来。

2.计算属性的原理

底层借助了objcet.defineproperty方法提供的getter和setter。

3.get函数什么时候执行?

(1)初次读取时会执行一次。

(2)当依赖的数据发生改变时会被再次调用。

4.计算属性的优势

与methods实现相比，内部有缓存机制 (复用) ，效率更高，调试方便。

5.备注

1.计算属性最终会出现在vm上，直接读取使用即可。

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

例如下面的姓名案例：

<head>
    <script 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>{{fullName}}</span><br></br>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName: '三'
            },
            computed: {
                fullName: {
                    //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    //get什么时候调用？ 1.初次读取fullName时。2.所以来的数据发生变化时。
                    get() {
                        //此处的this是vm
                        return this.firstName + '-' + this.lastName
                    },
                    //set什么时候调用？当fullName被修改时
                    set(value) {
                        // 是将value字符串根据  - 进行分割 分组成数组
                        const arr = value.split('-')
                        console.log(arr);
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })
    </script>
</body>

注意：此处为了加深理解计算属性，加上了Set方法，使得计算属性可以被修改，即vm.fullName可以被修改。

其实此案例不需要修改，所以可以去掉set方法，简写为以下代码：

<head>
    <script 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>{{fullName}}</span><br></br>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName: '三'
            },
            computed: {
                //简写
                fullName() {
                    return this.firstName + '-' + this.lastName
                }

                // 完整写法
                // fullName: {
                //     //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                //     //get什么时候调用？ 1.初次读取fullName时。2.所以来的数据发生变化时。
                //     get() {
                //         //此处的this是vm
                //         return this.firstName + '-' + this.lastName
                //     },
                //     //set什么时候调用？当fullName被修改时
                //     set(value) {
                //         // 是将value字符串根据  - 进行分割 分组成数组
                //         const arr = value.split('-')
                //         console.log(arr);
                //         this.firstName = arr[0]
                //         this.lastName = arr[1]
                //     }
            }
        })
    </script>
</body>