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. 触发场景: 

   1. 如果要访问计算属性 会自动执行 get

   2. 如果要修改计算属性 会自动执行 set

2. 简介:

   1. get函数就等同于简单写法的函数胡 计算属性必须要有 get 而且需要 return 来返回结果

   2. set方法第一个参数 可以监听用户输入 新值 与 旧值

3. 注意:

   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. 总结:
   1. 计算属性可以传参 是通过函数返回一个函数的形式 可以自定义各种数据显示
   2. 计算属性Vue2 Vue3都可以传参  只要依赖的数据不发生改变 依然有缓存 可以按需做一些动态的数据显示
2. 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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---