Vue3.0 computed计算属性:VCA

本文主要是介绍Vue3.0 computed计算属性:VCA，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、Vue3 计算属性computed函数介绍与语法

计算属性:计算属性与方法函数的区别就是计算属性存在缓存，只要函数内变量变化, 会自动重新计算结果返回，不变化则从缓存中直接取值返回

// 第一种语法get方法 （没有set）
const 函数名 = computed(() => {return 
})// 第二种语法 get set 方法 带有set参数 可以设置
const 函数名 = computed(() => {get() { return 结果 },set( val ){  }
})

触发场景:
1. 如果要访问计算属性会自动执行 get
2. 如果要修改计算属性会自动执行 set
简介:
1. get函数就等同于简单写法的函数胡计算属性必须要有 get 而且需要 return 来返回结果
2. set方法第一个参数可以监听用户输入新值与旧值
注意:
1. 修改计算属性时需要使用完整写法也就是上面语法内第二种写法
2. 修改时会自动执行set函数
3. 获取数据时会自动执行get函数

二、Vue3 Vue2 computed计算属性能不能传参怎么传参

传参结构

<template><div><!-- 计算属性传参 --><div>{{ desiredComputed(2023, "30k") }}</div></div>
</template>
<script>
import { computed } from 'vue';
export default {setup() {    const desiredComputed = computed(() => { //可以传递参数的计算属性: 计算属性可以传参它是通过函数返回一个函数的形式return function (year, salary) {return `${year}年，我期望的薪资是:${salary}` //用${}实现拼接字符串需要用``反括号包裹起来（就是按键1前面的按个键）}})return {desiredComputed,}}
}
</script>

总结:
1. 计算属性可以传参是通过函数返回一个函数的形式可以自定义各种数据显示
2. 计算属性Vue2 Vue3都可以传参只要依赖的数据不发生改变依然有缓存可以按需做一些动态的数据显示
Vue3 和 Vue2 的去区别:
1. Vue是通过 computed 选项配置写的
2. Vue3 需要导入一个函数

案列

<template><div><div> {{ myComputedName }}</div><div> {{ myComputedName }}</div><!-- 计算属性传参 --><div>{{ desiredComputed(2023, "30k") }}</div><input type="text" v-model="keywords"><ul><li v-for="item in computedList" :key="item">{{ item }}</li></ul></div>
</template>
<script>
import { computed, reactive, ref, toRef, toRefs } from 'vue';
export default {setup() {const obj = reactive({myname: "张三",keywords: "",datalist: ["aa", "ab", "ac", "cd", "abc", "abd", "abs", "bbc"]})//计算属性:计算属性与方法函数的区别就是计算属性存在缓存，只要函数内变量变化, 会自动重新计算结果返回，不变化则从缓存中直接取值返回//经过测试我们发现：//在Dom中第一个<div> {{ myComputedName }}</div> ：这一段执行了计算属性输出了："计算属性被执行了//在Dom中第二个<div> {{ myComputedName }}</div> ：这一段没用执行计算属性，是直接从缓存中读取数据返回的，所以没有执行到console.log("计算属性被执行了")这段代码const computedList = computed(() => {console.log("计算属性被执行了");return obj.datalist.filter(item => item.includes(obj.keywords));})const myComputedName = computed(() => {return "中华人民共和国：" + obj.myname})//可以传递参数的计算属性: 计算属性可以传参它是通过函数返回一个函数的形式const desiredComputed = computed(() => {var msgFun = function (year, salary) {return `${year}年，我期望的薪资是:${salary}` //用${}实现拼接字符串需要用``反括号包裹起来（就是按键1前面的按个键）}return msgFun;})return {computedList,myComputedName,desiredComputed,...toRefs(obj),}}
}
</script>

这篇关于Vue3.0 computed计算属性:VCA的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！