vue3计算属性computed
Vue 3中的计算属性(computed)是一种方便的属性类型,用于根据其他变量或属性计算值。通过定义一个计算属性,您可以指定一个依赖于其他变量或属性的函数,每当依赖项发生变化时,该函数将重新计算并返回新的值。
在Vue 3中,您可以使用computed选项来定义计算属性。vue中计算属性也是我们在开发时常用的,vue2中计算属性computed定义如下:
export default { data() { return { fruits: ['apple', 'banana'] } }, computed: { fruitLen() { return this.fruits.length } }, mounted() { ... }, methods: { ... }, components: { ... } }
vue3中定义计算属性和vue2不一样,看下面例子:
<template> <button @click="change">修改</button> <div>{{ fullName }}</div> </template> <script setup> import { ref, computed } from 'vue' const xing = ref('张') const ming = ref('三') const fullName = computed(() => xing.value + ' ' + ming.value) function change() { const rand = Math.random() * 10 let xingVal = '张' let mingVal = '三' if (rand > 7) { xingVal = '李' mingVal = '华' } else if (rand < 4) { xingVal = '王' mingVal = '晴' } xing.value = xingVal ming.value = mingVal } </script>
vue3中是通过 import { computed } from'vue' 引入的计算属性。
计算属性优点是仅会在其响应式依赖更新时才重新计算,对于数据量大的情况下可以减少不必要的重复计算。
vue3中计算属性computed默认是只读的,如果想要直接修改,可以通过同时使用get 和 set来实现:
<template> <button @click="change">修改</button> <div>{{ fullName }}</div> </template> <script setup> import { ref, computed } from 'vue' const xing = ref('张') const ming = ref('三') // 返回的是一个ref let fullName = computed({ get() { return xing.value + ' ' + ming.value }, set(newValue) { [xing.value, ming.value] = newValue.split(' ') } }) function change() { const rand = Math.random() * 10 if (rand > 7) { fullName.value = '李 华' } else if (rand < 4) { fullName.value = '王 晴' } else { fullName.value = '张 三' } } </script>
注:computed返回的是一个ref,所以使用时要加个.value来。
在使用set和get的时候最好不要额外做其它更改动作,比如更改DOM,比如做异步请求等,防止带来副作用。
vue3
网站开发
小程序开发
阅读排行
-
1. 微信小程序中父子组件相互调用详解
在微信小程序中,组件化开发是一种重要的开发模式,它能够将复杂的界面拆分成多个独立的组件,使代码更容易维护和扩展。在组件化的开发中,父子组件之间的相互调用和传参是常见的需求。
查看详情 -
2. 微信订阅号与服务号之间的区别
要想搭建微信生态相关营销推广程序,必须要注册一个微信公众号,而微信公众号又分为“订阅号、服务号、企业号”,这二者之间有什么区别?企业在账号注册时该如何根据需求进行选择?
查看详情 -
3. 几行代码就能实现Html大转盘抽奖
大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。
查看详情 -
4. 微信小程序引入icon字体图标
其它前端项目只需要引入iconfont字体图标文件,由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远程路径换成base64引入就可以解决。
查看详情 -
5. SEO中网站URL该如何进行设计
搜索引擎优化(SEO)至关重要。经过多年的观察,我发现许多网站的URL设计仍然非常糟糕,甚至没有经过合理的设计。这些网站的URL结构可能仍然沿用了十几年前的建站方法,但现在已经无法适应当前的环境。
查看详情