Vue3（二）：computed、watch、生命周期、hooks

一、computed计算属性

<template>
  <div class="person">
<!-- <input type="text" v-model="{{ firstName }}">
<input type="text" v-model="{{ lastName }}"> -->
   <h1>一个人的信息</h1>
   姓：<input type="text" v-model="person.firstName">
   名：<input type="text" v-model="person.lastName">
  </div>
</template>
   
<script setup lang="ts">
import {reactive,toRefs,toRef} from 'vue'
let person=reactive({
firstName:'张',
lastName:'三'
})


</script>

现在有这样一个小案例，要求写一个计算属性把它的全名给计算出来

// function fullName(){
// return person.firstName+person.lastName
// }本来这么写的但是这个没用到computed
// let fullName=computed(()=>{
//    return person.firstName+person.lastName
// })//这么写吧有点怪，fullName本来应该属于person里面的啊

// 计算属性的简写形式，只读不能改
// person.fullName=computed(()=>{
//    return person.firstName+person.lastName
// })
// 计算属性的完整形式-可改可读
 person.fullName=computed({
   get(){
      return person.firstName+'-'+person.lastName
   },
   set(value){
      const newArr=value.split('-')
      person.firstName=newArr[0]
      person.lastName=newArr[1]
   }
})
</script>

跟vue2里的用法差不多，都是算东西的

二、watch

vue2里的watch是一个配置项，值是对象。但是在vue3中watch是一个函数，可以多次调用这个函数。

1.watch监视ref定义的属性

watch函数第一个参数：监视的是谁

第二个参数：监视的回调

第三个参数：监视的配置

<template>
  {{ sum }}<button @click="sum++">点击加1</button>
  {{ str }}<button @click="str+='!'">点击加！</button>
</template>
   
<script setup lang="ts">
import {reactive,toRefs,toRef,ref,watch} from 'vue'
let sum=ref(0)
let str=ref('hello')
// 监视ref定义的一个响应式数据
watch(sum,(newValue,oldValue)=>{
   console.log('sum变了',newValue,oldValue)
})
// 监视ref定义的很多响应式数据
watch([sum,str],(newValue,oldValue)=>{
   console.log('sum或者str变了',newValue,oldValue)
},{immediate:true})
// {immediate:true}未点击之前也会出来一回
</script>

第一个参数如果有多个的话，用数组表示，最后的配置用{}表示，配置还有一个之前学过的deep：true，监视深层数据的变化，数据发生变化之后，watch输出newValue和oldValue时会输出所有数据的变化。

2.watch监视reactive定义的属性

（1）监视reactive的全部属性

let person=reactive({
   name:'ttt',
   age:18
})
watch(person,(newValue,oldValue)=>{
console.log('people变了',newValue,oldValue)
})

这样出现了一个问题，就是reactive无法正确的获取oldValue

newValue没错，oldValue每次都跟newValue一样啊

如果把people也改为ref定义的属性，那时候监听people就不行了！！页面上的数据也会变，但是控制台不打印东西，因为people是没有变的，变的是people里的属性，可以（1）people加.value（2）加deep：true，但是deep：true有点问题不建议使用

reactive：默认就会深层检测，而且deep：false关不掉它

那么之前的那些为什么不加.value呢，比如说sum.value，最开始是0吧，.value之后就相当于把数字0取出来进行监听了，但是0一个数字没办法去监听啊，所以基本数据类型不加.value

sum和person都是RefImpl对象，这个对象的任何一个属性发生变化都能被监测到，sum里的value变了我们就能监视到，但是person中的value是proxy实例对象（借助reactive定义），什么时候那一大堆东西整个被替换掉才能被监视到。

第一种解决办法：people.value，这样写就不是ref定义的数据了，而是reactive定义的，可以深度监视。

第二种：不加.value，加deep：true还是能深度监视

（2）监视reactive某一个属性

它只允许监视ref、reactive、数组形式的，我想单独监视people.name

watch(person.name,、、、

不可以这么写，也不会实现出来。得写成一个函数

watch(()=>person.name,(newValue,oldValue)=>{
console.log('people.name变了',newValue,oldValue)
})

（3）监视reactive某些属性

watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
console.log('people.name或者age变了',newValue,oldValue)
})

就得把函数都放到数组里面去

（4）监视reactive的某些特殊情况

老师讲的时候说如果对响应式数据的下面的对象的属性进行监视，它监视不到，还得加deep：true；但是我试了一下发现不加deep也是可以的。

let person=reactive({
   name:'ttt',
   age:18,
   job:{
      hh:{
         salary:20
      }
   }
})
watch(person.job,(newValue,oldValue)=>{
console.log('people.job变了',newValue,oldValue)
})

所以总结来说就是不管监视什么类型它都能自动深层监视。

3.watchEffect函数

watchEffect也是个函数，也能进行监视，但是它不说它监视的是谁，它是看你在回调函数里用到了谁它就监视谁，而且它默认最开始执行一次，也就是immediate

watchEffect(()=>{
const x1=sum.value
const x2=person.job.hh.salary
console.log('hh')
})

这样写就可以监视sum和salary 的变化

watchEffect跟computed有点相似，computed的get或者set里所依赖的事情发生变化就会重新执行。

但是computed里注重的是返回值（回调函数的返回值），所以必须得写返回值。watchEffect更注重过程不用写返回值。

三、Vue3的生命周期

变化：钩子：vue2最后是挂载=>销毁，vue3是挂载=>挂载完毕

组合式API：

这些都是函数，都能传递一个回调函数

onBeforeMount(()=>{
      console.log('onBeforeMount')
   })

组合式API里的钩子执行的时机要比配置项里的钩子执行的时机要快

一般不用这些去写代码，组合式API跟配置项里选一种写就行

四、自定义hook函数

就是把ref、reactive、生命周期、watch等等封装在一块组成一个函数，在app.vue或者其他的组件中都可以使用

比如说建立一个hooks文件夹下的usePoint.js，相当于封装了一个函数

import {onBeforeMount,onBeforeUnmount} from 'vue'
export default function(){
   onBeforeMount(()=>{
      console.log('hh')
   }),
   onBeforeUnmount(()=>{
      console.log('bb')
   })
}

在App.vue中调用：

<template>
<Test/>
</template>
   
<script setup>
import Test from './components/Test.vue'
import usePoint from './hooks/usePoint'
usePoint()
</script>

直接当函数去用就可以，在页面挂载完毕后，控制台打印 hh

五、其他CompositionAPI

1.shallowReactive与shallowRef

shallow：浅层次的

（1）shallowReactive

let person=reactive({
   name:'ttt',
   age:18,
   job:{
      hh:{
         salary:20
      }
   }
})

就比如说这个name、age都是响应式的，job里面的hh和salary就不再是响应式的了

shallowReactive只考虑对象里的第一层的响应式

（2）shallowRef

<script setup >
import { shallowRef } from 'vue';

let x=shallowRef(0)
</script>

<template>
   <div>
      <h1>{{ x }}</h1>
    <button @click="x++">点击x++</button>
   </div>
</template>

这样可以实现x++，shallowRef里面的值是简单数据类型的，此时的shallowRef跟ref没啥区别

当shallowRef里面是对象类型的：

let x=shallowRef({
   y:0
})
</script>

<template>
   <div>
      <h1>{{ x.y }}</h1>
    <button @click="x.y++">点击x++</button>
   </div>

现在就实现不了了

shallowRef只能处理基本数据类型的响应式，不进行对象的响应式处理

2.readonly和shallowReadonly

readonly可以把响应式的数据保护起来，只读，深只读

shallowReadonly是改不了第一层的数据但是可以改其他层的，浅只读

person=readonly(person)

再点击name和age或者salary就都改不了了

person=shallowReadonly(person)

name和age不能改，salary可改

应用场景：不希望数据被修改时

3.toRaw和markRaw

raw：生的、原始的

toRaw：将一个由reactive生成的响应式对象转为普通对象。

使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。

我们可以通过ref或者reactive把原始数据变成响应式的，那么还得有方法将数据从响应式转化成原始数据，就用toRaw

let raw=toRaw(person)

这样raw就会是一个最原始的对象，不再是proxy响应式的，页面也就不会刷新

markRaw：把、、标记为一个原始的

应用场景：
1．有些值不应被设置为响应式的，例如复杂的第三方类库等。
2．当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

比如我现在给person加一个属性——车

function addCar(){
   let car={
      name:'bb',
      price:20
   }
   person.car=car
}
<button @click="addCar">展示车</button>
<button @click="person.car.price++">价格++</button>