Vue3 计算属性computed

1. 引入-翻转字符串实例

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

实例 1：模板变的很复杂起来，也不容易看懂理解

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 计算属性-反转字符串</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    {{ message.split('').reverse().join('') }}

</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值message
        data() {
            return {
               message: 'RUNOOB!'
            }
        }
    }
    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

实例2：使用了计算属性的实例

声明了一个计算属性 reversedMessage 。

提供的函数将用作属性 vm.reversedMessage 的 getter 。

vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 计算属性-反转字符串</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <p>原始字符串：{{ message }}</p>
<!--    使用计算属性翻转字符串-->
    <p>计算后反转字符串: {{ reverseMessage}}</p>

</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值message
        data() {
            return {
               message: 'RUNOOB!'
            }
        },
        computed: {
        //     计算属性的getter实现翻转字符串
            reverseMessage: function () {
            //     this指向vm实例
                return this.message.split('').reverse().join('')
            }
        }
    }
    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果：

2. computed vs methods

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

computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 计算属性VS.methods-反转字符串</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <p>原始字符串：{{ message }}</p>
<!--    使用计算属性翻转字符串-->
    <p>使用计算属性computed计算后反转字符串: {{ reverseMessage}}</p>
<!--    注意：使用methods定义方法，方法名后面必须带 -->
    <p>使用methods定义方法实现翻转字符串： {{ reverseMessage2() }}</p>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值message
        data() {
            return {
               message: 'RUNOOB!'
            }
        },
        computed: {
        //     计算属性的getter实现翻转字符串
            reverseMessage: function () {
            //     this指向vm实例
                return this.message.split('').reverse().join('')
            }
        },
    //     使用methods实现翻转字符串
        methods: {
        //     定义翻转字符串函数
            reverseMessage2: function () {
                return this.message.split('').reverse().join('')
            }
        }
    }
    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

3. computed setter

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

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 计算属性&Setter</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">

</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值message
        data() {
            return {
                name: 'Google',
                url: 'http://www.google.com'
            }
        },
        computed: {
        //     计算属性的getter
            site: {
                get: function () {
                    return this.name + ' ' + this.url
                },
                //     计算属性的setter 对传入的newValue值自己写
                set: function (newValue) {
                    // 将传入字符串的name和url分开 name和url用空格分开
                    var names = newValue.split(' ')
                    this.name = names[0]
                    this.url = names[names.length - 1]
                }
            }
        }
    }
    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    vm = Vue.createApp(HelloVueApp).mount('#app')
    document.write('name: ' + vm.name)；
    document.write('<br>')；
    document.write('url: ', vm.url)；
    document.write('<br>')；
    document.write('<br>-----------更新数据-------<br>')
    // 调用 setter更新site， vm.name 和 vm.url 也会被对应更新
    vm.site = '比亚迪官网 https://www.bydglobal.com/cn/index.html';
    document.write('name: ' + vm.name)；
    document.write('<br>')；
    document.write('url: ' + vm.url)；
    document.write('<br>')；




</script>
</body>
</html>

页面效果： vm.site = '比亚迪官网 https://www.bydglobal.com/cn/index.html'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。