【Vue3重点概念总结和实践二】（watch / props / toRaw / makeRaw）

1、watch全家桶

2、Prop验证

3、原始值API

4、Vue3 + Vue-cli (1) 基础篇

5、Vue3+ Vue-cli (2) 组件篇

1、watch全家桶

原题：

vuejs-challenges/README.zh-CN.md at main · webfansplz/vuejs-challenges · GitHub

答案：

watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。

stop() 停止侦听器

deep: true 强制侦听器进入深层级模式

flush: 'post' 调整回调函数的刷新时机

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)/*** 挑战 1: Watch 一次* 确保副作用函数只执行一次*/
const stop = watch(count, () => {console.log('Only triggered once')stop()
})
count.value = 1
setTimeout(() => (count.value = 2))/*** 挑战 2: Watch 对象* 确保副作用函数被正确触发*/
const state = ref({count: 0
})
// 当使用getter函数作为源时，回调只在此函数的返回值变化时才会触发。
// 如果你想让回调在深层级变更时也能触发，你需要使用 { deep: true } 强制侦听器进入深层级模式。
// 在深层级模式时，如果回调函数由于深层级的变更而被触发，那么新值和旧值将是同一个对象。
watch(state,() => {console.log('The state.count updated')
},{ deep: true} )
state.value.count = 2/*** 挑战 3: 副作用函数刷新时机* 确保正确访问到更新后的`eleRef`值*/
// 当你更改了响应式状态，它可能会同时触发Vue组件更新和侦听器回调。
// 默认情况下,用户创建的侦听器回调,都会在Vue组件更新之前被调用。
// 这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。
// 如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: 'post' 选项
const eleRef = ref()
const age = ref(2)
watch(age,() => { console.log(eleRef.value) }, { flush: 'post' })
age.value = 18
</script><template><div><p>{{ count }}</p><p ref="eleRef">{{ age }}</p></div>
</template>

文档：

响应式 API：核心 | Vue.js

2、Prop验证

原题：

vuejs-challenges/README.zh-CN.md at main · webfansplz/vuejs-challenges · GitHub

答案：

<script setup>
defineProps({type: {type: String,default:'default',validator(value) {return ['primary', 'ghost', 'dashed' ,'link' ,'text','default'].includes(value)}}
})
</script><template><button>Button</button>
</template>

3、原始值API

原题：

vuejs-challenges/README.zh-CN.md at main · webfansplz/vuejs-challenges · GitHub

答案：

toRaw() 可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象。

toRaw 可以将 proxy转成原始对象，raw表示未加工的。

makeRaw() 将一个对象标记为不可被转为代理。返回该对象本身。

<script setup>
import { reactive, isReactive, toRaw, markRaw } from 'vue'const state = { count: 1 }
const reactiveState = reactive(state)/**
* 修改以下代码使输出为true
*/
// console.log(reactiveState === state)
console.log('修改以下代码使输出为true', toRaw(reactiveState) === state)/*** 修改以下代码使输出为false*/
// const info = { count: 1 }
const info = markRaw({ count: 1 })
const reactiveInfo = reactive(info)
console.log('修改以下代码使输出为false', isReactive(reactiveInfo))
</script><template><div><p>{{ reactiveState.count }}</p></div>
</template>

文档：

响应式 API：进阶 | Vue.js