[TOC] ## reactive reactive 只能用于对象 ``` import { reactive } from 'vue' const counter = reactive({ count: 0 }) ``` ## ref ref 可用于任何值 ``` import { ref } from 'vue' const message = ref('Hello World!') console.log(message.value) // "Hello World!" message.value = 'Changed' // 更新时是用给value 赋值 // or 对象 const message = ref({ count: 0 }) message.value.count=1 // 对象更新 ``` >注意我们在模板中访问的 message ref 时不需要使用 .value：它会被自动解包，让使用更简单。 ## toRef 作用:可以在子组件中把props 的值,初始化给toRef ``` const saveValue=toRef<string>(props.modelValue) ``` ## watch ### 监听整个对象 ``` // 只要 userCard 中有一个值变更就会更新 watch( userCard, (newValue:UserCard)=>{ console.log(newValue); }, {deep:true}) ``` ## watchEffect 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。 ``` const count = ref(0) watchEffect(() => console.log(count.value)) // -> 输出 0 count.value++ // -> 输出 1 ``` 与 watch 区别 - `watch` 实际上监听的是某个具体的响应式数据，而 `watchEffect` 则是监听整个函数中使用到的所有响应式数据 - 对于单一数据的监听，建议使用 `watch`，对于多个响应式数据共同影响的逻辑，可以使用 `watchEffect`