目录

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验证

原题： 

请验证Button组件的Prop类型 ，使它只接收: primary | ghost | dashed | link | text | default ，且默认值为default

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

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

Vue3 + Vue-cli (1) 基础篇_vue3 vue-cli_小草莓蹦蹦跳的博客-CSDN博客

 

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

Vue3+ Vue-cli (2) 组件篇_vue3一个根组件写法_小草莓蹦蹦跳的博客-CSDN博客