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

最新推荐文章于 2022-07-19 16:23:41 发布

丸子丸子丸子酱

最新推荐文章于 2022-07-19 16:23:41 发布

阅读量127

点赞数

分类专栏： vue3前端青铜到黄金王者文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_28008615/article/details/119900405

版权

vue3前端青铜到黄金王者专栏收录该内容

16 篇文章 7 订阅

订阅专栏

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">点击访问->子酱@CSDN博客</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.csdn.net/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还是增强了不少。

总结

computed 计算属性: 适合计算一个属性, 并且绑定.

computed 可以监控跟踪到不同变量值的变化来自动计算出新的结果。

比如在做游戏网站装备售卖的时候，可以根据页面的一些状态变化。更换皮肤，提示各种消息。这样比较友好。

像绑定多个项目，一旦任何一个发生变化，影响整体值自动结算。比如像博主积分，掘金值之类的，都能应用这个来做UI组件。

今天就写到这里。

我是丸子，每天学会一个小知识。
一个前端开发
希望多多支持鼓励，感谢

丸子丸子丸子酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3前端青铜到黄金王者 - 第9个入门computed使用

v computed是什么？计算属性, 一个变量的值根据其他变量（一个或者多个）的变化，自动反映，算出新的结果。我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行当我们计算一个属性并且显示它的时候, 最简单的做法就是用computed。代码如下：<!DOCTYPE html><html lang="en"
复制链接

扫一扫