Vue3学习心得2-我对计算属性的理解

83 阅读 0 评论 55 点赞

我是靠谱客的博主火星上秋天，这篇文章主要介绍Vue3学习心得2-我对计算属性的理解，现在分享给大家，希望可以做个参考。

Overview

计算属性，字面意思，就是计算属性，属性是指（我的理解）data中的数据，计算即处理。

例

 <div id="a">
        <p>{{name}}</p>
 </div>

const vm = Vue.createApp({
    data() {
        return {name: 'Extra'}
        },
    computed: {
        fname: {
            get() {
                console.log("被调用了");
                return this.name = 'fangyuan'
            }
        }
    }
}).mount("#a");

此时在控制台输入vm，查找fname，点击查看后，会发现打印被调用了。

总结

计算属性作用与其他函数都有重合之处。
计算属性与data()都可存储数据。计算属性与data()的区别在于它有计算的功能。
计算属性与methods()都可计算。计算属性被重复访问并不会多次计算，而是返回上次计算的结果，直到下次更新；methods()则是响应式的，会实时更新。
更新取决于依赖是否改变，依赖指计算属性所需的变量，如例子中的name。
至于计算属性 vs 侦听器，原教程讲得最易懂。