vue3前端青铜到黄金王者 - 第10个入门computed使用set和get

最新推荐文章于 2024-05-27 15:30:45 发布

丸子丸子丸子酱

最新推荐文章于 2024-05-27 15:30:45 发布

阅读量2k

点赞数 6

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

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

版权

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

16 篇文章 7 订阅

订阅专栏

前篇写了computed属性，但是我们发现不能修改computed属性的值。

其实可以修改的我们再看看。

v computed是什么？

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

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

好，复习前面的。我们这里改造成get 和set方法。

代码如下：

<!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>
<br/><div><input v-model="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)
            )*/
            const result = computed({
                get: ()=> Number(num1.value) + Number(num2.value),
                set:(v)=> v
            })
            result.value = 20
            return {
                url, num1, num2, result
            }
        }
    }   
    createApp(app).mount('#wzApp')
</script>
</html>

运行效果如下：

第一，我直接修改第三个绑定result computed属性的。
结果是可以被修改到的。但是上面的result div块不会被更新，因为result div内绑定的是get取值的方法。
在这里插入图片描述

第二，我直接修改第二个绑定num2 的属性的。
页面上所有的result div块会被更新，因为result div内绑定的是get取值的方法。
在这里插入图片描述

我们发现computed属性不允许修改，控制台报错了。（下一篇再讲解）
其他更多读者可以试试编写一些computed属性的代码，vue3还是增强了不少。

总结

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

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

通过set/get方法让computed属性更加弹性了。

今天就写到这里。

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

丸子丸子丸子酱

关注

6
点赞
踩
14

收藏

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

前篇写了computed属性，但是我们发现不能修改computed属性的值。其实可以修改的我们再看看。v computed是什么？计算属性, 一个变量的值根据其他变量（一个或者多个）的变化，自动反映，算出新的结果。我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。好，复习前面的。我们这里改造成get 和set方法。代码如下：<!DOCTYPE html><html l
复制链接

扫一扫