Vue3 一些面试题

Vue3

新功能

• createApp

• emits 属性

• 多事件处理

• Fragment

  不再限于模板中的单个根节点

• 移除 .sync 改为 v-model 参数

• 异步组件的引用方式

• 移除 filter

• Teleport

  以前称为 <Portal>，译作传送门（之前都是放在 APP 里，用这个可随意放置）

• Suspense

  可以嵌套层级中等待嵌套的异步依赖项

• Composition API

  • reactive

  • ref、toRef、toRefs

  • readonly

  • computed

  • watch、watchEffect

  • 钩子函数生命周期

原理

• Proxy 实现响应式

• 编译优化

  • PatchFlag 静态标记

  • hoistStatic 静态提升

  • cacheHandler 缓存事件

  • SSR 优化

  • Tree-shaking 优化

    可以将无用模块"剪辑"，仅打包需要

Vite

• ES6 module

面试题

• Vue3 比 Vue2 有什么优势
• 描述 Vue3 生命周期
• 如何看待 Composition API 和 Options API
• 如何理解 ref、toRef 和 toRefs
• Vue3 升级了哪些重要的功能
• Composition API 如何实现代码逻辑复用
• Vue 如何实现响应式
• watch 和 watchEffect 的区别是什么
• setup 中如何获取组件实例
• Vue3 为何比 Vue2 快
• Vite 是什么
• Composition API 和 React Hooks 的对比

Vue3 比 Vue2 有什么优势

• 性能更好
• 体积更小
• 更好的 TS 支持
• 更好的代码组织
• 更好的逻辑抽离
• 更多新功能

Vue3 生命周期

composition VS options

composition API 优点：

• 更好的代码组织
• 更好的逻辑复用
• 更好的类型推导

如何选择：

• 不建议共用，会引起混乱
• 小型项目，业务逻辑简单，用 Options API
• 中大型项目，逻辑复杂，用 Composition API

选项式 API（Options API）

• 所有方法都写在 methods 中，如果 data 中数据越来越多，找数据会非常困难

<template>
  <h1 @click="changeCount">{{ count }}</h1>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    changeCount() {
      this.count++
    },
  },
}
</script>

组合式 API（Composition API）

• 逻辑会清晰，可以让功能的代码集中抽取到一个函数中进行逻辑复用

<template>
  <h1 @click="changeNum">{{ num }}</h1>
</template>

<script>
import { ref } from 'vue'
function useNum() {
  const num = ref(0)
  function changeNum() {
    num.value++
  }
  return { changeNum, num }
}
export default {
  name: 'App',
  setup() {
    const { changeNum, num } = useNum()
    return {
      changeNum,
      num,
    }
  },
}
</script>

如何理解 ref toRef 和 toRefs

ref

• 生成值类型的响应式数据
• 可用于模板和 reactive
• 通过 .value 修改值

<template>
  <p>值类型响应式：{{ ageRef }} {{ state.name }}</p>
  <p ref="elemRef">templateRef</p>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'

export default {
  name: 'Ref',
  setup() {
    const ageRef = ref(20)
    const nameRef = ref('cat')
    const elemRef = ref('elemRef')
    const state = reactive({
      name: nameRef,
    })
    setTimeout(() => {
      ageRef.value = 30 // .value 修改值
      nameRef.value = 'dog'
    }, 1500)

    onMounted(() => {
      console.log(elemRef.value)
    })
    return {
      ageRef,
      state,
      elemRef,
    }
  },
}
</script>

toRef

• 针对一个响应式对象（reactive 封装）的 prop
• 创建一个 ref，具有响应式
• 两者保持引用关系

<template>
  <p>{{ ageRef }} {{ state.age }}</p>
</template>

<script>
import { toRef, reactive } from 'vue'
export default {
  name: 'ToRef',
  setup() {
    const state = reactive({
      age: 20,
      name: 'cat',
    })
    const ageRef = toRef(state, 'age')
    setTimeout(() => {
      state.age = 25
    }, 1000)
    setTimeout(() => {
      ageRef.value = 30
    }, 3000)
    return { state, ageRef }
  },
}
</script>

toRef 如果用于普通对象（非响应式对象），产出的结果不具备响应式

const state = {
  age: 20,
  name: 'cat',
}

toRefs

• 将响应式对象（reactive 封装）转换为普通对象
• 对象的每个 prop 都是对应的 ref
• 两者保持引用关系

注意：直接解构 reactive 返回的 state ，页面能显示内容，但内容不是响应式的

<template>
  <p>{{ age }} {{ name }}</p>
</template>

<script>
import { toRefs, reactive } from 'vue'

export default {
  name: 'ToRef',
  setup() {
    const state = reactive({
      age: 20,
      name: 'cat',
    })
    // 将响应式对象，变为普通对象
    const stateAsRefs = toRefs(state)
    setTimeout(() => {
      state.age = 25
    }, 1000)
    // const { age: ageRef, name: nameRef } = stateAsRefs
    return { ...stateAsRefs }
  },
}
</script>

ref toRef 和 toRefs的最佳使用方式

• 用 reactive 做对象的响应式，用 ref 做值类型响应式

• setup 中返回 toRefs(state) 或者 toRef(state, 'xxx')

• ref 的变量命名都用 xxxRef

• 合成函数返回响应式对象，使用 toRefs

  function useFeatureX() {
    const state = reactive({
      x: 1,
      y: 2
    })
    return toRefs(state)
  }
  
  export default {
    name: 'WhyRef',
    setup() {
      const { x, y } = useFeatureX()
      return {
        x,
        y
      }
    }
  }
  

为何需要 ref

• 返回值类型，会丢失响应式

• 在 setup、computed、合成函数，都有可能返回值类型

• Vue 如不定义 ref，用户将自造 ref，反而混乱

<template>
  <p>{{ age }}</p>
  <p>{{ age1 }}</p>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  name: 'WhyRef',
  setup() {
    const state = reactive({
      age: 20,
      name: 'dog',
    })
    // computed返回的是一个类似于ref的对象，也有.value
    const age1 = computed(() => {
      return state.age + 1
    })
    setTimeout(() => {
      state.age = 25
    }, 1000)
    return {
      ...state, // 这样不是响应式的
      age1,
    }
  },
}
</script>

为何需要 .value

• ref 是一个对象（不丢失响应式），value 存储值
• 通过 .value 属性的 get 和 set 实现响应式
• 用于模板、reactive 时，不需要 .value，其他情况都需要

简单理解 computed 运算逻辑

// 错误
function computed(getter) {
  let value
  watchEffect(() => { // 可以改为setTimeout进行模拟测试
    value = getter()
  })
  return value
}

// 正确
function computed(getter) {
  const ref = {
    value: null,
  }
  watchEffect(() => {
    ref.value = getter()
  })
  return ref
}

为何需要 toRef 和 toRefs

• 初衷：不丢失响应式的情况下，把对象数据 分解/扩展
• 前提：针对的是响应式对象（reactive 封装）非普通对象
• 注意：不创造 响应式，而是 延续 响应式

Vue3 升级了哪些重要功能

Vue3 官网

• createApp
• emits 属性
• 生命周期
• 多事件
• Fragment
• 移除 .sync
• 异步组件的写法
• 移除 filter
• Teleport
• Suspense
• Composition API

createApp

// vue2.x
const app = new Vue({ /* ... */ })
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)

// vue3
const app = Vue.createApp({ /* ... */ })
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)

emits 属性

• 父组件

<template>
  <son :msg="msg" @onSayHello="sayHello" />
</template>

<script>
import Son from './views/Son.vue'
export default {
  components: { Son },
  data() {
    return {
      msg: 'hello vue3',
    }
  },
  methods: {
    sayHello(info) {
      console.log('hello', info)
    },
  },
}
</script>

• 子组件

<template>
  <p>{{ msg }}</p>
</template>

<script>
export default {
  props: {
    msg: String,
  },
  emits: ['onSayHello'],
  setup(props, { emit }) {
    emit('onSayHello', 'vue3')
  },
}
</script>

多事件处理

<button @click="one($event), two($event)">Submit</button>

Fragment

<!-- vue2.x组件模板 -->
<template>
  <div>
    <p>{{ msg }}</p>
    <p>{{ content }}</p>
  </div>
</template>

<!-- vue3组件模板 -->
<template>
  <p>{{ msg }}</p>
  <p>{{ content }}</p>
</template>

移除 .sync

<!-- vue2.x -->
<MyComponent :title.sync="title" />

<!-- vue3.x -->
<MyComponent v-model:title="title" />

异步组件

// vue2.x
new Vue({
  components: {
    'my-component': () => import('./async-com.vue'),
  },
})

// vue3.x
import { createApp, defineAsyncComponent } from 'vue'
createApp({
  components: {
    AsyncComponent: defineAsyncComponent(() => import('./async-com.vue')),
  },
})

移除 filter

<!-- vue2.x -->
<div>{{ message | capitalize }}</div>
<div :id="rawId | formatId">/div>

Teleport

可以把一些组件放到外面去，Vue2 只能操作 DOM 来实现，Vue3 可以通过 Teleport 来实现

<button @click="modalOpen = true">Open full screen modal!</button>

<teleport to="body">
  <div v-if="modalOpen" class="modal">
    <div>
      telePort 弹窗（父元素是 body）
      <button @click="modalOpen = false">Close</button>
    </div>
  </div>
</teleport>

Suspense

场景：比如一个列表，一刷新就需要加载数据，在数据未加载之前会显示 loading，加载完之后在显示列表数据

Vue2 这种场景一般会写一个 data 控制显示隐藏，Element UI 库对此进行封装，Vue3 自己做了一个封装，封装成 Suspense

<Suspense>
  <template>
    <!-- 是一个异步组件 -->
    <Test1 />
  </template>
  <!-- #fallback 就是一个具名插槽。即Suspense组件内部，有两个slot，其中一个具名为fallback -->
  <template #fallback> Loading.. </template>
</Suspense>

Composition API

• reactive
• ref 相关
• readonly
• watch 和 watchEffect
• setup
• 生命周期钩子函数

Composition API 实现逻辑复用

• 抽离逻辑代码到一个函数
• 函数命名约定为 useXxx 格式（React Hooks 也是）
• 在 setup 中引用 useXxx 函数

<template>
  <p>mouse position {{ x }} {{ y }}</p>
</template>

<script>
import useMousePosition from './useMousePosition'

export default {
  name: 'MousePosition',
  setup() {
    const { x, y } = useMousePosition()
    return {
      x,
      y,
    }
  },
}
</script>

• useMousePosition.js

import { ref, onMounted, onUnmounted } from 'vue'

function useMousePosition() {
  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 }
}

export default useMousePosition

如果不使用 ref 使用 reactive，需要将整个 reactive 暴露出去。在父组件接收的时候不能直接解构，否则会失去响应式

Vue3 如何实现响应式

Object.defineProperty 的缺点：

• 深度监听需要一次性递归
• 无法监听新增属性/删除属性（Vue.set、Vue.delete）
• 无法原生监听数组，需要特殊处理

Object.defineProperty(target, key, {
  get() {
    return value
  },
  set(newValue) {
    if (newValue !== value) {
      observer(newValue) // 值修改后进行监听

      // value 一直在闭包中，此处设置完之后，再 get 时也是会获取最新的值
      value = newValue
      updateView() // 触发更新视图
    }
  },
})

Proxy 实现响应式优点

• 深度监听，性能更好
• 可监听新增/删除属性
• 可监听数组变化

性能是如何提升的

Proxy 实现不是一次性监听的，这里深度监听是在 get 中处理的，什么时候用到什么时候处理（惰性）。而 Object.defineProperty 实现是在一开始就进行处理，一次性全部处理完成

// 测试数据
const data = {
  name: 'bird',
  age: 20,
  info: {
    city: 'beijing',
  },
}

function reactive(target = {}) {
  if (typeof target !== 'object' || target == null) {
    // 不是对象或数组，则返回
    return target
  }
  // 代理配置
  const proxyConf = {
    get(target, key, receiver) {
      // 只处本身（非原型）属性
      const ownKeys = Reflect.ownKeys(target)
      if (ownKeys.includes(key)) {
        console.log('get', key) // 监听
      }
      const result = Reflect.get(target, key, receiver)
      // 惰性深度监听。什么时候用什么时候监听
      return reactive(result) // 返回结果
    },
    set(target, key, val, receiver) {
      // 重复的数据，不处理
      if (val === target[key]) {
        return true
      }
      const ownKeys = Reflect.ownKeys(target)
      if (ownKeys.includes(key)) {
        console.log('已有的key', key)
      } else {
        console.log('新增的key', key)
      }
      const result = Reflect.set(target, key, val, receiver)
      console.log('set', key, val)
      return result // 是否设置成功
    },
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key)
      console.log('delete property', key)
      return result // 是否删除成功
    },
  }
  // 生成代理对象
  const observed = new Proxy(target, proxyConf)
  return observed
}
const proxyData = reactive(data)

Reflect 的作用：

• 和 Proxy 能力一一对应

• 规范化、标准化、函数式

'a' in obj -> Reflect.has(obj, 'a')

delete obj.b -> Reflect.deleteProperty(obj, 'b')

• 替代 Object 上的工具函数

  Object.getOwnPropertyNames(obj) -> Reflect.ownKeys(obj)

总结

• Proxy 能规避 Object.defineProperty 的问题
• Proxy 无法兼容所有浏览器，无法 polyfill

v-model 参数用法

Vue2 的 .sync 修饰符

<text-document v-bind:title.sync="doc.title" />

<!-- 语法糖 -->
<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
/>

Vue3 的 v-model

<ChildComponent :title.sync="pageTitle" />

<!-- 替换为 -->
<ChildComponent v-model:title="pageTitle" />

v-model 相当于传递了 modelValue prop 并接受抛出的 update:modelValue 事件

<template>
  <p>{{ name }} {{ age }}</p>
  <user-info v-model:name="name" v-model:age="age" />
</template>

<script>
import { reactive, toRefs } from 'vue'
import UserInfo from './UserInfo.vue'
export default {
  components: { UserInfo },
  setup() {
    const state = reactive({
      name: 'bird',
      age: '20',
    })
    return toRefs(state)
  },
}
</script>

• UserInfo.vue

<template>
  <input :value="name" @input="$emit('update:name', $event.target.value)" />
  <input :value="age" @input="$emit('update:age', $event.target.value)" />
</template>

<script>
export default {
  props: {
    name: String,
    age: String,
  },
}
</script>

watch 和 watchEffect 的区别

• 两者都可监听 data 属性变化

• watch 需要明确监听哪个属性

  默认是惰性执行，监听源可以是一个具有返回值的 getter 函数，也可以直接是一个 ref

• watchEffect 会根据其中的属性，自动监听其变化

<template>
  <p>{{ numberRef }}</p>
  <p>{{ name }} {{ age }}</p>
</template>

<script>
import { reactive, toRefs, ref, watch, watchEffect } from 'vue'
export default {
  setup() {
    const numberRef = ref(10)
    const state = reactive({
      name: 'bird',
      age: 20,
    })
    watchEffect(() => {
      // 初始化时，一定会执行一次（收集需要监听的数据）
      console.log('watchEffect', state.age)
    })
    watchEffect(() => {
      console.log('watchEffect', numberRef)
    })
    // watch监听ref属性
    watch(numberRef, (newNum, oldNum) => {
      console.log('ref watch', newNum, oldNum)
    })
    // watch监听state属性
    watch(
      // 1.确定监听哪个属性
      () => state.age,
      // 2.回调函数
      (newState, oldState) => {
        console.log('state watch', newState, oldState)
      },
      // 3.配置项
      {
        immediate: true, // 初始化之前就监听
        // deep: true // 深度监听
      }
    )
    setTimeout(() => {
      numberRef.value = 100
    }, 1000)
    setTimeout(() => {
      state.age = 25
    }, 1500)
    return { numberRef, ...toRefs(state) }
  },
}
</script>

setup 中如何获取组件实例

• 在 setup 和其他 Composition API 中没有 this
• 可通过 getCurrentInstance 获取当前实例
• 若用 Options API 可照常使用 this

<template>
  <p>getInstance</p>
</template>

<script>
import { getCurrentInstance, onMounted } from 'vue'
export default {
  data() {
    return {
      x: 1,
      y: 2,
    }
  },
  setup() { // created beforeCreate 组件还没有正式初始化
    console.log('setup this', this) // undefined
    onMounted(() => {
      console.log('onMounted this', this) // undefined
      console.log('x', instance.data.x) // 1
    })
    const instance = getCurrentInstance()
    console.log('instance', instance) // 组件实例
    console.log('x', instance.data.x) // undefined
  },
  mounted() {
    console.log('mounted this', this) // Proxy 实例
    console.log('y', this.y) // 2
  },
}
</script>

Vue3 为何比 Vue2 快

• proxy 响应式
• PatchFlag
• hoistStatic
• cacheHandler
• SSR 优化
• tree-shaking

PatchFlag（标记）

• 编译模板时，动态节点做标记
• 标记，分为不同的类型，如：TEXT、PROPS
• diff 算法时，可以区分静态节点，以及不同类型的动态节点

Vu3 在线编译

Vue2 在线编译

Vue2 和 Vu3 diff 算法比较

• Vue2 没有区分静态节点和动态节点

• Vue3 新增静态标记 patchFlag 与上次虚拟节点比较时，只比较有 patchFlag 的节点

<div>
  <div>1</div>
  <div>2</div>
  <div>{{ name }}</div>
</div>

<script>
export function render() {
  return (
    _openBlock(),
    _createBlock('div', null, [
      _createVNode('div', null, '1'),
      _createVNode('div', null, '2'),
      _createVNode('div', null, _toDisplayString(_ctx.name), 1 /* TEXT */),
    ])
  )
}
</script>

hoistStatic（静态提升）

• 将静态节点的定义，提升到父作用域，缓存起来
• 多个相邻静态节点，会被合并起来
• 典型的拿空间换时间的优化策略

Vue2 无论元素是否参与更新，每次都会重新创建然后再渲染。Vue3 对于不参与更新的元素，做静态提升，只会被创建一次，在渲染时直接复用即可

<div>
  <div>1</div>
  <div>2</div>
  <div>{{ name }}</div>
</div>

<script>
const _hoisted_1 = /*#__PURE__*/ _createVNode('div', null, '1', -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/ _createVNode('div', null, '2', -1 /* HOISTED */)

export function render() {
  return (
    _openBlock(),
    _createBlock('div', null, [
      _hoisted_1,
      _hoisted_2,
      _createVNode('div', null, _toDisplayString(_ctx.name), 1 /* TEXT */),
    ])
  )
}
</script>

cacheHandler（缓存事件）

• 缓存事件

Vue2 绑定事件每次触发都要重新生成全新 Function 去更新。Vue3 提供事件缓存对象，当开启 cacheHandler 会自动生成一个内联函数，同时生成一个静态节点，当事件再次触发时，只需从缓存中调用即可

<div>
  <div @click="todo">something</div>
</div>

<script>
export function render() {
  return (
    _openBlock(),
    _createBlock('div', null, [
      _createVNode(
        'div',
        {
          onClick: _cache[1] || (_cache[1] = (...args) => _ctx.todo(...args)),
        },
        'something'
      ),
    ])
  )
}
</script>

SSR 渲染

• 静态节点直接输出，直接绕过 vdom，当做字符串推进 buffer 里
• 动态节点，还是需要动态渲染

tree shaking（按需编译）

• 编译时，根据不同的情况，引入不同的 API

  可以静态分析模块依赖并删除未使用的导出相关的代码

Vite

• 一个前端打包工具，Vue 作者发起的项目
• 借助 Vue 的影响力，发展较快，和 webpack 竞争
• 优势：开发环境下无需打包，启动快

Vite 为何启动快

• 开发环境使用 ES6 Module，无需打包——非常快
• 生成环境使用 rollup，并不会快很多

CommonJs

「万字进阶」深入浅出 Commonjs 和 Es Module

CommonJs 实现原理

• 在编译的过程中，实际 CommonJs 对 JS 的代码进行了首尾包装，被包装之后的样子如下：

;(function (exports, require, module, __filename, __dirname) {
  const sayName = require('./hello.js')
  module.exports = function say() {
    return {
      name: sayName(),
      author: '我不是外星人',
    }
  }
})

• 在 CommonJs 规范下模块中，会形成一个包装函数，包装函数本质如下：

  最后将包装函数执行

function wrapper(script) {
  return '(function (exports, require, module, __filename, __dirname) {' + script + '\\n})'
}

require 加载原理

• module：在 Node 中每一个 JS 文件都是一个 module，module 上保存了 exports 等信息之外，还有一个 loaded 表示该模块是否被加载
• Module：以 Node 为例，整个系统运行之后，会用 Module 缓存每一个模块加载的信息

// id 为路径标识符
function require(id) {
  /* 查找  Module 上有没有已经加载的 js  对象*/
  const cachedModule = Module._cache[id]

  /* 如果已经加载了那么直接取走缓存的 exports 对象  */
  if (cachedModule) {
    return cachedModule.exports
  }

  /* 创建当前模块的 module  */
  const module = { exports: {}, loaded: false }

  /* 将 module 缓存到  Module 的缓存属性中，路径标识符作为 id */
  Module._cache[id] = module
  /* 加载文件 */
  runInThisContext(wrapper('module.exports = "123"'))(
    module.exports,
    require,
    module,
    __filename,
    __dirname
  )
  /* 加载完成 */
  module.loaded = true
  /* 返回值 */
  return module.exports
}

require 大致流程如下：

1. require 会接收一个参数——文件标识符，然后分析定位文件，接下来会从 Module 上查找有没有缓存，如果有缓存，那么直接返回缓存的内容
2. 如果没有缓存，会创建一个 module 对象，缓存到 Module 上，然后执行文件，加载完文件后，将 loaded 设置为 true
3. exports 和 module.exports 持有相同的引用，所以对 exports 赋值会导致 exports 操作的不再是 module.exports 的引用

ES Module

ES6 之后，JS 才有了真正意义上的模块化规范。ES Module 的优势：

• 借助 ES Module 的静态导入导出的优势，实现了 tree shaking
• ES Module 还可以 import() 懒加载方式实现代码分割

基本使用

• 使用 export default 导出

<script type="module">
  import add from './add.js'
  console.log(add(10, 20)) // 30
</script>

<script>
// add.js
export default function add(a, b) {
  return a + b
}
</script>

• 使用 export 导出，需要解构

<script type="module">
  import { add } from './math.js'
  console.log(add(10, 20)) // 30
</script>

<script>
// math.js
export function add(a, b) {
  return a + b
}
</script>

外链使用

<script type="module">
  import { createStore } from 'https://unpkg.com/redux@latest/es/redux.mjs'
  console.log(createStore) // Function
</script>

动态引入

<button id="btn1">load1</button>

<script type="module">
  document.getElementById('btn1').addEventListener('click', async () => {
    const res = await import('./math.js')
    console.log(res.add(10, 20)) // 30
  })
</script>

<script>
// math.js
export function add(a, b) {
  return a + b
}
</script>

Composition API 和 React Hooks 对比

• Composition API setup 只会被调用一次，React Hooks 函数（组件）会被多次调用
• Composition API 无需 useMemo、useCallback，因为 setup 只调用一次
• Composition API 无需顾虑调用顺序，React Hooks 需要保证 hooks 的顺序一致（不能放到循环里、判断里，必须放在最外层的顺序代码里）
• Composition API reactive + ref 比 React Hooks 的 useState 要难理解