vue3的计算属性computed和 vue2 computed 的有什么区别，使用，计算属性传参？

什么是计算属性：

• computed函数，是用来定义计算属性的，计算属性不能修改。

• 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

• 计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

• methods和computed看起来都可以实现我们的功能， 那么为什么还要多一个计算属性这个东西呢？ 原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次；而方法会使用一次则调用一次，因此计算属性相对而言性能更好。

• 计算属性内部this指向vm实例

一、computed 写法

1、在vue2中，computed 写法：

computed:{sum(){return this.num1+ this.num2}
}

2、在vue3中，computed 基本使用： 

<template><div class="container"><div>今年：{
   {age}}岁</div><div>后年：{
   {newAge}}岁</div></div>
</template>
<script>
import { computed, ref } from 'vue'
export default {name: 'App',setup () {// 1. 计算属性：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。const age = ref(16)// 得到后年的年龄const newAge = computed(()=>{// 该函数的返回值就是计算属性的值return age.value + 2})return {age, newAge}}
}
</script>

3、vue3当然也可以在 reactive 直接使用

import { reactive, toRefs ,computed} from "vue";
let shopNum = reactive({num: computed(() => {let nums = 0;obj.value.forEach((item) => {if (item.checked) {nums += item.num;}});return nums;}),
});return {...toRefs(shopNum),};

二、常用的是 get 方法，获取数据，也可以使用set方法改变数据

vue2写法

computed: { fullName: { // getter  读取数据触发get方法get: function () { return this.firstName + ' ' + this.lastName },// setter 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，执行一些自定义的操作set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } 
}

vue2 computed 用get 和 set 实现全选反选

  computed: {checked: {get() {// 期中只要有一个不为ture 就不为ture 全部为 true 都为 truereturn this.list.every((item) => {return item.checked == true;});},//获取修改后的值set(val) {console.log(val);if (val) {// 如果为 true 的换全部为 true this.list.forEach((item) => {item.checked = true;});} else {this.list.forEach((item) => {item.checked = false;});}},// 当计算属性的值发生改变的时候 去执行一些操作},},

vue2计算属性传参数

 <liv-for="(val, index) in currentPageNum":key="index">{
   { getIndex(index) }}</li>computed: {getIndex() {//    返回一个函数即可return function(e) {console.log(e);return e + 1;};},},

vue3写法

<template><div class="container"><div>今年：{
   {age}}岁</div><div>后年：{
   {newAge}}岁</div><!-- 使用v-model绑定计算属性 --><input type="text" v-model="newAge"></div>
</template>
<script>
import { computed, ref } from 'vue'
export default {name: 'App',setup () {// 1. 计算属性：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。const age = ref(16)// 得到后年的年龄// const newAge = computed(()=>{//   // 该函数的返回值就是计算属性的值//   return age.value + 2// })// 计算属性高级用法，传人对象const newAge = computed({// get函数，获取计算属性的值get(){return age.value + 2},// set函数，当你给计算属性设置值的时候触发set (value) {age.value = value - 2}})return {age, newAge}}
}
</script>

目的：让计算属性支持双向数据绑定。

总结：计算属性两种用法

• 给computed传入函数，返回值就是计算属性的值

• 给computed传入对象，get获取计算属性的值，set监听计算属性改变。