计算属性

抽象的概念不容易理解,用多了高频的场景自然就熟悉了,计算属性表现为同步处理数据.

金融领域的分期付款,P2P年化收益,带有计算性质的,都可以优先考虑computed.

不需要关注点击事件或者其他数据,只要将计算规则写在属性里,就能实时获取对应的数据.

侦听器

watch侦听器能做到的计算属性computed也能做到,什么时候适合用侦听器呢?

主要适用于与事件和交互有关的场景,数据变化为条件,适用于一个数据同时触发多个事物.

如当借款额度大于可借额度时,弹出toast提示,并将当前借款额度调整到最大额度.

可以看到,数据的变化为触发弹框提示,有且仅在一定金额条件下才触发,而不是实时触发.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- Vue是单页面应用 -->
    <div id="app">
        <!-- 计算属性不可以写()执行 -->
        <h1>{{newMsg}}</h1>
        <h1>{{priceV}}</h1>
        <h1>{{dateV}}</h1>
        <h1>{{getDate()}}</h1>
        <hr>
        <h1>{{ceshi}}</h1>
        <button @click="getC">获取计算属性ceshi的值</button>
        <button @click="changeD">改变data中的value值</button>
        <button @click="getCeshi">点击方法的时候触发</button>
    </div>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        new Vue({
            /* 挂载点 */
            el: "#app",
            /* 数据 */
            data: {
                msg:'hello',
                price:1000.00000001,
                value:99
            },
            /* 计算属性 */
            /* 计算属性具有缓存的功能 */
            /* 当data里面的数据值被改变的时候 计算属性缓存的内容才会被刷新 */
            computed:{
                newMsg:function(){
                    /* this 指的就是Vue实例化对象 */
                    console.log(this)
                    /* 一定要return */
                    return this.msg.split('').reverse().join('')
                },
                priceV:function(){
                    /* toFixed会把数字转成字符串 参数是用来保留几位小数 并四舍五入 */
                    return '￥'+this.price.toFixed(2)
                },
                /* 把毫秒数1646874284591 转成 年月日 */
                dateV:function(){
                    let oDate = new Date(1646874284591);
                    return oDate.getFullYear()+'年'+(oDate.getMonth()+1)+'月'+oDate.getDate()+'日'
                },
                ceshi:function(){
                    return this.value +'---'+ Math.random();
                }
            },
            watch:{
                /* 如果监听的是计算属性 计算属性里面的data属性里面的值例如value 
                发生了改变，才会触发监听器 */
                ceshi:function(){
                    console.log(11111)
                }
            },
            /* 定义方法的地方 */
            methods: {
                getCeshi:function(){
                    console.log('方法getCeshi：',this.value +'---'+ Math.random())
                },
                getC:function(){
                    console.log('获取计算属性ceshi的值',this.ceshi)
                },
                changeD:function(){
                    this.value++
                },
                getDate:function(){
                    let oDate = new Date(1646874284591);
                    return oDate.getFullYear()+'年'+(oDate.getMonth()+1)+'月'+oDate.getDate()+'日'
                }
            },
        })

    </script>
</body>

</html>

vue计算属性computed和侦听器watch的使用场景

计算属性

侦听器