VUE中 filters、computed、methods、watch用法

过滤器filters
可被用于一些常见的文本格式化
获取不到this
可以接受参数
计算属性comuted
对于任何复杂逻辑，你都应当使用计算属性
计算缓存
可以获取this
不可以接受参数
方法methods
...
侦听器watch
当需要在数据变化时执行异步或开销较大的操作时
!!!慎用
<template>

<div>
    <div>{{status}}</div>

    <div>{{statusMethod(status)}}</div>

    <div>{{statusComputed}}</div>

    <div>{{status | statusFilter}}</div>

    <div v-if="show">{{sum}}</div>

    <button @click="cliskC">click{{s}}</button>
</div>

</template>

<script>

export default {
    data() {
        return {
            show: false,
            s: '',
            j: 0,
            status: '2',
            statusMap: {
                '1': '开始',
                '2': '进行中',
                '3': '结束'
            }
        }
    },
    mounted() {
        setTimeout(() => {
            this.show = true;
        }, 3000)
    },
    computed: {
        statusComputed() {
            return this.statusMap[this.status]
        },
        sum() {
            console.log(new Date().getTime())
            var sum = 0;
            for(let i=0; i< 900000000; i++){
                sum+=i;
            }
            console.log(new Date().getTime())
            return sum  + this.j;
        }
    },
    methods: {
        statusMethod(status) {
            return this.statusMap[status]
        },
        cliskC() {
            this.j++;
            this.s = this.sum;
        }
    },
    filters: {
        statusFilter(status) {
            let statusMap = {
                '1': '开始',
                '2': '进行中',
                '3': '结束'
            }
            return statusMap[status]
        }
    }
}

</script>