computed 计算属性和watch

1.前面我们知道计算属性computed: 当我们的某些属性是依赖其他状态时，我们可以使用计算属性来处理

• 在前面的Options API中，我们是使用computed 选项来完成的；
• 在Compostion API中，我们可以在setup函数中使用computed 方法来编写一个计算属性；

<template>
<div id="app">
<h2 ref="name">{{fullName}}</h2>
</div>
</template>
<script>
import {ref,computed} from 'vue'
export default {
  setup(){
  const fristName=ref("jiang")
  const lasttName=ref("zhang")
//1.计算属性用法1:传入一个getter函数
//computed 的返回值是一个ref对象
  const fullName=computed(()=>{
    fristName.value+lasttName.value
  })
//2.计算属性用法2:传入一个对象，对象包含getter和setter 方法
const fullName=computed({
get:()=> fristName.value+lasttName.value,
set（newValue）{
const names=newValue.split("");//修改值
last.value=names[0]
}
})
const changeNage=()=>{
//fristName.value="haha",
fullName.value="jiangyi"
}
  return {
   fullName
    }
    }
  }
</script>

侦听数据的变化Watch

1.在options API中，我们可以通过watch 选项来侦听data或者props的数据变化，当数据变化时执行某一些操作。

2.在Compostion API中，我们可以使用watchEffect和watch来完成响应式数据的侦听；

•    watch和watchEffect 用于自动收集响应式数据的依赖；
•    watch需要手动置顶侦听的数据来源

WatchEffect :

•   首先，watchEffect传入函数会被立即执行一次，并且在执行的过程中会收集依赖；
•   其次，只有收集的依赖发生变化时，watchEffect传入的函数才会在次执行。

 WatchEffect 停止侦听：

 案例：当计数器达到25的，watchEffect就停止侦听，

  WatchEffect 清除副作用：

• 比如在开发中我们需要在侦听函数中执行网络请求，但是在网络请求还没有达到的时候，我们执行了侦听器，或者侦听器函数侦听函数被再次执行了。
• 那么上次的网络请求应该被取消掉，这个时候我们就可以清除上一次的副作用

在我们给watchEffect 传入的函数被回调时，其实可以获取到一个参数：OnInvalidate

• 当副作用即将重新执行或者侦听器被停止时会执行该函数传入的回调函数；
• 我们可以在传入的回调函数中，执行一些清楚工作；