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计算属性 能不能传参  怎么传参

传参结构

<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>

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

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文件

<template>
  <div>
    <input type="text" v-model="keywords">
    <ul>
      <li v-for="item in computedList" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
import {reactive} from 'vue';

import search from "./search"
export default {
  setup() {
    const dataObj = reactive({
      charList: [], //设定一个数组数据源
    });

    //异步请求数据
    fetch("./src/1.json").then(r => r.json()).then(res => {  //1.json的内容：{ "list": ["aa", "ab", "ac", "cd", "abc", "abd", "abs", "bbc"]}
      dataObj.charList =res.list;  //将数据数据源设定值
    })

    //调用搜索方法函数（同步方法）
    const { keywords, computedList } = search.useSearch(dataObj);

    return {
      keywords, computedList //将通过search.useSearch查询到的数据对象暴露出去，这样Dom文件中就可以使用了
    }
  }
}
</script>

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文件

<template>
  <div>
    <input type="text" v-model="keywords">
    <ul>
      <li v-for="item in computedList" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
import {reactive, ref} from 'vue';

import search from "./search"
export default {
  setup() {

    const charList=ref([]);

    //异步请求数据
    fetch("./src/1.json").then(r => r.json()).then(res => {  //1.json的内容：{ "list": ["aa", "ab", "ac", "cd", "abc", "abd", "abs", "bbc"]}
      charList.value =res.list;  //将数据数据源设定值
    })


    //调用搜索方法函数（同步方法）
    // const { keywords, computedList } = search.useSearch(charList);
    console.log(charList.value);
    return {
      // keywords, 
      // computedList
      ...search.useSearch(charList) //注意，这里不要传递charList.value,  因为charList是一个ref创建的对象，而一个charList.value是一个值。如果传递一个值则不是响应式的了
    }
  }
}
</script>