Vue笔记三——计算属性(computed)

文章目录

  • 计算属性
    • 什么是计算属性?
    • 计算属性的复杂操作
    • 计算属性的setter和getter
    • 计算属性的缓存

计算属性

什么是计算属性?

  • 我们知道,在模板中可以直接通过插值语法显示一些data中的数据。
  • 但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示
    • 比如我们又firstName和lastName两个变量,我们需要显示完整的名称。
    • 但是如果多个地方都需要显示完整的名称,我们就需要写多个{ {firstName}}{ {lastName}}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-计算属性的基本使用</title>
</head>

<body>
    <div id="app">
        <h2>{
     {
     firstName + ' ' + lastName}}</h2>
        <h2>{
     {
     firstName}} {
     {
     lastName}}</h2>
        <h2>{
     {
     getFullName()}}</h2>

    </div>

    <script src="../js/vue.js"></script>

    <script>
        const app = new Vue({
     
            el: '#app',
            data: {
     
                firstName: 'Lebron',
                lastName: 'James'
            },
            methods: {
     
                getFullName() {
     
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>
</body>

</html>
  • 我们可以将上面的代码换成计算属性:
    • OK,我们发现计算属性是写在实例computed选项中的。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-计算属性的基本使用</title>
</head>

<body>
    <div id="app">
        <h2>{
     {
     firstName + ' ' + lastName}}</h2>
        <h2>{
     {
     firstName}} {
     {
     lastName}}</h2>
        <h2>{
     {
     getFullName()}}</h2>
        <h2>{
     {
     fullName}}</h2>

    </div>

    <script src="../js/vue.js"></script>

    <script>
        const app = new Vue({
     
            el: '#app',
            data: {
     
                firstName: 'Lebron',
                lastName: 'James'
            },
            // computed:计算属性()
            computed: {
     
                fullName: function() {
     
                    return this.firstName + ' ' + this.lastName;
                }
            },
            methods: {
     
                getFullName() {
     
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>
</body>

</html>

Vue笔记三——计算属性(computed)_第1张图片

计算属性的复杂操作

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-计算属性的复杂操作</title>
</head>

<body>
    <div id="app">
        <h2>总价格:{
     {
     totalPrice}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
     
            el: '#app',
            data: {
     
                books: [{
     
                    id: 110,
                    name: '深入理解计算机原理',
                    price: 119
                }, {
     
                    id: 111,
                    name: '斗罗大陆之绝世唐门',
                    price: 643
                }, {
     
                    id: 112,
                    name: 'JavaScript从入门到精通',
                    price: 99
                }, {
     
                    id: 113,
                    name: '高等数学',
                    price: 37
                }]
            },
            computed: {
     
                totalPrice: function() {
     
                    let result = 0;
                    for (let i = 0; i < this.books.length; i++) {
     
                        result += this.books[i].price;
                    }
                    return result;
                }
            }
        })
    </script>
</body>

</html>

Vue笔记三——计算属性(computed)_第2张图片

计算属性的setter和getter

  • 我们上面用到的计算属性看起来像个函数,但实际上应该当成一个属性。(使用的时候千万不要加小括号)
computed: {
     
  fullName: function() {
     
      return this.firstName + ' ' + this.lastName;
  }
}
  • 实际上,因为计算属性的set方法一般都不用,只有get所以简化了:
fullName: {
     
    // 一般情况set都没有,只有get
    set: function() {
     

    },
    get: function() {
     
        return this.firstName + ' ' + this.lastName;
    }
}

计算属性的缓存

  • 我们可能会考虑这样一个问题:
    • methods和computed看起来都可以实现我们的功能
    • 那么为什么要多一个计算属性这个东西呢?
    • 原因:计算属性会进行缓存,如果多次使用,计算属性只会调用一次。
  • 我们看下面的代码,将methods与computed进行比较。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-计算属性和methods的对比</title>
</head>

<body>
    <div id="app">
        <!-- 1.直接拼接,过于繁琐 -->
        <h2>{
     {
     firstName}} {
     {
     lastName}}</h2>
        <!-- 2.通过定义methods -->
        <h2>{
     {
     getFullName()}}</h2>
        <h2>{
     {
     getFullName()}}</h2>
        <h2>{
     {
     getFullName()}}</h2>
        <h2>{
     {
     getFullName()}}</h2>
        <h2>{
     {
     getFullName()}}</h2>
        <!-- 3.通过定义computed -->
        <h2>{
     {
     fullName}}</h2>
        <h2>{
     {
     fullName}}</h2>
        <h2>{
     {
     fullName}}</h2>
        <h2>{
     {
     fullName}}</h2>
        <h2>{
     {
     fullName}}</h2>
        <h2>{
     {
     fullName}}</h2>

    </div>

    <script src="../js/vue.js"></script>

    <script>
        const app = new Vue({
     
            el: '#app',
            data: {
     
                firstName: 'Lebron',
                lastName: 'James'
            },
            // computed:计算属性()
            computed: {
     
                fullName: function() {
     
                    console.log('通过computed');
                    return this.firstName + ' ' + this.lastName;
                }
            },
            methods: {
     
                getFullName() {
     
                    console.log('通过methods');
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>
</body>

</html>

Vue笔记三——计算属性(computed)_第3张图片

相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。

我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

你可能感兴趣的:(vue)