Vue3 基础必须掌握要点及大厂面试重点

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)  // 创建应用实例（区别于 new Vue()）
app.mount('#app')            // 挂载到 DOM

export default {
  props: { title: String },
  setup(props, context) {
    // props：响应式的父组件传值
    // context：非响应式对象，包含 attrs、slots、emit、expose
    console.log(props.title)
    return { /* 返回给模板使用 */ }
  }
}

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1

import { reactive } from 'vue'

const state = reactive({
  name: 'Vue3',
  info: { version: '3.4' }
})
state.name = 'Vue3.4'

import { ref, computed } from 'vue'

const firstName = ref('San')
const lastName = ref('Zhang')

// 只读计算属性
const fullName = computed(() => firstName.value + ' ' + lastName.value)

// 可写计算属性
const fullNameWritable = computed({
  get: () => firstName.value + ' ' + lastName.value,
  set: (val) => {
    [firstName.value, lastName.value] = val.split(' ')
  }
})

import { ref, reactive, watch } from 'vue'

const count = ref(0)
const state = reactive({ name: 'Vue' })

// 侦听 ref
watch(count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} -> ${newVal}`)
})

// 侦听 getter 函数（reactive 属性需用函数返回）
watch(() => state.name, (newVal) => {
  console.log('name changed:', newVal)
})

// 侦听多个源
watch([count, () => state.name], ([count, name], [oldCount, oldName]) => {
  // ...
})

// 深度侦听（reactive 对象默认深度，但 ref 对象需要 deep: true）
watch(() => state, (newVal) => { /* ... */ }, { deep: true })

// 立即执行
watch(count, (newVal) => { /* ... */ }, { immediate: true })

import { ref, watchEffect } from 'vue'

const count = ref(0)
const stop = watchEffect(() => {
  console.log('count is:', count.value) // 自动追踪 count
})

count.value++ // 触发回调
stop()        // 停止侦听

import { reactive, toRef, toRefs, toRaw, markRaw } from 'vue'

const state = reactive({ name: 'Vue', age: 3 })

// toRef：为 reactive 对象的某个属性创建 ref，保持响应式连接
const nameRef = toRef(state, 'name')
nameRef.value = 'Vue3' // 同步修改 state.name

// toRefs：将 reactive 对象所有属性转为 ref，常用于解构/展开
const refs = toRefs(state)
refs.name.value // 'Vue3'

// toRaw：获取 reactive 代理的原始对象（慎用，可能破坏响应式）
const raw = toRaw(state)

// markRaw：标记对象永远不转为响应式，用于第三方类实例、大型对象
const bigObj = markRaw({ /* ... */ })

import { shallowRef, shallowReactive, triggerRef } from 'vue'

// shallowRef：只对 .value 的访问是响应式的，深层不追踪
const shallow = shallowRef({ a: { b: 1 } })
shallow.value.a.b = 2  // 不触发更新
shallow.value = { a: { b: 3 } }  // 触发更新（替换 .value）
triggerRef(shallow)    // 手动触发 shallowRef 的更新

// shallowReactive：只追踪根级属性，嵌套对象不是响应式
const state = shallowReactive({ a: { b: 1 } })
state.a = { b: 2 }     // 触发更新
state.a.b = 3          // 不触发更新

import { reactive, readonly, shallowReadonly } from 'vue'

const state = reactive({ count: 0 })
const copy = readonly(state) // 只读代理，修改 copy 会警告
// copy.count++  // 警告且不生效
state.count++   // 原对象修改会同步到 copy

const shallow = shallowReadonly(state) // 仅根级只读，嵌套可改

// 极简响应式原理示意（面试手写常考简化版）
const targetMap = new WeakMap() // target -> depsMap
let activeEffect = null

function reactive(target) {
  return new Proxy(target, {
    get(obj, key, receiver) {
      track(obj, key) // 收集依赖
      const res = Reflect.get(obj, key, receiver)
      // 惰性：访问到对象才递归代理
      if (res !== null && typeof res === 'object') return reactive(res)
      return res
    },
    set(obj, key, value, receiver) {
      const ok = Reflect.set(obj, key, value, receiver)
      trigger(obj, key) // 触发更新
      return ok
    },
    deleteProperty(obj, key) {
      const ok = Reflect.deleteProperty(obj, key)
      trigger(obj, key)
      return ok
    }
  })
}

function track(target, key) {
  if (!activeEffect) return
  let depsMap = targetMap.get(target)
  if (!depsMap) targetMap.set(target, (depsMap = new Map()))
  let deps = depsMap.get(key)
  if (!deps) depsMap.set(key, (deps = new Set()))
  deps.add(activeEffect)
}

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  const effects = depsMap.get(key)
  effects && effects.forEach(fn => fn())
}

function effect(fn) {
  activeEffect = fn
  fn() // 执行一次，触发 getter 收集依赖
  activeEffect = null
}

class RefImpl {
  constructor(value) {
    this._value = convert(value) // 对象走 reactive
    this.dep = new Set()
  }
  get value() {
    trackEffects(this.dep)
    return this._value
  }
  set value(newVal) {
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal
      this._value = convert(newVal)
      triggerEffects(this.dep)
    }
  }
}
function convert(v) { return isObject(v) ? reactive(v) : v }

组件渲染/effect 执行
        ↓
activeEffect = 当前副作用函数
        ↓
访问响应式属性 → 触发 getter → track()
        ↓
targetMap[target][key].add(effect)  // WeakMap → Map → Set
        ↓
修改属性 → 触发 setter → trigger()
        ↓
取出对应 key 的 effect Set，依次执行 → 组件重新渲染

// <div>hello <span>{{ name }}</span></div> 编译后示意
import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, "hello ", -1 /* HOISTED */)

export function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("div", null, [
    _hoisted_1,
    _createElementVNode("span", null, _toDisplayString(_ctx.name), 1 /* TEXT */)
    //                                                        ↑ PatchFlag=1 表示只有文本是动态的
  ]))
}

import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

<!-- Child.vue -->
<script setup>
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 }
})
const emit = defineEmits(['update', 'delete'])

function handleClick() {
  emit('update', props.count + 1)
}
</script>

<!-- Parent.vue -->
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const count = ref(0)
</script>
<template>
  <Child :title="'Hello'" :count="count" @update="val => count = val" />
</template>

<!-- 子组件 -->
<script setup>
const props = defineProps(['modelValue', 'title'])
const emit = defineEmits(['update:modelValue', 'update:title'])
</script>
<template>
  <input :value="modelValue" @input="emit('update:modelValue', $event.target.value)" />
  <input :value="title" @input="emit('update:title', $event.target.value)" />
</template>

<!-- 父组件 -->
<Child v-model="name" v-model:title="docTitle" />

// 祖先组件
import { provide, ref, readonly } from 'vue'
const theme = ref('dark')
provide('theme', readonly(theme)) // 提供只读版本防止子组件随意修改
provide('setTheme', (val) => { theme.value = val }) // 提供修改方法

// 后代组件
import { inject } from 'vue'
const theme = inject('theme', 'light') // 第二个参数为默认值
const setTheme = inject('setTheme')

<!-- Child.vue -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
function reset() { count.value = 0 }
defineExpose({ count, reset }) // 只有 expose 的内容父组件才能通过 ref 访问
</script>

<!-- Parent.vue -->
<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'
const childRef = ref()
onMounted(() => {
  console.log(childRef.value.count) // 0
  childRef.value.reset()
})
</script>
<template>
  <Child ref="childRef" />
</template>

// router/index.js
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: () => import('../views/About.vue') }, // 路由懒加载
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('../views/User.vue'),
    props: true, // 将路由参数作为 props 传入组件
    children: [ /* 嵌套路由 */ ]
  },
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: () => import('../views/404.vue') }
]

const router = createRouter({
  history: createWebHistory(), // HTML5 History 模式
  // history: createWebHashHistory(), // Hash 模式
  routes,
  scrollBehavior(to, from, savedPosition) {
    return savedPosition || { top: 0 }
  }
})

// 全局前置守卫
router.beforeEach((to, from) => {
  // 返回 false 取消导航，返回路径字符串或对象重定向
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) return '/login'
})

export default router

app.use(router)

import { useRouter, useRoute } from 'vue-router'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

const router = useRouter()  // 等同于 this.$router
const route = useRoute()    // 等同于 this.$route（响应式）

// 编程式导航
router.push('/about')
router.push({ name: 'User', params: { id: 1 } })
router.replace('/home')
router.go(-1)

// 路由守卫（组件内）
onBeforeRouteLeave((to, from) => { /* 离开当前组件前 */ })
onBeforeRouteUpdate((to, from) => { /* 当前路由改变但组件复用时 */ })

// 按组分包（webpackChunkName）
const User = () => import(/* webpackChunkName: "user" */ '../views/User.vue')

// stores/counter.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

// 组合式 API 风格（推荐）
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() { count.value++ }
  function asyncIncrement() {
    setTimeout(() => { count.value++ }, 1000)
  }
  return { count, doubleCount, increment, asyncIncrement }
})

// Options API 风格也支持
// export const useCounterStore = defineStore('counter', {
//   state: () => ({ count: 0 }),
//   getters: { doubleCount: (s) => s.count * 2 },
//   actions: { increment() { this.count++ } }
// })

// main.js
import { createPinia } from 'pinia'
app.use(createPinia())

<script setup>
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

const counter = useCounterStore()
// 解构保持响应式需用 storeToRefs
const { count, doubleCount } = storeToRefs(counter)
// 方法可直接解构
const { increment, asyncIncrement } = counter
</script>
<template>
  <div>{{ count }} * 2 = {{ doubleCount }}</div>
  <button @click="increment">+1</button>
</template>

const counter = useCounterStore()

// 1. 直接修改（推荐）
counter.count++

// 2. $patch 批量修改（性能更好，只触发一次响应）
counter.$patch({ count: counter.count + 1, name: 'new' })
counter.$patch((state) => { state.count++; state.name = 'new' })

// 3. 通过 actions 修改（支持异步）
counter.increment()
counter.asyncIncrement()

// 4. $reset 重置到初始状态
counter.$reset()

// stores/user.js
import { defineStore } from 'pinia'
import { useCounterStore } from './counter'

export const useUserStore = defineStore('user', () => {
  const counter = useCounterStore() // 可在 action/getter 中使用其他 store
  const name = ref('')
  function setName(n) {
    name.value = n
    counter.increment() // 调用其他 store 的 action
  }
  return { name, setName }
})

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

// 在 defineStore 中配置
export const useUserStore = defineStore('user', () => { /* ... */ }, {
  persist: true // 全部持久化到 localStorage
  // persist: {
  //   paths: ['name', 'token'], // 指定字段
  //   storage: sessionStorage
  // }
})

<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

<template>
  <button @click="show = true">打开弹窗</button>
  <Teleport to="body">
    <div v-if="show" class="modal">
      <h2>弹窗内容</h2>
      <button @click="show = false">关闭</button>
    </div>
  </Teleport>
</template>

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent(() => import('./HeavyComponent.vue'))
</script>

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Heavy.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorComp,
  delay: 200,         // 显示 loading 前的延迟 ms
  timeout: 10000,     // 超时时间
  suspensible: false  // 是否由父级 Suspense 控制
})

// 注册全局指令
app.directive('focus', {
  mounted(el) { el.focus() }
})

// 局部指令（<script setup> 中以 vNameOfDirective 命名自动识别）
const vFocus = {
  mounted: (el) => el.focus()
}

app.directive('demo', {
  mounted(el, binding, vnode, prevVnode) {
    // el：指令绑定的元素
    // binding.value：传递给指令的值（v-demo="value"）
    // binding.arg：传给指令的参数（v-demo:arg）
    // binding.modifiers：修饰符对象（v-demo.modifier）
    // binding.instance：使用指令的组件实例
  }
})

<!-- 子组件 Layout.vue -->
<template>
  <div class="layout">
    <header><slot name="header" :user="user">默认头部</slot></header>
    <main><slot>默认内容</slot></main>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>
<script setup>
const user = { name: 'Zhang' }
</script>

<!-- 父组件 -->
<Layout>
  <template #header="{ user }">
    <h1>Welcome {{ user.name }}</h1>
  </template>
  <p>主内容</p>
  <template #footer>
    <p>底部</p>
  </template>
</Layout>

import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs() // 包含父组件传入但未声明为 props 的属性

<script setup lang="ts">
// 运行时声明 + TS 类型推导
interface Props {
  title: string
  count?: number
  list: number[]
}
const props = withDefaults(defineProps<Props>(), {
  count: 0
})

const emit = defineEmits<{
  (e: 'update', value: number): void
  (e: 'delete'): void
}>()
</script>

import { ref, reactive } from 'vue'

const count = ref<number>(0)
const list = ref<string[]>([])

interface User { name: string; age: number }
const user = reactive<User>({ name: 'Zhang', age: 18 })
// 或直接字面量，自动推导
const user2 = reactive({ name: 'Zhang', age: 18 })

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

const childRef = ref<InstanceType<typeof Child> | null>(null)
onMounted(() => {
  childRef.value?.reset() // 可获得 Child 暴露方法的类型
})
</script>
<template>
  <Child ref="childRef" />
</template>

// composables/useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  function update(e) { x.value = e.pageX; y.value = e.pageY }
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  return { x, y }
}

// 组件中使用
const { x, y } = useMouse()

import { useLocalStorage, useDebounceFn, useIntersectionObserver, useDark } from '@vueuse/core'

const count = useLocalStorage('count', 0) // 自动持久化
const onScroll = useDebounceFn(() => { /* ... */ }, 200) // 防抖
const target = ref(null)
useIntersectionObserver(target, ([{ isIntersecting }]) => { /* 可见性监听 */ })
const isDark = useDark() // 暗黑模式

import { nextTick } from 'vue'
async function update() {
  count.value++
  await nextTick() // DOM 更新完成后执行
  console.log(el.textContent)
}

function ref(value) {
  return {
    _value: typeof value === 'object' && value !== null ? reactive(value) : value,
    get value() {
      track(this, 'value')
      return this._value
    },
    set value(newVal) {
      if (newVal !== this._value) {
        this._value = typeof newVal === 'object' && newVal !== null ? reactive(newVal) : newVal
        trigger(this, 'value')
      }
    }
  }
}

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj
  if (obj instanceof Date) return new Date(obj)
  if (obj instanceof RegExp) return new RegExp(obj)
  if (hash.has(obj)) return hash.get(obj)

  // 处理 Vue3 响应式对象：获取原始对象再克隆
  const raw = obj['__v_raw'] || obj  // Vue3 reactive 对象有 __v_raw 标识
  const clone = Array.isArray(raw) ? [] : {}
  hash.set(obj, clone)
  for (const key in raw) {
    if (raw.hasOwnProperty(key)) {
      clone[key] = deepClone(raw[key], hash)
    }
  }
  return clone
}

class EventBus {
  constructor() { this.events = Object.create(null) }
  on(event, fn) {
    (this.events[event] || (this.events[event] = [])).push(fn)
  }
  off(event, fn) {
    if (!this.events[event]) return
    if (!fn) { this.events[event] = null; return }
    this.events[event] = this.events[event].filter(f => f !== fn)
  }
  emit(event, ...args) {
    (this.events[event] || []).slice().forEach(fn => fn(...args))
  }
  once(event, fn) {
    const wrapper = (...args) => { fn(...args); this.off(event, wrapper) }
    this.on(event, wrapper)
  }
}

function h(tag, props = {}, children = []) {
  return { tag, props, children }
}

function render(vnode, container) {
  if (typeof vnode === 'string' || typeof vnode === 'number') {
    container.appendChild(document.createTextNode(vnode))
    return
  }
  const el = document.createElement(vnode.tag)
  for (const [key, val] of Object.entries(vnode.props || {})) {
    if (key.startsWith('on')) {
      el.addEventListener(key.slice(2).toLowerCase(), val)
    } else {
      el.setAttribute(key, val)
    }
  }
  const children = Array.isArray(vnode.children) ? vnode.children : [vnode.children]
  children.forEach(child => render(child, el))
  container.appendChild(el)
}

function debounce(fn, delay) {
  let timer = null
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

function throttle(fn, interval) {
  let last = 0
  return function (...args) {
    const now = Date.now()
    if (now - last >= interval) {
      last = now
      fn.apply(this, args)
    }
  }
}

Function.prototype.myCall = function (ctx, ...args) {
  ctx = ctx === null || ctx === undefined ? window : Object(ctx)
  const key = Symbol('fn')
  ctx[key] = this
  const res = ctx[key](...args)
  delete ctx[key]
  return res
}

Function.prototype.myApply = function (ctx, args = []) {
  return this.myCall(ctx, ...args)
}

Function.prototype.myBind = function (ctx, ...boundArgs) {
  const fn = this
  return function (...args) {
    return fn.myCall(this instanceof fn ? this : ctx, ...boundArgs, ...args)
  }
}

function myNew(Ctor, ...args) {
  const obj = Object.create(Ctor.prototype)
  const res = Ctor.apply(obj, args)
  return res !== null && (typeof res === 'object' || typeof res === 'function') ? res : obj
}

function myInstanceof(left, right) {
  let proto = Object.getPrototypeOf(left)
  while (proto) {
    if (proto === right.prototype) return true
    proto = Object.getPrototypeOf(proto)
  }
  return false
}

// 伪代码思路
const cache = new Map() // key -> vnode
const keys = []         // LRU 队列

function pruneCacheEntry(key) {
  const cached = cache.get(key)
  if (cached) {
    cached.componentInstance?.$destroy() // Vue2 调用；Vue3 中 unmount
    cache.delete(key)
  }
}

// 渲染时
const key = getKey(vnode)
if (cache.has(key)) {
  vnode.componentInstance = cache.get(key).componentInstance
  // 移动到 keys 末尾（最近使用）
  keys.splice(keys.indexOf(key), 1)
  keys.push(key)
} else {
  cache.set(key, vnode)
  keys.push(key)
  if (max && keys.length > parseInt(max)) {
    pruneCacheEntry(keys[0]) // 删除最久未使用
    keys.shift()
  }
}