计算属性结构

一、计算属性的基本结构

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

定义：要用的属性不存在,通过已有属性计算得来。
使用：在computed对象中定义计算属性,在页面中使用{{方法名}}来显示计算的结果。

代码如下（示例）：
【基本结构】

        new Vue({
            el:'',

            // 数据
            data:{},

            // 方法属性
            // 事件绑定,不用return,没有缓存。
            methods:{},

            // 侦听器(重视过程)
            watch:{
                要侦听的数据(){

                }
            },
            // 计算属性(重视结果)
            // 必须有return,只求结果,有缓存。
            computed:{
                计算属性名(){
                    // 经过一系列计算
                    return 处理操作后结果
                }
            }
        })

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

二、计算属性的基本使用

代码如下（示例）：

   <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(){
                    // toLowerCase()用于把字符串转换为小写
                    return this.message.toLowerCase()
                }
                    // ?将原字符串的第一个字母转换为小写
                    // substring(from,to)提取字符串中介于两个指定下标之间的字符
                    // this.message.substring(0,1).toLowerCase+message.substring(1,7)                   
                }
            }
        )
    </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>
        全名：{{ fullName }}
        <button @click="btn">改变全名</button>
       
    </div>

引入vue

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

写入内容

    <script>
        new Vue({
            el:'#app',
            data(){
                return {
                    lastName:'美',
                    firstName:'羊羊'
                }
            },
            computed:{
                fullName:{
                    // get：获取值时触发
                    // 当有人读取fullName时,get就会被调用,且返回值就作为fullName的值。
                    get(){
                        return this.lastName + '-' + this.firstName
                    },
                    // set：设置值时触发
                    // 当计算属性被修改时,调用set。
                    set(value){
                        console.log('set',value);
                        const arr = value.split('-')
                        this.firstName = arr[1]
                        this.lastName = arr[0]
                    }
                }
            },
            methods:{
                btn(){
                    this.fullName = '懒-羊羊';
                }

            }

        })
    </script>

---

总结

以上就是今天要讲的内容，本文介绍了计算属性的基本结构，使用，完整结构