Vue3中的计算属性的详细讲解

1.相关介绍

  computed和watch都是vue框架中的用于监听数据变化的属性，都能在数据改变时，针对改变的相关数据做成相应的变化。有点像敌人行动我也行动

2.computed的介绍

<div class="NameBox">
  <span>姓</span><input type="text" v-model="allName.userName1">
  <span>名</span><input type="text" v-model="allName.userName2">
</div>
<div>我的名字是:{{userName}},我的年龄是:{{allName.age}}</div>

const allName = reactive({
  userName1:'张',   //姓
  userName2:'三',   //名
  age:0,            //年龄
})

const userName = computed(()=>{
 //allName.age++
 //addCount()
  return allName.userName1 + allName.userName2
})

上诉代码其实就是很简单的相关例子，通过用户输入的姓和名，来计算出用户的完整的姓名，但是其实完成上面的这一功能其实也并不是只能计算属性才能完成，我们也可以通过定义一个方法也可以实现，如下

<template>
  <div class="NameBox">
    <span>姓</span><input type="text" v-model="allName.userName1">
    <span>名</span><input type="text" v-model="allName.userName2">
  </div>
  <!-- <div>我的名字是:{{userName}},我的年龄是:{{allName.age}}</div> -->
    <!-- const userAllName = function(){ -->
  <div>{{userAllName()}}</div>
</template>   

const userAllName = function(){
  return allName.userName1 + allName.userName2
}

但是为什么我们更偏向于使用计算属性来解决，而不是使用方法来解决呢？原因是计算属性是基于缓存来实现的，无论你后端调用十次还是几百次，只要计算属性依赖的相关值没有发生变化，那计算属性就可以通过缓存读取。我们可以通过下面这个简单的例子来标明，计算属性的优越性。我们可以通过多次调用这两种方法，然后进行查看比较

<!--下面是通过方法得出的名字-->
  <div>{{userAllName()}}</div>
  <div>{{userAllName()}}</div>
  <div>{{userAllName()}}</div>
  <div>{{userAllName()}}</div>
  <div>{{userAllName()}}</div>
  <div>{{userAllName()}}</div>
  <div>{{userAllName()}}</div>
  <div>{{userAllName()}}</div>

<!--下面是通过计算属性得出的名字-->
  <div>{{userName}}</div>
  <div>{{userName}}</div>
  <div>{{userName}}</div>
  <div>{{userName}}</div>
  <div>{{userName}}</div>
  <div>{{userName}}</div>
  <div>{{userName}}</div>
  <div>{{userName}}</div>

const allName = reactive({
  userName1:'张',  //姓
  userName2:'三',   //名
  age:0,
})


const userName = computed(()=>{
  console.log("我是计算属性调用的");
  return allName.userName1 + allName.userName2
})

const userAllName = function(){
  console.log("我是方法调用的");
  return allName.userName1 + allName.userName2
}

从上面对应的浏览器中打印的我们可以看出，方法和计算属性调用了八次，但是与方法不一样的是，计算属性就打印了一次，就好像就第一次调用了这个函数一样，后面就没调用了。这就是计算属性的缓存，只要其依赖的值不发生相关的变化，那么无论你计算属性调用了好多次，但最终就只是执行一次。 

   const userName = computed(()=>{
      console.log("我是计算属性调用的");
      allName.age++
      addCount()
      return allName.userName1 + allName.userName2
   })

然后就是计算属性里不建议进行相关的赋值操作，虽然这样项目不会无法运行，但仍然不建议这么使用。因为计算属性的存在就是方便我们在根据某一个值变化时，进行相关的操作。如果执意想在计算属性中进行赋值等相关操作，我们可以在计算属性中调用相关的方法，如上图所示，但根据之前所说的，即使你调用了方法，但方法也只是执行一次。下次读取的时候也是进入相关缓存。 

const userName = computed({
  get(){
    return allName.userName1 + allName.userName2
  },
  set(value){
    var firstName = value.substring(0,2)
    var secondName = value.substring(2,8)
    allName.userName1 = firstName
    allName.userName2 =secondName
  }
})

其实平常我们所用的计算属性都是简写，都是默认的使用computed中的get函数，但是在有些时候我们也难免会在计算属性中修改值，这时候我们的计算属性就不能简写了，需要详细写明set和get方法，其中get函数有一个返回值，该返回值就是计算属性的值，set函数会有一个参数值，该值就是一个(计算属性被修改之后的值）。但是在通常情况下，我们用的更多的还是简写形式，即只采用其中的get返回的这个计算属性的值。且在计算属性中无法处理异步请求。

上述就是大致对计算属性的相关阐述和了解，后续会有监视等相关的知识点发布