vue3响应式（一）

一、ref

ref：接收一个基本类型返回一个响应式的Ref对象，可以通过value属性来读取和修改值，如果传的是一个引用数据类型，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。构造了一个RefImpl类，通过get value() {} 方法监听读取这个值，通过 set value() 来监听修改这个值。

const num = ref(10)
const obj = ref({
  name: 'zs',
  zge: 18
})

console.log(num.value)  // 10
console.log(obj.value)  // Proxy {name: "zs", zge: 18}

num.value = 20
console.log(num.value)  // 20

二、reactive

用于引用类型的响应式，接收一个引用数据类型并且返回一个Proxy对象实例

const obj = reactive({
  name: 'zs',
  age: 18
})

const num = reactive(20)
console.log(num)  // value cannot be made reactive: 20
console.log(obj)  // Proxy {name: "zs", age: 18}

reactive 传入基本数据类型也会输出，但是控制台会有警告

3、readonly

接收一个数据（基本类型和引用类型都可以），返回一个自读的代理

const obj = readonly({
  name: 'zs',
  age: 18
})

console.log(obj) // Proxy {name: "zs", age: 18}
obj.age = 20

控制台输出：

四、watch

监听一个或多个响应式数据，并且在属性变化时执行相应的回调

<template>
  <div>{{ num }}</div>
  <button @click="() => num++">num++</button>
  <button @click="stop">停止</button>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
const num = ref(10)
const obj = reactive({
  name: 'zs',
  age: 18
})
/**
	调用stop函数可以停止对num的监听
*/
// 监听ref类型的响应式数据
const stop = watch(num, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

// 监听reactive类型的响应式数据
const objStop = watch([()=>obj.name, () => obj.age], ([newName, oldName],[newAge, oldAge]) => {
  console.log([newName, oldName],[newAge, oldAge])  // (2) ["lis", 20] (2) ["zs", 18]
})

</script>