vue的计算属性

vue的计算属性

• 实力上面的computed属性
• 使用场景:
  • 使用一些数据时，需要进行变形计算,从而得到新值，这个时候就可以使用计算属性
• 注意:
  • 计算属性在定义时是方法,但是编译的时候是挂载实例作为实例属性存在
  • 计算属性，一旦计算完成后，立即根据依赖将结果缓存， 在多次使用时， 只要依赖没有改变，不会重新计算，使用缓存的值

下面来看一个实例

• 输入一个人的身高和体重，从而计算个人的BMI
• BMI = 体重 / 身高 ^ 2

    <div id="app" v-cloak>
        体重:<input type="number" placeholder="请输入体重" v-model="weight">
        身高: <input type="number" placeholder="请输入身高" v-model="height">
        <br>
        您的BMI为:{{ calcBMI }}
    </div>

        const { createApp } = Vue
        const app = createApp({
            data(){
                return{
                    weight:0,
                    height:0
                }
            },
            computed: {
                calcBMI(){
                    if(this.weight === 0 ){
                        return 0
                    }
                    return this.weight / this.height / this.height
                }
            },
            //实例的方法，会自动触发
            mounted(){
                console.log(this)
            }
        })
        app.mount("#app")