Vue3.0 computed计算属性:VCA

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

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

不要在computed中操作DOM，不要做ajax请求数据，只做计算

// 第一种语法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计算属性 能不能传参  怎么传参

传参结构

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

案列

单独封装搜索模块（实现模糊搜索功能）

reactive写法：案列

创建一个search.js文件

import { computed, ref } from 'vue';

//用计算属性
function useSearch(dataObj) {
    const keywords = ref(""); //用于引用组件中的关键字输入框的v-model绑定：表示用户输入的搜索数据
    const computedList = computed(() => {
        return dataObj.charList.filter(item => item.includes(keywords.value))
    })
    return {
        keywords,
        computedList
    }
}

export default
{
    useSearch
}

app.vue文件

ref写法：案例 

创建一个search.js文件

import { computed, ref } from 'vue';

//用计算属性
function useSearch(charList) {
    console.log("charList",charList.value);
    const keywords = ref(""); //用于引用组件中的关键字输入框的v-model绑定：表示用户输入的搜索数据
    const computedList = computed(() => {
        return charList.value.filter(item => item.includes(keywords.value))
    })
    return {
        keywords,
        computedList
    }
}

export default
{
    useSearch
}

app.vue文件