Vue3 计算属性computed

文章目录

  • [Vue3 计算属性computed](#Vue3 计算属性computed)
    • [1. 引入-翻转字符串实例](#1. 引入-翻转字符串实例)
    • [2. computed vs methods](#2. computed vs methods)
    • [3. computed setter](#3. computed setter)

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 也会被对应更新。

相关推荐
徐小夕几秒前
牛!用vue3实现的多维表格编辑器,小白也能轻松构建复杂数据报表!
前端·javascript·vue.js
程十六2 分钟前
工匠指南:从 Vue 3 源码中学习高质量代码的艺术
javascript·vue.js
爱编程的喵3 分钟前
CSS动画实战:从零打造一个超萌的小球亲亲动画
前端·css
zmirror4 分钟前
Webpack5 多页面实践
前端
cccyi75 分钟前
vue前置知识-end
前端·javascript·vue.js
JaysonJin8 分钟前
一文搞懂 Vue Router 的钩子函数和实战用法!
前端
DoraBigHead11 分钟前
for...in 和 for...of 的终极区别:一文彻底解决你的困惑
前端·javascript·面试
FairyDiana14 分钟前
【JavaScript】✨0、1与"true"的恋爱物语:JS类型转换大揭秘
javascript·面试
JaysonJin14 分钟前
教你如何用 localStorage+Vue 状态管理玩转数据持久化!
前端·面试
0wioiw015 分钟前
Flutter基础(前端教程⑦-Http和卡片)
前端·flutter·http