Vue3 _ 6. Vue 计算属性

一、什么是计算属性

我们先来看官网的例子。

可以看到哈，这个是通过判断 author.books 的数组长度来进行显示 YES 或者 NO 的。这个是可以使用的，但是如果我们在代码中这样的东西写的太多了，等后期进行维护的时候，这个是很费劲的，所以 Vue 提供了一个属性：computed。

二、computed 使用

首先自己复制一下官网上的例子。

然后我们来进行改造。首先是定义 computed，这个属性是和 data 在同一层，（定义方式类似 method）

接下来，我们在里面定义一个计算属性的方法 publishedBooksMessage()，直接 return 我们计算好之后的值即可。来看一下

这里要注意一下，这里的 this 是指代的 整个 Vue 对象。

写好之后，我们只需要将这个计算属性直接绑定到我们的页面中即可。

这里要注意的是，它不是方法，不要手贱自己加个小括号！！！

三、计算属性缓存 vs 方法

我们再来想一个问题，我们使用 method 也可以改变字段的值，为啥我们还要用 computed 呢？

这里我们来看一个例子。

可以看到，我们这个现在显示的都是 new Date()，通过点击 updateDate 进行从新获取数据。然后我们来点击一下。

可以看到，这上面的时间变了，但是下面的时间没有变。

这个是因为 Date.now () 不是响应式依赖，相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 list，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 list。如果没有缓存，我们将不可避免的多次执行 list 的 getter！如果你不希望有缓存，请用 method 来替代。

所以我们要知道这个 computed 是可以用来做什么的。

四、getter & setter

其实我们 computed 中写的计算属性，里面其实还有分方法的。完整的一个计算属性是这样的。来看例子。

这里要仔细看，updateDate1 这个其实是一个 对象，里面有一个 get 方法，一个 set 方法。

我们其实默认的是调用的 get 方法，set 的话很少会用。然后为了省略写法。我们来写个例子使用一下。

<div id="app">
    正常
    <button @click="updateDate()">改变 str 的值</button>
    <div>{{updateDate1}}</div>
</div>

<script src="vuejs/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            updateDateTime: new Date()
        },
        methods:{
            updateDate() {
                vm.updateDate1 = new Date();
            }
        },
        computed: {
            updateDate1: {
                get() {
                    return this.updateDateTime;
                },
                set(newValue) {
                    this.updateDateTime = newValue;
                }
            }
        }
    });
</script>

我们通过点击 updateDate() 方法，在 methods 进行改变 updateDate1 这个计算属性的值，然后通过 set 方式，将这个 new Date() 传递给 set 的 newValue。然后我们赋值给绑定属性 updateDateTime，最后通过 get 方式进行改变值。

运行一下~~~

这一篇东西不多，自己练习一下

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~~