vue3前端青铜到黄金王者 - 第9个入门computed使用

本文链接：https://blog.youkuaiyun.com/qq_28008615/article/details/119900405

v computed是什么？

计算属性, 一个变量的值根据其他变量（一个或者多个）的变化，自动反映，算出新的结果。

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。

而使用 methods ，在重新渲染的时候，函数总会重新调用执行

当我们计算一个属性并且显示它的时候, 最简单的做法就是用computed。

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <title>vue3青铜到黄金-丸子酱-vue-0n</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="/vue3.1.5_vue.global.js"></script>

</head>

<body>

    <div id="wzApp">

<h3><a v-bind:href="url">点击访问->子酱@优快云博客</a></h3>

<input v-model="num1" /><br/>

<input v-model="num2" /><br/>

<div>result {{result}} </div>

    </div>

</body>

<script>

    const { createApp, ref, computed } = Vue

    const url = 'https://blog.youkuaiyun.com/qq_28008615'

    const num1 = ref(0)

    const num2 = ref(1)    

    const app = {

        /*const result1 = computed(

            ()=> int(num1.value) + int(num2.value)

        )*/

        setup() {

            const result = computed(

                () => Number(num1.value) + Number(num2.value)

            )

            return {

                url, num1, num2, result

            }

        }

    }   

    createApp(app).mount('#wzApp')

</script>

</html>

其他更多读者可以试试编写一些computed属性的代码，vue3还是增强了不少。