Vue 一套构建用户界面的渐进式的框架（计算属性与监听属性篇~）

最新推荐文章于 2022-03-09 09:07:27 发布

so_#

最新推荐文章于 2022-03-09 09:07:27 发布

阅读量1.3k

点赞数

分类专栏：笔记文章 Vue 文章标签： vue

Jine

本文链接：https://blog.csdn.net/weixin_42760849/article/details/109441945

版权

文章同时被 3 个专栏收录

35 篇文章 1 订阅

订阅专栏

笔记

32 篇文章 0 订阅

订阅专栏

Vue

12 篇文章 0 订阅

订阅专栏

计算属性

概述

计算属性是vue实例中的一个配置选项：computed

通常里面都是一个个计算相关的函数，函数里头可以写大量的逻辑，最后返回
计算出来的值

即我们可以把这些计算的过程写到一个计算属性中去，然后让它动态的计算。


优点：相比methods，不用调用方法，而是直接访问计算后的属性，可读性强些。计算属性有缓存所以性能比methods高


例如：

<body>
    <div class="app">
        <h2>{{message}}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el : '.app' ,
            data : {
                firstName : 'Stephen',
                lastName : 'Curry'
            },
            computed : {
                message () {
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
    </script>
</body>

setter 和 getter （内部原理）

'计算属性的内部实现原理是通过getter和setter，如下：'

'计算属性一般是获取属性，所以setter也不常用，以下，是计算属性内部原理'



<body>
    <div class="app">
        <h2>{{message}}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el : '.app' ,
            data : {
                firstName : 'Stephen',
                lastName : 'Curry'
            },
            computed : {
                // message () {
                //     return this.firstName + ' ' + this.lastName
                // }

                // 这里message当作属性，这样符合内部的原理
                message : {
                    set (value) {
                    let newValue = value.split(' ')
                    this.firstName = newValue[0]
                    this.lastName = newValue[1]
                    },
                    get () {
                        return this.firstName + ' ' + this.lastName
                    }
                }
            }
        })
    </script>
</body>

与methods对比（缓存）

计算属性是基于它们的响应式依赖进行缓存的。
只在相关响应式依赖发生改变时它们才会重新求值。
这就意味着只要 message 还没有发生改变，多次访问,计算属性会立即返回之前的计算结果，而不必再次执行函数。

而methods不会缓存，每次都会调用一次函数来重新计算


1、计算属性比methods性能高
2、计算属性对相同的过程做了一次缓存，而methods每次都要重新计算过程

代码如下：

<body>
    <div class="app">
        <h2>computed:{{message}}</h2>
        <h2>computed:{{message}}</h2>
        <h2>computed:{{message}}</h2>
        <h2>methods:{{view()}}</h2>
        <h2>methods:{{view()}}</h2>
        <h2>methods:{{view()}}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el : '.app' , 
            data : {
                num1 : 30 , 
                num2 : 24 
            },
            computed : {
                message(){
                    console.log('computed...')
                    return this.num1 + ' ' + this.num2
                }
            },
            methods : {
                view(){
                    console.log('methods...')
                    return this.num1 + ' ' + this.num2 
                }
            }
        })
    </script>
</body>

图片结果如下：

监听属性

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="app">
        <h2>计数器：{{message}}</h2>
        <button @click='message++'>点击</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el : '.app' ,
            data : {
                message : 0
            }
        })

        app.$watch('message',function(nval,oval){
            alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
        })
    </script>
</body>
</html>

在这里插入图片描述

so_#

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 一套构建用户界面的渐进式的框架（计算属性与监听属性篇~）

计算属性概述计算属性是vue实例中的一个配置选项：computed通常里面都是一个个计算相关的函数，函数里头可以写大量的逻辑，最后返回计算出来的值即我们可以把这些计算的过程写到一个计算属性中去，然后让它动态的计算。优点：相比methods，不用调用方法，而是直接访问计算后的属性，可读性强些。计算属性有缓存所以性能比methods高例如：<body> <div class="app"> <h2>{{message}}&l
复制链接

扫一扫