计算属性computed

最新推荐文章于 2024-06-22 08:12:52 发布

阿里今天不上班

最新推荐文章于 2024-06-22 08:12:52 发布

阅读量1.1k

点赞数 4

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_52905182/article/details/127651896

版权

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

一、什么是计算属性

通过一系列运算之后，最终得到一个属性值。这个属性值可以被模板结构或methods方法使用。
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。
计算属性是基于它的依赖缓存的，一个计算属性所依赖的数据发生变化，它才会重新取值，所以数据只要不改变，计算属性就不会更新，只解析一次。但是methods不同，只要重新渲染，它就会被调用，函数就会被执行。当遍历大数组和计算量很大时，应当使用计算属性。

二、基本语法

<body>
    <div id="app">
        <div>
            <span>R:</span>
            <input type="text" v-model.number="r">
        </div>
        <div>
            <span>G:</span>
            <input type="text" v-model.number="g">
        </div>
        <div>
            <span>B:</span>
            <input type="text" v-model.number="b">
        </div>
     <!-- 用户呈现小盒子  ：代表属性绑定，动态绑定一个样式对象-->
        <div class="box" :style="{ backgroundColor:rgb }">
            {{ rgb }}
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            // 红色
            r:0,
            // 绿色
            g:0,
            // 蓝色
            b:0
        },
        // 所有的计算属性，定义成“方法格式”
        computed:{
            // rgb 作为一个计算属性，定义成“方法格式”
            // 在方法中返回生成rgb（x,x,x）的字符串,并当成属性来用
            rgb:function (){
                return `rgb(${this.r},${this.g},${this.b})`
            }
        },
        methods:{
            // 点击按钮，在终端显示最新的颜色
            show(){
                console.log(this.rgb)
            }
        }
    })
</script>

三、watch和computed

computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。