Vue计算属性-优快云博客

本文链接：https://blog.youkuaiyun.com/Lxingling/article/details/127348456

一、计算属性的基本架构

可以在里面写一些计算逻辑的属性。他不像普通函数那样直接返回结果,而是经过一系列计算之后再返回结果。同时只要在它当中应用了data中的某个属性，当这个属性发生变化时,计算属性可以嗅探到这种变化,并自动执行

定义:要用的属性不存在,通过已有属性计算得来。

使用:在computed对象中定义计算属性,在页面中使用{{方法名}}来显示计算的结果

计算属性的缓存特性

第一次调用计算属性时,会产生一个结果,这个结果会被缓存起来,后面每次用这个属性都是从缓存里取。当它的依赖项发生改变,会重新计算得到一个结果,再缓存起来。

基本结构

       new Vue({
            el:'',// 数据 
            data:{},
            // 方法属性
            // 事件绑定,不用return,没有缓存。 
            methods:{},
            // 侦听器(重视过程)
            // 监听一个值的改变,不用返回值。 
            watch:{
            要侦听的数据(){}
             },
            // 计算属性(重视结果)
            // 必须有return,只求结果,有缓存。 
            computed:{
            计算属性名(){
           // 经过一系列计算
           return处理操作后结果	
            }
            }

二、计算属性的基本使用

  <body>
        <div id="app">
        <p>原始字符串:{{ message }}</p>
        <p>计算反转后的字符串:{{·reverseMessage·}}</p>
        <p>将原字符串转为小写:{{ toLowerCase}}</p>
    </div>
        
        <script src="../vue.js"></script>
        <script>
            new Vue ({
                el:'#app', 
                data:{
                    message:'ABCDEFG'
                },
                computed:{
                    // 计算反转后的字符串
                    reverseMessage:function(){
                        // split()把一个字符串分割成字符串数组
                        // reverse()颠倒数组中元素的顺序
                        // join()把数组中的所有元素转换为一个字符串
                        return this.message.split('').reverse().join('')
                    },

                    //将原来字符串转换为小写
                    toLowerCase(){
                        //substring(from,to)提取字符串中介于两个1指定下标之间的字符
                        // toLowerCase()用于把字符串转换成小写
                        return this.message.substring(0,7).toLowerCase()
                    }
                }        

            })
    </script>

三、计算属性的完整结构

1.每一个计算属性都包含一个getter函数与setter函数。

2.计算属性会默认使用getter函数，setter函数并不常见,所以一般计算属性getter和setter都不写。

3.getter函数是默认用法,setter函数不是默认用法。如果要使用setter函数,必须手动写出setter函数。

4.setter函数内的形参是你要修改的值

    <!-- 准备好一个容器 -->
    <div id="app">
        姓:<input type="text" v-model="lastName"> <br><br>
        名:<input type="text" v-model="firstName"> <br><br>
        全名:<span>{{ fullName }}</span> <br><br>
        <button @click="btn">修改计算属性的值</button>
    </div>

    <!-- 引入Vue -->
    <script src="../vue.js"></script>

    <script>
        new Vue({
            el:'#app', data(){
                return {
                    firstName:'图图', 
                    lastName:'胡'
                }
            },
        computed:{
            fullName:{
                // get: 获取值时触发
                // 当有人读取fullName时,get就会被调用,且返回值就作为fullName的值。 
                get(){
                    return this.firstName + '_' +this.lastName;
                },
                // set:设置值时触发
                // 当计算属性被修改时,调用set。
                set(value){		
                    console.log('set',value);
                }
            }
        },

        methods:{
            btn(){	
                this.fullName ='胡-英俊';
            }
        }
    })	
    </script>