【前端面试专题】【5】Vue3

Vue3 比 Vue2 有什么优势?

  • 性能更好(后面详细讲)
  • 体积更小
  • 更好的 ts 支持
  • 更好的代码组织
  • 更好的逻辑抽离
  • 更多新功能

Vue3 生命周期

Option API

  • beforeDestroy 改为 beforeUnmount
  • destroyed 改为 unmounted
  • 其他沿用 Vue2 的生命周期

<template>
  <life-cycles v-if="flag" :msg="msg" />
  <button @click="msg = Date.now()">change msgbutton>
  <button @click="flag = !flag">hidebutton>
template>

<script>
import LifeCycles from './components/LifeCycles.vue'
export default {
  components: {
    LifeCycles
  },
  data() {
    return {
      msg: 'vue3',
      flag: true
    }
  }
}
script>

<template>
  <div>生命周期{{ msg }}div>
template>

<script>
export default {
  name: 'LifeCycles',
  props: ['msg'],
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  // beforeDestroy 改名
  beforeUnmount() {
    console.log('beforeUnmount')
  },
  // destroyed 改名
  unmounted() {
    console.log('unmounted')
  }
}
script> 

Composition API


<template>
  <div>生命周期{{ msg }}div>
template>

<script>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
export default {
  name: 'LifeCycles',
  props: ['msg'],
  // 等于 beforeCreate 和 created
  setup() {
    console.log('setup')

    onBeforeMount(() => {
      console.log('onBeforeMount')
    })
    onMounted(() => {
      console.log('onMounted')
    })
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('onUnmounted')
    })
  }
}
script> 

Composition API 对比 Options API

Composition API 带来了什么

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

【前端面试专题】【5】Vue3_第1张图片

如何选择

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

理解 ref、toRef、toRefs

ref

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

代码示例:

<template>
  <div>
    <h1>refh1>
    <div>{{ ageRef }}div>
    <div>{{ details.name }}div>
    <p ref="eleRef">文字p>
  div>
template>

<script>
import { ref, reactive, onMounted } from 'vue'
export default {
  name: 'ref',
  setup() {
    const ageRef = ref(22) // 值类型响应式
    const nameRef = ref('Jae')
    const details = reactive({
      name: nameRef,
      country: 'China',
      province: 'XXX',
      city: 'XXXX'
    })

    setTimeout(() => {
      console.log('ageRef: ', ageRef.value) // .value 获取值

      ageRef.value = 24 // .value 修改值
      nameRef.value = 'Jack'
    }, 1500)

    const eleRef = ref(null)
    onMounted(() => {
      console.log(eleRef.value)
    })

    return {
      ageRef,
      details,
      eleRef
    }
  }
}
script> 

【前端面试专题】【5】Vue3_第2张图片

toRef

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

代码示例:

<template>
  <div>
    <h1>toRefh1>
    <div>{{ ageRef }}div>
    <div>{{ details.name }} - {{ details.age }}div>
  div>
template>

<script>
import { reactive, toRef } from 'vue'
export default {
  name: 'toRef',
  setup() {
    const details = reactive({
      age: 22,
      name: 'Jae'
    })
    const ageRef = toRef(details, 'age')

    setTimeout(() => {
      details.age = 24 // ageRef 也会跟着变
    }, 1500)
    setTimeout(() => {
      ageRef.value = 30 // details.age 也会跟着变
    }, 2500)

    return {
      details,
      ageRef
    }
  }
}
script> 

【前端面试专题】【5】Vue3_第3张图片

toRefs

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

代码示例:

<template>
  <div>
    <h1>toRefsh1>
    <div>{{ age }}-{{ name }}div>
  div>
template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  name: 'toRefs',
  setup() {
    const details = reactive({
      age: 22,
      name: 'Jae'
    })
    const detailsRefs = toRefs(details) // 将响应式对象,变为普通对象

    return detailsRefs
  }
}
script> 

【前端面试专题】【5】Vue3_第4张图片
有同学可能会有疑问,不就是为了能在模板直接使用 {{ age }}{{ name }} 吗,那直接 return { ...details } 解构出来不就好了,这里可以自己试一下,使用这种写法,然后设置一个定时器,改变 age 和 name 的值,可以发现页面中并没有发生变化。这是因为解构会丢失响应性

为什么解构属性会出现丢失响应式的问题呢?又该如何解决呢?可以参考一下这篇文章

简单来说就是 Vue3 使用 Proxy 来实现响应式,属性被解构出来后不再生效,解决方式就是通过 toRefs 来解决

最佳使用方式

  • 用 reactive 做对象的响应式,用 ref 做值类型的响应式
  • setup 中返回 toRefs(details),或者 toRef(details, ‘xxx’)
  • 合成函数返回响应式对象时,使用 toRefs

示例:合成函数返回响应式对象

funciton useFunction() {
  const details = reactive({
    x: 1,
    y: 2
  })
  //...
  return toRefs(details) // 返回时转换为 ref
}
export default {
  setup() {
    const { x, y } = userFunction() // 可以在不失去响应式的情况下解构
    return { x, y }
  }
}

进阶 ref、toRef、toRefs

为什么需要 ref

  • 返回值类型,会丢失响应式
  • 在setup、computed、合成函数中,都有可能返回值类型

代码示例:

<template>
  <div>
    <h1>refh1>
    <div>{{ age }}-{{ name }}div>
  div>
template>

<script>
import { reactive} from 'vue'
export default {
  name: 'ref',
  setup() {
    let age = 22
    setTimeout(() => {
      age = 24 // 页面上不会有任何变化
    }, 1500)

    let details = reactive({
		name: 'Jae'
    })
	setTimeout(() => {
      details.name = 'Jack' // 页面上不会有任何变化
    }, 1500)

    return {
      age, // 值类型不具有响应式
      ...details // 解构,相当于返回值类型,值类型不具有响应式
    }
  }
}
script> 

为什么需要 .value

  • ref 是一个对象(为了不丢失响应式,而值类型不具有响应式),value 存储值,可以理解成 ref = { value: ‘xxx’ }
  • 通过 .value 属性的 get 和 set 实现响应式
  • 用于模板、reactive 时,不需要 .value(经过 Vue 编译),其他情况都需要

为什么需要 toRef 和 toRefs

  • 初衷:在不丢失响应式的情况下,把对象数据分散/扩散(解构)
  • 前提:针对的是响应式对象(reactive 封装的)非普通对象
  • 注意:toRef 和 toRefs 并不是创造响应式,而是延续响应式

Vue3 升级了哪些重要的功能

  • createApp
  • emit 属性
  • 生命周期
  • 多事件
  • 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 属性


<HelloWorld :msg="msg" @onSay="say" />
// 子组件
export default {
  name: 'HelloWorld',
  props: { msg: String },
  emits: ['onSay'], // 声明需要 emit 的事件名
  setup(props, { emit }) {
    emit('onSay', 'hello')
  }
}

多事件处理


<button @click="func1($event), func2($event)">
  提交
button>

Fragment

template 中可以是多节点:


<template>
  <div class="container">
    <h1>titleh1>
    <p>...p>
  div>
template>


<template>
  <h1>titleh1>
  <p>...p>
template>

移除 .sync


<MyCom :title.sync="title" />


<MyCom v-model:title="title" />

异步组件

<!-- vue2.x -->
new Vue({
  components: {
    'my-com': () => import('./myCom.vue')
  }
})

<!-- vue3 -->
import { createApp, defineAsyncComponent } from 'vue'

createApp({
  components: {
    AsyncComponent: defineAsyncComponent(() => {
	  import('./myCom.vue')
	})
  }
})

移除 filter


<div>{{ message | formate }}div>

<div :id="rowId | formaId">div>

Teleport

<button @click="ifOpen = true">全屏button>


<teleport to="body">
  <div v-if="ifOpen" class="model">
    <div>teleport 弹窗div>
    <button @click="ifOpen = false">关闭button>
  div>
teleport>

Suspense

<Suspense>
  
  <template #default>
    <my-com /> 
  template>
	
  
  <template #fallback>
    loading...
  template>
Suspense>

Composition API

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

Composition API 实现逻辑复用

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

代码示例:


<template>
  <life-cycles v-if="flag" />
  <button @click="flag = !flag">切换显示button>
template>

<script>
import HelloWord from './components/HelloWord.vue'
export default {
  components: {
    HelloWord
  },
  data() {
    return {
      flag: true
    }
  }
}
script>

<template>
  <div>
    <h1>mouse position {{ x }} {{ y }}h1>
  div>
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
    console.log(x.value, y.value)
  }

  onMounted(() => {
    console.log('useMousePosition mounted')
    window.addEventListener('mousemove', update)
  })
  onUnmounted(() => {
    console.log('useMousePosition unMounted')
    window.removeEventListener('mousemove', update)
  })

  return { x, y }
}

export default useMousePosition

【前端面试专题】【5】Vue3_第5张图片

Vue3 如何实现响应式

回顾 Object.defineProperty

在之前【前端面试专题】【4】Vue2 原理 有提到过 vue2 通过 Object.defineProperty 实现响应式的原理和缺陷,当时给出的总结是使用 Object.defineProperty 有这么几个缺点:

  • 深度监听,需要递归到底,一次性计算量大
  • 无法监听新增属性/删除属性
  • 无法原生监听数组,需要特殊处理

那么 vue3 使用的 Proxy 是否解决了这些问题呢?

Proxy 基本使用

const data = {
  name: 'Jae',
  age: 22,
  details: {
    address: 'XXX'
  }
}

const proxyData = new Proxy(data, {
  get(target, key, receiver) {
    const result = Reflect.get(target, key, receiver)
    console.log('get:', key)
    return result // 返回结果
  },
  set(target, key, val, receiver) {
    const result = Reflect.set(target, key, val, receiver)
    console.log('set:', key, val)
    console.log('result:', result)
    return result // 是否设置成功
  },
  deleteProperty(target, key) {
    const result = Reflect.deleteProperty(target, key)
    console.log('delete property:', key)
    console.log('result:', result)
    return result // 是否删除成功
  }
})

【前端面试专题】【5】Vue3_第6张图片
改一下测试用的 data,我们看下数组的表现如何:

const data = [1, 2, 'c']

【前端面试专题】【5】Vue3_第7张图片
我们可以看到当我们向数组中 push 一项时,触发了很多 get 与 set,这些触发真的都是有必要的吗?比如触发了 set: length 4 的更新,在触发 set: 3 1 的时候 length 已经是4了,此时再 set 一次没什么意义,因此可以进行一些优化:

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 result // 返回结果
},
set(target, key, val, receiver) {
  // 重复的数据不处理
  const oldVal = target[key]
  if (val === oldVal) return true

  const result = Reflect.set(target, key, val, receiver)
  console.log('set:', key, val)
  return result // 是否设置成功
}

在这里插入图片描述

Reflect

const obj = {
  name: 'Jae',
  age: 22
}

Reflect.has(obj, 'a')
console.log(obj) // true,相当于 'a' in obj
Reflect.deleteProperty(obj, 'age')
console.log(obj) // { name: 'Jae' } 相当于 delete obj.age

Proxy 实现响应式

// 创建响应式
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 result // 返回结果
    },
    set(target, key, val, receiver) {
      // 重复的数据不处理
      const oldVal = target[key]
      if (val === oldVal) return true

      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)
      console.log('result:', result)
      return result // 是否删除成功
    }
  }

  // 生成代理对象
  const observed = new Proxy(target, proxyConf)
  return observed
}

// 测试数据
const data = {
  name: 'Jae',
  age: 22,
  details: {
    country: 'China'
  }
}

const proxyData = reactive(data)

测试一下:

【前端面试专题】【5】Vue3_第8张图片
输出结果都没什么问题,就是在获取 proxyData.details.country 的时候,只触发了 get: details,并没有触发 get: country,也就是深度监听还需要处理:

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) // 再包一层,深度监听
}

在这里插入图片描述
对比一下 vue2 通过 Object.defineProperty 时候,创建响应式的时候一进入就开始递归每一层数据,而使用 Proxy,只是在需要的时候,也就是 get 中才进行递归,并没有一次性递归到底。

最后优化一下,判断是新增的属性还是旧的属性:

set(target, key, val, receiver) {
  // 重复的数据不处理
  const oldVal = target[key]
  if (val === oldVal) 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 // 是否设置成功
}

【前端面试专题】【5】Vue3_第9张图片
总结:

  • 深度监听,性能更好
  • 可监听 新增/删除 属性
  • 可监听数组变化
  • Proxy 无法兼容所有浏览器,无法 polyfill

v-model 参数的用法

先来回顾一下 Vue2 中 .sync 的用法,参考官方文档:

【前端面试专题】【5】Vue3_第10张图片
而在 Vue3 中去除了 .sync 的写法,改用 v-model 参数写法:

【前端面试专题】【5】Vue3_第11张图片

<myComponent v-model:title="bookTitle" />



<myComponent :title="bookTitle" @update:title="bookTitle = $event" />

代码示例:


<template>
  <div>
    <p>{{ name }}-{{ age }}p>

    <user-info
      v-model:name="name"
      v-model:age="age"
    />
  div>
template>

<script>
import { reactive, toRefs } from 'vue'
import UserInfo from './UserInfo.vue'
export default {
  name: 'Vmodel',
  components: {
    UserInfo
  },
  setup() {
    const details = reactive({
      name: 'Jae',
      age: 22
    })

    return toRefs(details)
  }
}
script>

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

<script>
export default {
  name: 'UserInfo',
  props: {
    name: String,
    age: Number
  }
}
script>

在这里插入图片描述

watch 和 watchEffect 的区别

  • 两者都可以监听 data 属性变化
  • watch 需要明确监听哪个属性
  • watchEffect 会根据其中的属性,自动监听其变化

代码示例:

<template>
  <div>
    <p>watch and watchEffectp>
    <p>{{ numberRef }}p>
    <p>{{ name }}-{{ age }}p>
  div>
template>

<script>
import { reactive, ref, toRefs, watch, watchEffect } from 'vue'
export default {
  name: 'Watch',
  setup() {
    const numberRef = ref(10)
    const details = reactive({
      name: 'Jae',
      age: 22
    })

    watch(numberRef, (newNum, oldNum) => {
      console.log('ref watch', oldNum, newNum)
    }, {
      immediate: true // 在初始化的时候就监听
    })

    // setTimeout(() => {
    //   numberRef.value = 200
    // }, 1500)

    watch(() => details.age, (newAge, oldAge) => {
      console.log('details watch', newAge, oldAge)
    })

    setTimeout(() => {
      details.age = 25
    }, 1500)

    return {
      numberRef,
      ...toRefs(details)
    }
  }
}
script>

【前端面试专题】【5】Vue3_第12张图片

// 初始化时会执行一次,收集要监听的数据
watchEffect(() => {
  console.log('details.name', details.name)
})

setTimeout(() => {
  details.name = 'Jack'
}, 1500)

setTimeout(() => {
  details.age = 25
}, 1500)

【前端面试专题】【5】Vue3_第13张图片

setup 中如何获取组件实例

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

代码示例:

<template>
  <div>
    <p>get instancep>
    <p>{{ name }}p>
  div>
template>

<script>
import { getCurrentInstance, onMounted } from 'vue'
export default {
  name: 'GetInstance',
  data() {
    return {
      name: 'Jae'
    }
  },
  setup() {
    console.log('this', this)

    const instance = getCurrentInstance()
    console.log('instance', instance)
    console.log('data name', instance.data.name)

    onMounted(() => {
      console.log('onMounted name', instance.data.name)
    })
  }
}
script>

在这里插入图片描述

Vue3 为什么比 Vue2 快

Proxy 响应式

前面已经提到过,对比 Vue2 使用的 Object.defineProperty 有何优势

PatchFlag(静态标记)

  • 编译模板,动态节点做标记
  • 标记,分为不同的类型,如 text props
  • diff 算法时,可以区分静态节点,以及不同类型的动态节点

可以在这个网站可以看到 Vue3 模板编译的函数:

【前端面试专题】【5】Vue3_第14张图片
【前端面试专题】【5】Vue3_第15张图片

hoistStatic(静态提升)

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

【前端面试专题】【5】Vue3_第16张图片
把 hoistStatic 打开:

【前端面试专题】【5】Vue3_第17张图片
【前端面试专题】【5】Vue3_第18张图片

cacheHandler(事件监听缓存)

在这里插入图片描述
把 cacheHandler 打开:

【前端面试专题】【5】Vue3_第19张图片

【前端面试专题】【5】Vue3_第20张图片
缓存事件即:在遇到事件的时候如果没有该缓存函数则定义一个缓存函数,后面触发该事件的时候就不用再定义了

SSR 优化

  • 静态节点直接输出,绕过了 vdom
  • 动态节点还是需要动态渲染

【前端面试专题】【5】Vue3_第21张图片
把 SSR 打开:

【前端面试专题】【5】Vue3_第22张图片

【前端面试专题】【5】Vue3_第23张图片

tree-shaking

模板编译时,根据不同的情况,引入不同的 API

Vite

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

Vite 为什么启动快

  • 开发环境下使用 ES6 Module,无需打包
  • 生产环境使用 rollup,速度差别不是很大

Vue3 和 JSX

Vue3 中 JSX 的基本使用

使用之前需要安装依赖 npm i @vitejs/plugin-vue-jsx -D ,然后在 vite.config.js 中引入:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vue(), vueJsx()]
})

接下来就可以使用了:


<template>
  <div>
    <p>Demo {{ numRef }}p>
  div>
template>

<script>
import { ref } from 'vue'
export default {
  name: 'Demo',
  setup() {
    const numRef = ref(100)
    return {
      numRef
    }
  }
}
script>


<script lang="jsx">
import { ref } from 'vue'

export default {
  setup() {
    const numberRef = ref(200)

    return () => (
      <p>Demo { numberRef.value }</p>
    )
  }
}
script>
// JSX 版本
import { defineComponent, ref } from "vue"
import Child from './Child'

export default defineComponent({
  setup() {
    const numberRef = ref(300)

    return () => (
      <>
        <p>demo1 { numberRef.value }</p>
        <Child name="Jae" />
      </>
    )
  }
})
// Child.jsx
import { defineComponent } from "vue"

export default defineComponent({
  props: ['name'],
  setup(props) {
    return () => (
      <p>Child { props.name }</p>
    )
  }
})

在这里插入图片描述

JSX 和 template 的区别

  • 语法上有很大的区别
  • 本质相同
  • 具体示例:插值、自定义组件、属性和事件、条件和循环

语法区别:

  • JSX 本质就是 js 代码,可以使用 js 的任何能力
  • template 只能嵌入简单的 js 表达式,其他需要指令,如 v-if、v-for
  • JSX 已经称为 ES 规范,template 还是 Vue 的自家规范

归纳:

  • 在 tempalate 中,插值是用 {{ }},而在 JSX 中,插值是用 { }
  • 在 JSX 引入自定义组件的时候,不能使用小写以及驼峰写法
  • 在 template 中,属性可以写成动态类型的,比如 ,而 JSX 中没有这种冒号的写法,需要动态的话也只能在括弧中写
  • 在 template 中,事件可以写成 ,而 JSX 中应该写成
  • 在 template 中,条件可以写成 ,而 JSX 中应该写成 { flag.value && }
  • 在 template 中,循环 可以写成
    {{ item.name }}
    ,而 JSX 中应该写成 {list.map(item =>
    {item.name}
    )}

JSX 和 slot

  • slot 是 Vue 发明的概念,为了完善 template 的能力
  • slot 本身的使用并不简单,特别是作用域 slot 较难以理解

实现普通插槽

代码示例:


<template>
  <tabs default-active-key="1" @change="onTabsChange">
    <tab-panel key="1" title="title1">
      <div>tab panel content 1div>
    tab-panel>
    <tab-panel key="2" title="title2">
      <div>tab panel content 2div>
    tab-panel>
    <tab-panel key="3" title="title3">
      <div>tab panel content 3div>
    tab-panel>
  tabs>
template>

<script>
import Tabs from './Tabs.jsx'
import TabPanel from './TabPanel.vue'
export default {
  components: {
    Tabs,
    TabPanel
  },
  methods: {
    onTabsChange(key) {
      console.log('tab changed: ', key)
    }
  }
}
script>

<template>
  <slot>slot>
template>

<script>
export default {
  name: 'TabPanel',
  props: ['key', 'title']
}
script>
// Tabs.jsx
import { ref } from 'vue'
export default {
  name: 'Tabs',
  props: ['defaultActiveKey'],
  emits: ['change'],
  setup(props, context) {
    const children = context.slots.default()
    const titles = children.map(panel => {
      const { key, title } = panel.props || {}
      return {
        key, title
      }
    })

    // 当前 actKey
    const actKey = ref(props.defaultActiveKey)
    function changeActKey(key) {
      actKey.value = key
      context.emit('change', key)
    }

    // jsx
    const render = () => <>
      <div>
        { /* 渲染 buttons */ }
        { titles.map(titleInfo => {
          const { key, title } = titleInfo
          return <button
            key={key}
            style={{ color: actKey.value === key ? 'blue' : '#333' }}
            onClick={() => changeActKey(key)}
          >{title}</button>
        })}
      </div>
      <div>
        { /* 渲染内容 */ }
        {children.filter(panel => {
          const { key } = panel.props || {}
          if (actKey.value === key) return true
          return false
        })}
      </div>
    </>

    return render
  }
}

【前端面试专题】【5】Vue3_第24张图片

实现作用域插槽

回顾一下 Vue 中的作用域插槽:常用于子组件将 data 中的值传到 slot 中,供父组件使用:


<template>
  <Child>
    <template v-slot="slotProps">
      <p>父组件传值p>
      <p>获取子组件 data:{{ slotProps }}p>
    template>
  Child>
template>

<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  }
}
script>
<template>
  <p>Childp>
  <slot :msg="msg">slot>
template>

<script>
export default {
  data() {
    return {
      msg: '我是Child组件中data的msg'
    }
  }
}
script>

【前端面试专题】【5】Vue3_第25张图片
这对于 Vue 的初学者或是很久没使用过作用域插槽的人来说是非常不友好的,因为这是 Vue 中自定的语法规范,很容易遗忘。接下来让我们看看使用 JSX 如何完成作用域插槽的功能:

// index.jsx
import { defineComponent } from "vue"
import Child from './Child.jsx'

export default defineComponent({
  setup() {
    function render(msg) {
      return <p>msg: { msg }</p>
    }

    return () => (
      <>
        <p>父组件</p>
        <Child render={render}></Child>
      </>
    )
  }
})
// Child.jsx
import { defineComponent, ref } from "vue"

export default defineComponent({
  props: ['render'],
  setup(props) {
    const msgRef = ref('作用域插槽Child')

    return () => (
      <p>{props.render(msgRef.value)}</p>
    )
  }
})

【前端面试专题】【5】Vue3_第26张图片

script setup

基本使用

  • 顶级变量、自定义组件,可以直接用于模板
  • 可以正常使用 ref reactive computed 等能力
  • 和其他

你可能感兴趣的:(面试,前端,vue.js)