Vue的计算属性

最新推荐文章于 2024-09-06 22:20:29 发布

是程小姐呀

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量194

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46075209/article/details/127177019

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

Vue的代码是由模板和实例组成的，模板也就是html标签，平常在模板内书写表达式是非常方便的，但是设计它们的初衷是用于简单运算，但是随着需求的增加在模板中放入太多的逻辑代码会使得模板过重且难以维护，所以对于任何复杂逻辑，都应当使用计算属性

本章介绍

不使用计算属性时表达式的编写
computed内计算属性编写
methods和computed对比

不使用计算属性时表达式的编写

使用插值语法

实现输入的姓和名拼接成全名

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <!-- 引入vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>

        <!-- slice(0,3) 截取输入的前三位 -->
        <!-- 模板 -->
        <div id="root">
            姓： <input type="text" v-model="firstName"><br/><br/>
            名： <input type="text" v-model:value="lastName"><br/><br/>
           全名： <span>{{firstName.slice(0,3)}}{{lastName}}</span>
        </div>
    </body>

    <script type="text/javascript">
        // 实例
        new Vue({
            el: '#root',
            data:{
                firstName : '',
                lastName: ''
            }
        })
    </script>
</html>

在这里插入图片描述

methods实现

 <body>

        <!-- slice(0,3) 截取输入的前三位 -->
        <!-- 模板 -->
        <div id="root">
            姓： <input type="text" v-model="firstName"><br/><br/>
            名： <input type="text" v-model:value="lastName"><br/><br/>
           全名： <span>{{show()}}</span>
        </div>
    </body>

    <script type="text/javascript">
        // 实例
        new Vue({
            el: '#root',
            data:{
                firstName : '',
                lastName: ''
            },
            methods: {
                show(){
                    let str=this.firstName;
                    return  str.substr(0,3)+this.lastName
                }
            },
        })
    </script>

使用计算属性时的编写

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

    <script type="text/javascript">
        const vm =new Vue({
            el: '#root',
            data:{
                firstName : '',
                lastName: ''
            },
            computed:{
                 // 完整写法
                fullName:{
                    // get 当读取fullName的值时调用get函数
                     //get被调用时机 1.初次读取fullName时  2.所引用的依赖数据发生变化时
                  get(){
                    let str=this.firstName;
                    console.log('get被调用');
                    return str.substr(0,3) +'-'+ this.lastName
                  } ,
                  set(value){
                    console.log("set被调用")
                    const arr=value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr [1]
                  }
                }
            }
        })
    </script>

计算属性会有get set方法
当引用的依赖数据发生变化时，会调用get方法
在这里插入图片描述
当修改fullName属性时会调用set方法

其实如果没有用到set方法也可以将代码简写

computed:{
// 简写 只考虑读取，不考虑修改时才能使用简写
      fullName(){
           console.log('get被调用');
           let str=this.firstName;
           return str.substr(0,3) +'-'+ this.lastName
      }
}

问题来了，使用计算属性是为了不让模板上有过多的表达式造成冗余不好维护，那为啥methods和computed实现相同的功能，为啥不能用methods来代替computed使用呢

methods和computed对比

methods

 <body>
        <!-- slice(0,3) 截取输入的前三位 -->
        <!-- 模板 -->
        <div id="root">
            姓： <input type="text" v-model="firstName"><br/><br/>
            名： <input type="text" v-model:value="lastName"><br/><br/>
           全名： <span>{{show()}}</span><br/><br/>
           全名： <span>{{show()}}</span><br/><br/>
           全名： <span>{{show()}}</span><br/><br/>
        </div>
    </body>

    <script type="text/javascript">
        // 实例
        new Vue({
            el: '#root',
            data:{
                firstName : '',
                lastName: ''
            },
            methods: {
                show(){
                    console.log("调用了show()");
                    let str=this.firstName;
                    return  str.substr(0,3)+this.lastName
                }
            },
        })
    </script>

在这里插入图片描述
输入一个1，show()方法被调用了三次

computed

 <body>
        <!-- slice(0,3) 截取输入的前三位 -->
        <div id="root">
            姓： <input type="text" v-model="firstName"><br/><br/>
            名： <input type="text" v-model:value="lastName"><br/><br/>
           <!-- 执行一次后后面的值不需要再执行了，会读缓存中的值 -->
           全名： <span>{{fullName}}</span><br/><br/>
           全名： <span>{{fullName}}</span><br/><br/>
           全名： <span>{{fullName}}</span><br/><br/>
        </div>
    </body>

    <script type="text/javascript">
        const vm =new Vue({
            el: '#root',
            data:{
                firstName: '',
                lastName:  ''
            },
            methods:{
            
            },
            computed:{
                fullName(){
                    let str=this.firstName;
                    console.log('get被调用');
                    return str.substr(0,3) +'-'+ this.lastName
                }
            }
        })
    </script>