尽管可以通过定义函数的方式来实现计算，但函数每次调用都会执行，所以开销比较大。
使用computed计算属性可以很好的规避这个问题。在响应式数据类型没有发生变化时，computed一直可以存储计算结果，类似于缓存，当响应式数据类型发生变动时，computed计算属性会再次重新计算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue conputed的使用</title>
</head>
<body>
    <div id="app">
    <p>数据一：<input type="text" v-model.number="a"></p>
    <p>数据二：<input type="text" v-model.number="b"></p>
    <p>sum = {{sum()}}</p>
    <p>sum = {{sum()}}</p>
    <p>sub = {{sub}}</p>
    <p>sub = {{sub}}</p>
    </div>

    <script type="module">

        import {createApp,ref,reactive,computed} from './vue.esm-browser.js'

        createApp({
            setup(){

                let a = ref(7)
                let b = ref(3)

                let sum = ()=>{
                    console.log(a.value+b.value)
                    return a.value+b.value
                }

                let sub = computed(()=>{
                    console.log(a.value-b.value)
                    return a.value-b.value
                })

                return {
                    sum,
                    a,
                    b,
                    sub
                }
            }
        }).mount('#app')

    </script>
</body>
</html>

标签: none

评论已关闭