Vue3的computed

百香果果ccc

已于 2023-07-11 11:46:19 修改

阅读量295

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2023-07-11 11:37:05 首次发布

本文链接：https://blog.csdn.net/wytccc/article/details/131656683

版权

Vue 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

该文章展示了在Vue3中如何使用`setup`函数和`computed`属性，通过`ref`创建响应式数据`msg`，然后定义一个计算属性`addPrefix`，它返回`msg`前缀井号#的结果。这与Vue2中的computed属性功能相似，提供了setter和getter。

摘要由CSDN通过智能技术生成

引入computed函数，传入函数或配置项（同vue2），最后将此计算属性暴露出去

<template>
	<p>{{msg}}</p>
	<p>{{addPrefix}}</p>
</template>

<script>
import { ref, computed } from 'vue';
export default {
	setup() {
		let msg = ref('hello world');
		// 此处也可传入配置项，实现setter、getter、同vue2的computed
		let addPrefix = computed(() => {
			return 	'#' + msg.value;
		});
		return {
			msg,
			addPrefix
		}
	}
}
</script>