[前端暴龙机，Vue2.x 进化 Vue3 ] Day9.计算属性 computed

甚麽是计算属性? 甚麽时候用计算属性? 接下来带大家来看看，也会搭配一些例子~

甚麽是计算属性?

computed 是 Vue 提供的 计算属性，它可以帮我们运算一些逻辑，然後返回我们预期得到的值，所以 computed 内的会是一个函式，但会是被当作 data 的变数来使用，因为它返回的是一个值

甚麽时候用计算属性?

当我们拿到的原始资料需要进行过滤、数字运算 ... 等，我们希望先进行这些动作，再渲染到画面上的时候
另外，因为 computed 会有监听的特性，所以当要被运算的内容发生变动，就可以立即响应渲染到画面上~
不过有一点要注意，被运算的内容，必需是被宣告在 data 内的才会有效果(下面例子会展示)

写个 computed 吧

接下来实作 computed ，来更理解它吧~

不会启动监听的例子

<div id="app">
   <p>
        now = {{ timer }}
   </p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {},
        computed:{
            timer(){
                return new Date();
            }
        }
    })
</script>

这个例子原本期望是可以当成时钟，自动更新时间，但是运行後却发现，它虽然写在 computed 内，却没有自动触发更新时间，因为 new Date() 并非 data 内所宣告的

简单的价目统计

这边例子为，写一个菜单价目表，当使用者输入数量，自动帮我们算出总共花费

<div id="app">
    <div>
        <span>美味蟹堡 $50 </span>
        <input type="text" v-model="Hamburger">
    </div>
    <div>
        <span>薯条 $30 </span>
        <input type="text" v-model="fries">
    </div>
    <div>
        <span>可乐 $45 </span>
        <input type="text" v-model="Cola">
    </div>
    总共花费 : ${{ price }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            Hamburger: 0,
            fries: 0,
            Cola: 0
        },
        computed: {
            price() {
                return this.Hamburger*50 + this.fries*30 + this.Cola*45;
            }
        }
    })
</script>

当我们更改了输入框的数量，总共花费的 ${{ price }} 会自动计算并更新，因为在 data 内变数的值发生了变动

原始状态

每次输入触发更新，计算总花费

资料过滤

另外一个使用的时机，就是可以用来过滤渲染的资料，所以当过滤的条件变更时就可以自动呈现过滤完的资料
(这麽好用的东西，之前居然没去注意到)

<div id="app">
    <p>偏远的郊区 - 怪兽列表</p></p>
    筛选怪物 : <input type="text" v-model="findTag">
    <p>
        {{ filterMonster }}
    </p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            findTag:'',
            monsterList: [
                { name: '千年九尾狐', tag: "Boss" },
                { name: '万年蛇精', tag: "Boss" },
                { name: '小地精', tag: "Mobs" },
                { name: '史莱姆', tag: "Mobs" },
            ]
        },
        computed: {
            filterMonster() {
                if(this.findTag === ''){
                    return this.monsterList;
                }else{
                    return this.monsterList.filter(ele => ele.tag === this.findTag);
                }     
            },

        }
    })
</script>

原始状态

如果变数 findTag 预设为 Boss，就会自动筛选

而且之後只要用户输入条件改变，我们不用做，computed 都帮我们做好了~ 方便吧XD