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

相关推荐
LuciferHuang7 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing7 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20157 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言8 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手9 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言9 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
hackchen9 小时前
Go与JS无缝协作:Goja引擎实战之错误处理最佳实践
开发语言·javascript·golang
你的人类朋友10 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手10 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3