vue计算属性的用法

前言

在日常工作中 , 数据的计算是必不可少的 , 有些数据可以简单计算 , 还有一些数据则需要进行一些逻辑处理, 这个时候计算属性的作用就体现出来了 , 下面一起来聊聊计算属性的用法吧 !

一. 计算属性的格式

{
    data(){},
    methods: {}
    // 声明计算属性
    computed: {
        //属性名字（计算属性名称）
        //属性的值（计算属性处理函数）
        计算属性名 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }
    }
}

computed 是vue的配置选项，它的值是一个对象，其中可定义多个计算属性，每个计算属性就是一个函数。>

二. 代码示例

<div>
    <p>计算属性：{{ resMsg }}</p>
    <p>计算属性：{{ resMsg }}</p>
    <p>计算属性：{{ resMsg }}</p>
    <hr>
    <p>函数：{{eveMsg()}}</p>
    <p>函数：{{eveMsg()}}</p>
    <p>函数：{{eveMsg()}}</p>
</div>

<script>
        data() {
            return { content: 'javascript' }
        },
        methods: {
            updateMsg () {
                    this.content = "123"
          // 计算属性有缓存，虽然在页面上用到三次，但它的函数体只执行一次。
            },
            eveMsg () {
                console.log( '函数 eveMsg' )
                //把content的翻转一下
                let newObj = this.content.split('').reverse().join('')
                return newObj
            }
        },
        computed: {
            resMsg () {
                //把msg的翻转一下
                let newObj = this.content.split('').reverse().join('')
                return newObj
            }
        }
</script>

在计算属性中声明的是函数，但是在模板中使用，当中数据来使用，不需要加括号

总结

1.在计算属性的function内部，任何data发生改变，这个计算属性就会重新计算

2.计算属性的结果会被暂时缓存，这样会方便下次使用

3.如果计算属性中依赖的数据项变化时，它会自动调用。