组合式API

前言

上节简单介绍了组合式API声明响应式数据的几个方法，今天我们继续来学习其他api。

computed()

计算属性 - 与Vue2.x中computed配置功能一致，写法稍微不一样

<script>
// 引入computed函数
import {computed} from 'vue'
export default {
  name: 'App',
  setup(){
    let fistName='王'
    let lastName='大头'
    let fullname=computed(()=>{return fistName + lastName})
    return{
      fullname,
    }
  }
}
</script>

watch()

侦听属性 - 与Vue2.x中watch配置功能一致

//情况一：监视单个ref定义的响应式数据
watch(count,(newValue,oldValue)=>{
	console.log('count变化了=====>',newValue,oldValue)
},{immediate:true})

//情况二：监视多个ref定义的响应式数据
watch([count,activeClass],(newValue,oldValue)=>{
	console.log('count或activeClass变化了=====>',newValue,oldValue)
}) 

/* 情况三：监视reactive定义的响应式数据：
  若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！并且强制开启了深度监视。 
*/
watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置无效 oldValue是 undefined

//情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.name,(newValue,oldValue)=>{
	console.log('person的name变化了',newValue,oldValue)
},{immediate:true,deep:true}) 

//情况五：监视reactive定义的响应式数据中的某些属性
watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
	console.log('person的name
        变化了',newValue,oldValue)
},{immediate:true,deep:true})

注意：

监视使用reactive实现的响应式数据时，无法获取正确的oldValue，而且深度监视，deep配置无效
当要监视reactive定义的响应式数据中的某个属性时，要以函数形式表示，例如不能写成person.name，应该写为()=>peison.name。但是，特别注意，当属性是对象类型时，需要使用deep配置开启深度监视

toRef()和toRefs()

toRef()：基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。

用法：const 变量名=toRef(对象名，'属性名')，例如 const name1=toRef(person, 'name')，创建一个名为name1的ref对象，其指向person对象的name属性，即ref对象name1的value为person对象中name属性的值，并且name1的值修改时，name的值也修改。相当于浅拷贝。
示例：

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2

// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3

toRefs()将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。是toRef()的升级版，toRefs()可以批量处理一个对象中的所有属性

用法：const 变量名=toRefs(对象名),返回的是一个对象
示例：

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型：{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// 这个 ref 和源属性已经“链接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

shallowReactive()和shallowRef()

类似reactive()和ref()
shallowReactive()是浅层次的响应式数据，即只考虑对象类型中的第一层属性的响应式
shallowRef()只处理基本数据类型的响应式，不会对对象类型进行处理。

用法

如果有一个对象数据，结构比较深，但在以后的功能中只变化第一层属性，则可以使用shallowReactive()

如果有一个对象数据，后续功能之中不会修改该对象中的属性，而是生成新的对象来代替，则可以使用shallowRef()

readonly()和shallowReadonly()

readonly：让一个数据变成只读

shallowReadonly：让一个数据变成浅只读，即只让第一层数据只读

vue3学习（干货整理【二】）