计算属性 --- vue(4)

Acthion

听到一个名词哈！分享一下！
响应式数据
举个例就是，vue中data的数据有一个改变，那么会有多个数据因为这个数据要做出改变。，其他数据会因为这个数据而做出响应！！！

计算属性

<div id="app">
        <p>Has published books:</p>
        <span>{{ publishedBooksMessage }}</span><br>
        <span>{{ publishedBooksMessage }}</span><br>
        <span>{{ publishedBooksMessage }}</span><br>
    </div>



    <script src="vue3.js"></script>
    <script>

        let Root = {
            data() {
                return {
                    author: {
                        name: 'John Doe',
                        books: [
                            'Vue 2 - Advanced Guide',
                            'Vue 3 - Basic Guide',
                            'Vue 4 - The Mystery'
                        ]
                    }
                }
            },
            // 可以设置多个计算属性，每个都是一个方法
            computed: {
                publishedBooksMessage (){
                    return this.author.books.length
                }
            }
        }

        // 创建一个Vue应用
        const app = Vue.createApp(Root)
        // 进行挂载
        const vm = app.mount('#app')

    </script>

到这的时候，肯定不少人会问，有啥区别，话不如直接使用内联的写法，但是，当我们若干的元素需要修改业务逻辑的时候，会很难进行维护，而重复的东西，在计算属性里面直接修改即可，响应式数据嘛，那不直接就安排到位了！！！

那么直接调用方法行不行呢？？？
答案是可以的哈！！

但是，跟着官方走：

我们可以将同样的函数定义为一个方法，而不是一个计算属性。从最终结果来说，这两种实现方式确实是完全相同的。然而，不同的是计算属性将基于它们的响应依赖关系缓存。计算属性只会在相关响应式依赖发生改变时重新求值。这就意味着只要 author.books 还没有发生改变，多次访问 publishedBookMessage 时计算属性会立即返回之前的计算结果，而不必再次执行函数。

什么意思呢？
就是如果你多次调用这个计算属性，但是，里面其实并没有发生改变，所以，会在内存中直接取出来，自然是需要牺牲一点内存的

看看官方对于方法的解释：

相比之下，每当触发重新渲染时，调用方法将始终会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 list，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 list。如果没有缓存，我们将不可避免的多次执行 list 的 getter！如果你不希望有缓存，请用 method 来替代。

解释一下：
也就是说，如果是方法，你每次调用会走一遍，假如你要调用10次，那么就需要走10次方法，自然是得不偿失的。

setter方法

这个太简单了，直接跟着官方走

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

        <span>{{ firstName }}</span><br>
        <span>{{ lastName }}</span><br>

computed: {
                publishedBooksMessage() {
                    return this.author.books.length
                },
                fullName: {
                    // getter
                    get() {
                        return this.firstName + ' ' + this.lastName
                    },
                    // setter
                    set(newValue) {
                        const names = newValue.split(' ')
                        this.firstName = names[0]
                        this.lastName = names[names.length - 1]
                    }
                },

            }

侦听器我感觉非常啊ok哈，但是直接去看官网比较好！！！