Vue使用函数实现计算属性、计算属性的实现和简写

于 2024-08-12 09:18:12 发布
阅读量303 收藏 4
点赞数 8
分类专栏： Vue 文章标签： vue.js 使用函数实现计算属性 计算属性 计算属性简写 计算属性的实现
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yy8623977/article/details/131624316
版权

目录

1. 使用函数实现计算属性

当修改姓或名，vue会去重新加载模板，然后函数也会被调用。但如果模板中存在多个fullName()，则会被调用多次而不是一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    姓：<input type="text" v-model="firstName"> <br/>
    名：<input type="text" v-model="lastName"> <br/>
    全名：<span>{{fullName()}}</span>
</div>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三'
        },
        methods: {
            fullName() {
                return this.firstName + '-' + this.lastName
            }
        }
    })
</script>

</body>
</html>

效果如下：
函数实现计算属性

2. 计算属性

通过computed来定义计算属性。计算属性不能通过vm._data访问

可以设置getter方法

  1. 当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
  2. getter调用时候。初次读取fullName时，或所依赖的数据发生变化时

可以设置setter方法。当fullName被修改时setter被调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    姓：<input type="text" v-model="firstName"> <br/>
    名：<input type="text" v-model="lastName"> <br/>
    全名：<span>{{fullName}}</span>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三'
        },
        computed: {
            fullName: {
                get() {
                    // console.log(this) //此处的this是vm
                    return this.firstName + '-' + this.lastName
                },
                set(value) {
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
</script>

</body>
</html>

效果如下：
计算属性

3. 计算属性简写

当计算属性只要getter，没有setter，可以进行简写

        computed: {
            fullName() {
                return this.firstName + '-' + this.lastName

            }
        }
Bulut0907
关注
专栏目录
Vue3 - computed 计算属性（详细教程）
王佳斌
11-16 9437
Vue.js 官方文档，vue3 计算属性官方文档教程，vue3.0computed计算属性，前端之vue3计算属性computed，vue computed项目实战，vue3快速入门-computed计算属性，vue3学习之计算属性computed，Vue3.x computed函数---计算属性，vue3的计算属性computed，Vue3使用计算属性 computed，在vue3 中, computed 计算属性性能问题，Vue3 计算属性 | 菜鸟教程，Vue3 - computed 计算属性（详细
浅谈Vue中计算属性（computed）
最新发布
He_9a9的博客
09-06 1105
浅谈vue中的computed的属性概念，使用场景，优缺点以及实现缓存的过程
vue-计算属性与钩子函数
qq_42438026的博客
08-25 400
计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。 在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方，模板不再是简单的声明式逻辑。 你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。 当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。 所以，对于任何复杂逻辑，你
Vue3的计算函数
richest_qi的博客
03-17 2626
文章目录计算属性的简写计算属性的完整写法 Vue3中的计算属性有两种写法：简写和完整写法。下面一一介绍下。 计算属性的简写 main.js import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') App.vue <template> <Demo/> </template> <script> import Demo from
23-Vue-计算属性和函数
m0_57783938的博客
08-19 409
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>23-Vue-计算属性和函数</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.计算属性和函数 通过计算属性我们能拿到处理后的数据, 但是通过函
Vue 监听函数和计算函数
TongJ_的博客
08-14 536
Vue 监听函数和计算函数。
Vue2.X 计算属性和函数
cc常 的博客
03-17 466
Vue2.x 计算属性和函数 写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！ 学习来源： Vue + Vue-Cli 快速入门教程 李南江老师各平台账号： 微博：极客江南 微信公众号：李南江 腾讯课堂： 李南江 网易云课堂：李南江 计算属性和函数 通过计算属性我们能拿到处理后的数据, 但是通过函数我们也能拿到处理后的数据 那么计算属性和函数有什么区别呢? 1、函数"不会"将计算的结果缓存起来, 每一次访问都会重新求值 2、计算属性"会"将计算的结果缓存起来, 只要数据没有发生变化, 就
Vue-计算属性的使用
weixin_56263402的博客
06-20 1万+
1.计算属性：首先它是一个属性，所以使用方式跟其他的属性没什么，就是定义的时候不同 2.定义计算属性：写法上是一个函数，这个函数的返回值就是
vue计算属性
qq_27009517的博客
06-22 87
newValue=app.fullName的值 计算属性的缓存 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue-2.5.21/dist/vue.js" type="text/javascript" charset="utf-8"></script&gt...
vue计算属性computed、事件、监听器watch的使用讲解
10-17
以上内容详细介绍了Vue计算属性(computed)、方法(methods)、监听器(watch)的使用方法和区别，并通过实例展示了它们在实际开发中的应用。理解这些知识点对于提升Vue.js开发效率和代码质量具有重要意义。
Vue中使用方法、计算属性或观察者的方法实例详解
10-17
为了实现这一功能，Vue提供了一些核心概念，如methods、计算属性(computed)和观察者(watcher)。这些是Vue框架中最常使用的响应式系统，它们各自有不同的应用场景和优势。以下将详细介绍这些特性的使用方法和适用场景...
Vue自学之—计算属性
u011150251的博客
03-21 575
定义：要用的计算属性实际上是不存在的，而是要通过已有属性计算得来。原理：底层借助了Object.defineProperty方法提供的getter和setter。get函数什么时候执行？初次读取时会执行。当依赖的数发生改变时会被再次调用。优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。备注：计算属性最终出现在vm上，直接读取使用即可。如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
vue3【计算属性与监听-详】
蜗牛~~
11-17 3501
vue3【计算属性与监听-详】
VUE学习---------computed计算函数
代码君的博客
11-30 860
定义参数money和a 定义计算函数b 直接输出计算函数中的结果
Vue 3 第七章：computed计算属性
热门推荐
to_the_Future的博客
03-02 4万+
computed属性是Vue3中的一个响应式计算属性，它可以根据其他响应式数据的变化而自动更新其自身的值。computed属性可以接收一个计算函数，并在计算函数中使用其他响应式数据的值进行计算。当任何一个参与计算的响应式数据发生变化时，computed属性会自动重新计算其值，并触发相应的依赖更新。
Vue-计算属性（computed）和方法函数 (methods)
weixin_45865343的博客
08-13 1196
computed和methods的区别 计算属性 : computed 计算属性是写在实例的computed选项中的，且不需要加小括号（） 完整的计算属性的写法 计算属性一般是没有set方法，只有只读属性（删除set方法） <body> <div id="app"> <h2>{{fullName}}</h2> </div> <script src = "js/vue.js"></script> &l
小谈 Vue 中函数和计算属性的区别
喵叔
08-30 481
在 vue 中存在函数和计算属性，部分开发人员其实并不清楚函数和计算属性的区别，甚至有些开发人员还认为函数和计算属性在任何情况下都能相互转换。情况真的是这样吗？下面我就来简单的说一下函数和计算属性的区别。 首先我们来看一个例子，在网页中分别使用计算属性和函数实现姓名拼接，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<
vue computed计算属性的get和set函数
zhaohanqq的博客
11-26 6449
get和set都是回调函数 什么是回调函数：1/你定义的 2/你没有调用 3/但最终执行了 关于回调函数需要知道的两个问题：1/什么时候调用 2/用来做什么 const vm = new Vue { data: { firstName; ‘A’， lastName: 'B' }, computed: { fullName: { //1/当需要读取当前属性值时调用(初始化)/...
vue3组合式计算属性
09-02
在Vue3中，计算属性被改造成了一个组合式的API，使用时需要从Vue中引入，并在setup函数中进行配置。在Vue3中，计算属性仍然有两种写法，简写和全写。 简写的计算属性只有get方法，可以使用computed函数进行简写。例如，在setup函数中可以这样定义一个计算属性： ``` import { computed } from 'vue' setup() { let fullName = computed(() => { // 计算属性的逻辑 return // 计算结果 }) return { fullName } } ``` 全写的计算属性有get和set方法，可以使用computed函数的完整写法。例如，在setup函数中可以这样定义一个计算属性： ``` import { computed } from 'vue' setup() { let fullName = computed({ get() { // 计算属性的逻辑 return // 计算结果 }, set(value) { // 设置计算属性的逻辑 } }) return { fullName } } ``` 以上是关于Vue3组合式计算属性的示例代码和使用方式。在模板中，可以通过双花括号的方式引用计算属性的值，或者通过v-model指令绑定计算属性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue3的组合API——计算属性computed与监视watch](https://blog.csdn.net/mantou_riji/article/details/125963552)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue3中的计算属性](https://blog.csdn.net/m0_56219678/article/details/122846714)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值