vue面试题汇总 #

双向数据绑定的原理 #

Vuejs的响应式设计是基于数据劫持+发布订阅模式来实现的，通过遍历data中的属性，并通过Object.defineProperty()方法来劫持各个属性的getter和setter，并在其内部追踪相关依赖，当属性被访问或修改时发布消息给所有依赖重新计算或更新。

简单来说就是当响应式对象被访问时就会出发getter，然后在getter中记录下哪些地方使用了该数据，并将这些使用者存放进依赖列表中，当数据发生变更时，就会出发setter，在setter中将更新操作消息发布依赖列表中的所有依赖项重新计算或更新。

156、使用Object.defineProperty()来进行数据劫持有什么缺点？ #

有一些对属性的操作，使用这种方法无法拦截，比如说通过下标方式修改数组数据或者给对象新增属性，vue内部通过重写函数解决了这个问题。在 Vue3.0 中已经不使用这种方式了，而是通过使用Proxy对对象进行代理，从而实现数据劫持。使用Proxy的好处是它可以完美的监听到任何方式的数据改变，唯一的缺点是兼容性的问题，因为这是 ES6 的语法。

1、谈谈你对MVVM的理解？ #

MVVM是一种前端架构设计模式，其名称来源于Model-View-ViewModel的缩写。MVVM架构将前端应用程序划分为三个主要组件，分别是数据模型（Model）、用户界面（View）和视图模型（ViewModel）。这三个组件之间的关系如下所示：

• Model代表数据模型，数据和业务逻辑都在Model层中定义；
• View代表UI视图，负责数据的展示；
• ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

MVVM模式通过双向数据绑定将View层和Model层连接起来，使得ViewModel的状态改变可以自动传递给View，而View的数据变化也会自动同步到Model。这种数据双向绑定大大简化了数据状态的管理和维护，使得开发者只需关注业务逻辑，而无需手动操作DOM或关注数据状态的同步问题。

87、MVVM、MVC、MVP的区别 #

MVC、MVP 和 MVVM 是三种常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化开发效率。

在开发单页面应用时，往往一个路由页面对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里。页面的渲染、数据的获取，对用户事件的响应所有的应用逻辑都混合在一起，这样在开发简单项目时，可能看不出什么问题，如果项目变得复杂，那么整个文件就会变得冗长、混乱，这样对项目开发和后期的项目维护是非常不利的。

2、谈谈你对Vue中响应式数据的理解？Vue3响应式原理是？Vue2响应式原理？ #

new Proxy(data,{
  //拦截读取属性值
  get(target, prop){
    return Reflect.get(target, prop)
  },
  //拦截设置属性值或添加新属性
  set(target, prop, value){
    return Reflect.set(target, prop, value)
  },
  //拦截删除属性
  deleteProperty(target, prop){
    return Reflect.deleteProperty(target, prop)
  }
})

Vue3响应式数据实现 #

let obj = {}
const objProxy = new Proxy(obj, {
  get: (target, key, receiver) => {
    console.log('get ' + key)
    return Reflect.get(target, key, receiver)
  },
  set: (target, key, value, receiver) => {
    console.log('set', key)
    if (key === 'text') {
      input.value = value
      p.innerHTML = value
    }
    return Reflect.set(target, key, value, receiver)
  }
})
objProxy.name = '张三' // set name
objProxy.name // get name

Vue2响应式数据实现 #

let car = {};
let price = 3000
Object.defineProperty(car, 'price', {
  enumerable: true,
  configurable: true,
  get () {
    console.log('price属性被读取')
    return price
  },
  set (newVal) {
    console.log('price属性被修改')
    price = newVal
  }
})
car.price // price属性被读取
car.price = 200 // price属性被修改

3、Vue中如何检测数组的变化? #

数组可以用defineProperty进行监听。但是考虑性能原因，不能数组一百万项每一项都循环监听（那样性能太差了）。所以没有使用Ojbect.defineProperty对数组每一项进行拦截，而是选择劫持数组原型上的个别方法并重写。

具体重写的有：

push、pop、shift、unshift、sort、reverse、splice

手写实现 #

const state = [1, 2, 4] // 待监听的数组
const contentEl = document.querySelector('.array-content')
const btnEl = document.querySelector('#btn')

// 渲染函数
function render () {
  contentEl.innerHTML = state
}
render() // 首次需要渲染

// 获取数组的原型对象，即是获取原型链上绑定的push、pop等函数
const originalArray = Array.prototype
// 创建一个对象作为拦截器
let arrayMethods = Object.create(originalArray)

// 劫持数组
function defineReactive (obj) {
  // 函数劫持: 改写这个新对象身上的push、splice等数组方法
  obj.push = function (...args) {
    // 还是调用原生的push方法
    originalArray.push.apply(this, args) // 或者用call(this, ...args)
    // 视图更新
    render()
  }
  // 将需要绑定的数组的原型链 __proto__ 指向重写方法的新数组对象
  obj.__proto__ = arrayMethods
}
defineReactive(state) // 劫持数组对象

// 更改数据，观察dom修改
btnEl.addEventListener('click', () => {
  state.push(Math.round(Math.random() * 10 + 1))
})

4、Vue中如何进行依赖收集的? #

依赖收集是通过响应式系统来实现的。当一个响应式对象被访问时，它会触发getter函数，并将当前正在计算的计算属性或渲染函数添加到该响应式对象的依赖列表中。在执行setter函数更新响应式对象时，它会通知依赖列表中的所有计算属性和渲染函数进行重新计算和更新。

• 在Vue 2.x中，依赖收集是通过Dep类和Watcher类来实现的。每个响应式对象都有一个关联的Dep实例，用于管理与该对象相关的依赖项。在计算属性或渲染函数中访问响应式对象时，会创建一个Watcher实例，并将其添加到Dep实例的依赖列表中。当响应式对象发生变化时，Dep实例会通知其所有的Watcher实例进行重新计算和更新。
• 在Vue 3.x中，通过使用Proxy代理对象来拦截对响应式对象的读取和写入操作，并在其中进行依赖收集和派发更新。

5、如何理解Vue中的模板编译原理? #

所谓模板编译过程就是把用户写的模板经过一系列的处理最终生成render函数的过程。

模板编译原理

• 解析模板：将模板字符串解析成抽象语法树（AST）。
  js

  {
    tag: 'template',
    parent: undefined,
    children: [
      {
        tag: 'div',
        children: [],
        parent: {tag: 'div', children: Array(1), parent: {…}}
      }
    ]
  }
  

• 静态分析：对抽象语法树进行静态分析，找出其中的静态节点，即不需要响应式更新的节点。
  • 在AST中找出静态节点并打上标记，即static属性设为true
  • 在AST中找出静态根节点并打上标记，即staticRoot属性设为true
• 代码生成：根据抽象语法树生成渲染函数代码字符串。
  • 1、递归AST生成可执行的代码字符串
    js

    _c('template', null, _c('div', null, [_c('input type="file" @change="handleChange" /', null, [_c('div', null, [_c('el-button @click="handleClick"', null, [])])])]))
    

  • 2、当代码字符串拼接好后，会放在with中返回给调用者，即render函数接收的参数。
    js

    const render = new Function(`with(this){ return ${code} }`);
    return { render }; // 返回包含渲染函数的对象
    

• 缓存优化：对模板和渲染函数进行缓存优化，以提升性能。

6、Vue生命周期钩子是如何实现的? #

Vue的生命周期钩子本质上是通过在Vue实例的生命周期的不同阶段执行特定的函数来实现的。这些函数就被称为生命周期钩子，他们是Vue实例在其生命周期的不同阶段自动调用的方法。当创建一个Vue实例时，会按照特定顺序自动调用这些钩子。

7、Vue组件生命周期有哪些？vue2和vue3的生命周期对比？ #

Vue2生命周期 #

vue生命周期分为8个阶段，即分别:

• 创建前: beforeCreate

  表示实例完全被创建出来之前，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。初始化一些默认的声明周期函数和默认的事件，data和methods中的数据都没初始化。

• 创建后: created

  数据对象data已存在，可以调用methods中的方法，操作data中的数据，但dom未生成，$el未存在。

• 载入前: beforeMount

  vue实例的$el和data都已初始化，挂载之前为虚拟的dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。

• 载入后: mounted

  vue实例挂载完成，data.message成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，DOM渲染在mounted中就已经完成了。

• 更新前: beforeUpdate

  当data变化时，会触发beforeUpdate方法。data数据尚未和最新的数据保持同步。

• 更新后: updated

  当data变化时，会触发updated方法。页面和data数据已经保持同步了。

• 销毁前: beforeDestroy

  组件销毁之前调用，在这一步，实例仍然完全可用。

• 销毁后: destroyed

  组件销毁之后调用，对data的改变不会再触发周期函数，vue实例已解除事件监听和dom绑定，但dom结构依然存在。

Vue3生命周期 #

vue2中的beforecreate和created生命周期钩子已经被setup方法取代，除此之外vue3还有9个生命周期钩子:

• onBeforeMount: 在组件被挂载之前被调用

  当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点，它即将首次执行 DOM渲染过程(即首次调用redner函数)。

• onMounted: 在组件挂载完成后执行

  这个钩子通常用于执行需要访问组件所渲染的 DOM 树。

• onBeforeUpdate: 在组件即将因为响应式状态变更而更新其 DOM 树之前调用

  数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

• onUpdated: 在组件因为响应式状态变更而更新其 DOM 树之后调用

  会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick()作为替代。

• onBeforeUnmount: 在组件实例被卸载之前调用

  当这个钩子被调用时，组件实例依然还保有全部的功能。

• onUnmounted: 在组件实例被卸载之后调用

  可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。

• onActivated: 组件实例是<KeepAlive>缓存树的一部分，当组件被插入到 DOM 中时调用

  被keep-alive缓存的组件激活时调用。

• onDeactivated: 若组件实例是<KeepAlive>缓存树的一部分，当组件从 DOM 中被移除时调用

  被keep-alive缓存的组件停用时调用。

• onErrorCaptured: 在捕获了后代组件传递的错误时调用

  当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回false以阻止该错误继续向上传播。

使用示例:

import { onMounted } from 'vue'
export default {
  setup () {
  onMounted(() => {
    console.log('mounted in the composition api!')
  })
  }
}

8、Vue.mixin的使用场景和原理? #

mixin(混入)，提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。

本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等，当组件初始化的时候，会调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并。如果混入的数据和本身组件的数据有冲突，采用本身的数据为准。

使用场景

在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立。这时，可以通过Vue的mixin功能将相同或者相似的代码提出来。例如：两个组件都在使用websocket连接。

9、Vue的组件data为什么必须是一个函数? #

Vue的组件中，data选项为必须是一个函数，而不是一个对象。组件可能被多次使用。

• 如果组件data是一个对象，对象属于引用类型，两个组件中设置的data都会指向同一个内存地址，会导致不同的实例之间相互影响，导致意想不到的结果。
• 但是组件data是一个函数，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。

var parent = {
  name: '张三',
  age: 40
}
var child = parent
child.name = '涨小三'
child.age = 18
console.log(parent) // {name: "涨小三", age: 18}
console.log(child) // {name: "涨小三", age: 18}

10、请说明nextTick的原理？ #

Vue的nextTick是一个异步方法，它的作用是在下次DOM更新循环结束之后执行指定的回调函数。

11、computed、watch和methods的区别是什么? #

watch是监听数据，computed是计算属性，methods是方法。

• computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
• methods方法表示一个具体的操作，主要书写业务逻辑；
• watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed和methods的结合体；
  • watch适用于：需要在数据变化时执行异步或开销较大的操作时
• computed必定要有return值；watch没有return值。

12、Vue.set方法是如何实现的? #

Vue.set方法会传入三个参数，分别是target、key和value。

target: 对象或者数组，key: 属性名或者数组索引，value: 对应设置的值。返回值为设置的值即value。

大致实现原理如下:

• 首先判断传入的target是数组，并且key是索引，就调用splice变异方法，将val值添加；
• 如果传入的是一个对象，首先判断key是否存在于target中
  • 如果存在，则表示不是新增属性，只需要修改值即可
  • 如果不存在，会先会获取并判断target上的__ob__属性(该属性用于判断target是否为响应式对象)是否存在
    • 如果target上的__ob__属性不存在，则表示target不是响应式对象，只需要给他添加新属性即可，不用将新属性转换成响应式
    • 如果target上的__ob__属性存在，则表示target是响应式对象，就会调用defineReactive方法将新属性添加到target上

    defineReactive方会将新属性添加完之后并将其转化成响应式，最后通知依赖更新。

对应vue源码位置src/core/observer/index.js

export function set (target, key, val){
  if (process.env.NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target))) {
    warn('Cannot set reactive property on undefined, null, or primitive value: ' + target)
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  if (!ob) {
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

12、vm.$watch实现原理？ #

vm.$watch是 Vue 实例的一个方法，它用于观察Vue实例上的一个数据属性，当该属性的值发生改变时，执行一个回调函数。这个方法允许我们监听数据的变化并在变化时执行特定的逻辑。

vm.$watch的实现原理大致可以分为以下几个步骤：

1. 数据劫持：Vue通过Object.defineProperty()方法劫持了各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调，这也是Vue实现响应式系统的核心机制。
2. 设置观察者：当调用vm.$watch方法时，Vue会为要观察的数据属性设置一个观察者(Watcher)，这个观察者是一个内部对象，它包含了要观察的属性名、回调函数以及其他一些选项。
3. 依赖收集：在观察者创建时，会触发数据属性的getter方法。在这个过程中，Vue会收集当前正在执行的Watcher对象，并将其添加到该数据属性的依赖列表中。这样当数据属性发生变化时，Vue就能够知道哪些Watcher需要被通知。
4. 数据变化通知：当数据属性的setter方法被调用时（即数据发生变化时），Vue会触发该数据属性的所有依赖的Watcher对象。这些 Watcher对象会依次执行它们的回调函数，从而响应数据的变化。
5. 执行回调函数：对于vm.$watch创建的观察者，当其依赖的数据属性发生变化时，Vue会执行传递给vm.$watch的回调函数，这个回调函数可以访问到变化前后的数据值，以便执行相应的逻辑。

vm.$watch的实现原理基于Vue的响应式系统和依赖收集机制，通过劫持数据属性的setter和getter，Vue能够在数据变化时通知相关的观察者并执行相应的回调函数。

12、Vue.delete实现原理 #

Vue.delete用于删除对象的属性或者数组的元素。其实现原理:

1. 首先判断传入的第一个参数是否为数组或对象，如果不是则直接返回。
2. 如果是数组，则使用JavaScript原生的Array.prototype.splice()方法来删除指定索引处的元素，并通知Vue响应式系统更新视图。
3. 如果是对象，则使用JavaScript的delete操作符删除指定属性，并通知Vue响应式系统更新视图。

13、Vue为什么要用虚拟Dom？ #

虚拟DOM(Virtual DOM)，起始本质就是一个js对象，当数据发生变化时，我们不直接去操作真实DOM(开销大)，而是去操作这个js对象，从而避免大量的回流重绘操作，再结合diff算法，找出两个新旧虚拟DOM之间的差异部分，从而最小化的去一次性更新真实DOM，而不是频繁操作DOM，性能得到了大大的提升。

起初我们在使用原生js/jquery时，不可避免的会大量操作DOM，而DOM的变化又会引发回流和重绘，从而降低页面渲染性能。而虚拟DOM的主要目的就是为了减少频繁操作DOM而引起回流重绘所引发的性能问题。

14、Vue的diff算法的作用？diff算法原理是什么？ #

15、既然vue通过数据劫持可以精准的探测数据变化，为什么还要进行diff检测差异? #

16、请说明key的作用和原理 #

17、谈谈对组件的理解 #

组件是指将页面上的某个功能或模块进行封装，形成一个独立的、可复用的代码单元。通过组件化开发，可以将UI界面的各个部分进行拆分和抽象，从而更好地管理和维护代码，提高开发效率和代码质量。

在前端开发中，组件通常由HTML、CSS和JavaScript等代码构成，可以包含一些特定的业务逻辑、样式和交互效果等。组件的设计应该遵循高内聚、低耦合的原则，使得组件本身具有独立性、可扩展性和可维护性。

组件具有如下几个特点:

1. 独立性：每个组件都应该是独立的、完整的代码单元，不依赖于其他组件或模块；
2. 可复用性：组件应该是可复用的，可以在不同的场景中多次使用，提高代码的重用率；
3. 可定制性：组件应该具有一定的可定制性，允许开发者根据自己的需求对其进行修改和扩展；
4. 易维护性：组件应该易于维护，当出现问题时，能够快速地定位和修复。

18、请描述vue组件的渲染流程 #

Vue组件的渲染流程可以简单概括为以下几个步骤：

1. 解析模板：Vue会先将组件的模板转换成抽象语法树（AST）并进行静态分析，以确定组件的依赖关系、渲染顺序等信息；
2. 创建虚拟DOM：对于每个组件实例，Vue会创建一个虚拟DOM节点树，用于描述组件的结构和状态；
3. 进行数据响应式处理：Vue会为组件实例设置一个响应式系统，用于监听组件内部数据的变化，并自动更新组件的视图；
4. 渲染真实DOM：当组件需要进行渲染时，Vue会通过虚拟DOM树生成相应的HTML代码，并将其插入到真实的DOM树中；
5. 监听数据变化：当组件内部数据发生变化时，Vue会自动更新虚拟DOM树，并比较新旧虚拟DOM树之间的差异，以最小化DOM操作的次数；
6. 更新视图：根据上一步的差异，Vue会执行最少的DOM操作，更新组件的视图。

注意: Vue在进行组件渲染时，采用了异步更新机制，即将多个需要更新的组件合并成一个队列，在下一个事件循环周期中统一更新。这样做可以有效地避免不必要的重复渲染，并提高页面渲染的性能和稳定性。

19、请描述vue组件的更新流程 #

Vue组件的更新流程可以简单概括为以下几个步骤：

1. 触发数据变化：当组件内部的数据发生变化时，Vue会自动触发响应式系统，并向相应的依赖项发送通知，以通知需要更新的组件；
2. 生成新的虚拟DOM树：根据最新的数据状态，Vue会重新计算组件的虚拟DOM树，并生成一个新的虚拟DOM树；
3. 比较新旧虚拟DOM树：Vue会将新旧两个虚拟DOM树进行比较，找出它们之间的差异，并记录在一个变更列表中；
4. 更新真实DOM节点：根据变更列表，Vue会执行最少的DOM操作，更新真实的DOM节点；
5. 执行钩子函数：在更新完所有的DOM节点后，Vue会依次执行一些特定的钩子函数，如updated、activated等，以便开发者在必要的时候进行一些额外的处理。

注意: Vue在进行组件更新时，采用了异步更新机制，即将多个需要更新的组件合并成一个队列，在下一个事件循环周期中统一更新。这样做可以有效地避免不必要的重复渲染，并提高页面渲染的性能和稳定性。

20、Vue异步组件原理 #

在Vue.js中，异步组件是一种在需要时才加载和渲染的组件。这种机制可以提高应用程序的初始加载速度，尤其是当应用包含大量组件时。只有在组件需要被显示时，才会触发异步加载，从而减少了初始加载时的资源消耗。

异步组件的实现方式:

1. 使用动态import()函数：利用动态导入import()方法，该方法可以动态地加载模块并返回一个Promise对象。在 Vue 中，我们可以将组件的定义写成一个返回Promise对象的函数，然后使用Vue.component方法进行注册。在组件被渲染时，Vue会调用该函数并通过Promise的then方法获取组件定义对象，从而完成组件的渲染。

Vue.component('async-component', () => import('./AsyncComponent.vue'))

2. 使用webpack的code splitting：需要在webpack配置中启用code splitting功能，然后在组件定义中使用require.ensure()函数来加载组件。这种方式可以在服务端渲染中使用，但它需要一定的配置和工具支持。

Vue.component('async-component', (resolve) => {  
  require.ensure(['./AsyncComponent.vue'], () => {  
    resolve(require('./AsyncComponent.vue'))  
  })  
})

21、Vue函数组件的优势和原理 #

在Vue中，函数组件（也称为函数式组件）是一种特殊的组件类型，它不需要实例化，没有生命周期方法，也没有状态。它们只是接收一些props来显示组件，并且不支持响应式数据。

函数组件主要用于渲染目的，并且当组件不需要有状态或者不需要使用生命周期钩子时，它们是非常有用的。因为函数组件没有实例，所以它们不能访问Vue实例的方法或数据。

函数组件的原理是基于Vue的渲染函数和JSX的，它们提供了一种更底层、更简洁的方式来创建组件。在函数组件中，你只需要定义一个函数，该函数接收props作为参数，并返回一个虚拟DOM节点（VNode）。

Vue函数组件的创建和使用通常涉及以下步骤：

1. 定义一个函数，该函数接收props作为参数。
2. 在函数内部，根据props的值渲染出相应的虚拟DOM节点。
3. 使用Vue的render函数或JSX来将函数组件渲染到页面上。

// 使用Vue的render函数  
Vue.component('my-functional-component', {  
  functional: true,  
  props: {  
    msg: String  
  },  
  render(h, context) {  
    return h('div', context.props.msg)  
  }  
})  
  
// 使用JSX  
Vue.component('my-functional-component', {  
  functional: true,  
  props: {  
    msg: String  
  },  
  render(h, context) {  
    return <div>{context.props.msg}</div>  
  }  
})

22、组件的传值方式有哪些？Vue组件之间通信方式有哪些？ #

组件之间的通信种类:

• props/$emit
• vuex/pinia
• ref && $refs
• eventBus(事件总线)
• $attrs/$listeners
• provide/inject
• $parent/$children
• localStorage、sessionStorage、Cookies
• slot插槽

常见使用场景可以分为三类：

• 父子通信
  • 父向子传递数据是通过props，子向父是通过events（$emit）；
  • 通过父链/子链也可以通信（$parent/$children）；
  • ref和$refs也可以访问组件实例；
  • provide/injectAPI；
  • $attrs/$listeners；
  • slot插槽；
  html

  Child.vue:
  <template>
    <div>
      <slot :user="user"></slot>
    </div>
  </template>
  <script>
  export default{
    data(){
      return {
      user:{ name:"oldCode" }
      }
    }
  }
  </script>
  
  Parent.vue:
  <template>
    <div>
      <child v-slot="slotProps">
        {{ slotProps.user.name }}
      </child>
    </div>
  </template>
  

• 兄弟通信
  • eventBus；
  • Vuex；
• 跨级通信
  • eventBus；
  • Vuex；
  • provide/injectAPI；
  • $attrs/$listeners；

23、$attrs/$listeners是为了解决什么问题出现的? #

• $attrs是一个内置属性，指父组件传递的、除了自己定义的props属性、class和style之外的所有属性，一般用在子组件的子元素上。
• $listeners是一个内置属性，它是一个对象，里面包含了作用在这个组件上的所有监听器，你就可以配合v-on="$listeners"将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）。
• inheritAttrs，默认值true，默认情况下父作用域的不被认作props的attribute绑定，将会“回退”且作为普通的HTML attribute应用在子组件的根元素上。简单来说默认情况下，父组件通过props传递给子组件的属性，如果在子组件中没有使用props绑定，那么默认会绑定在HTML元素上。

<template>
  <div>
    <h1>A组件</h1>
    <com-b :foo="foo" :bar="bar" :baz="baz"></com-b>
  </div>
</template>
<script lang="ts">
import ComB from './ComB.vue'
export default {
  components: {
    ComB
  },
  data () {
    return {
      foo: 'foo',
      bar: 'bar',
      baz: 'baz'
    }
  }
}
</script>

<template>
  <div>
    <h2>B组件</h2>
    <div>foo: {{ foo }}</div>
    <div>bar: {{ bar }}</div>
    <com-c :qux="'qux'" v-bind="$attrs"></com-c>
  </div>
</template>
<script lang="ts">
import ComC from './ComC.vue'
export default {
  components: {
    ComC
  },
  props: {
    foo: String,
    bar: String
  },
  created () {
    console.log(this.$attrs) // {baz: 'baz'}
  }
}
</script>

<template>
  <div>
    <h3>C组件</h3>
    <div>qux: {{ qux }}</div>
    <div>baz: {{ baz }}</div>
  </div>
</template>
<script lang="ts">
export default {
  props: {
    qux: String,
    baz: String
  },
  created () {
    console.log(this.$attrs) // {}
  }
}
</script>

<template>
  <div>
    <h1>A组件</h1>
    <com-b :foo="'foo'" :bar="'bar'" :demo="'demo'"></com-b>
  </div>
</template>
<script lang="ts">
import ComB from './ComB.vue'
export default {
  components: {
    ComB
  }
}
</script>

<template>
  <div>
    <h2>B组件</h2>
  </div>
</template>
<script lang="ts">
export default {
  inheritAttrs: true,
  props: {
    foo: String,
    bar: String
  }
}
</script>

<template>
  <div>
    <h1>A组件</h1>
    <com-b @method1="handleMethod1" @method2="handleMethod2"></com-b>
  </div>
</template>
<script lang="ts">
import ComB from './ComB.vue'
export default {
  components: {
    ComB
  },
  methods: {
    handleMethod1 (target) {
      console.log('method1 running: ', target)
    },
    handleMethod2 (target) {
      console.log('method2 running: ', target)
    }
  }
}
</script>

<template>
  <div>
    <h2>B组件</h2>
    <button @click="handleClick">点击触发method1</button>
    <com-c v-on="$listeners"></com-c>
  </div>
</template>
<script lang="ts">
import ComC from './ComC.vue'
export default {
  components: {
    ComC
  },
  created () {
    console.log('B: ', this.$listeners) // {method1: ƒ, method2: ƒ}
  },
  methods: {
    handleClick () {
      this.$emit('method1', 'b组件')
    }
  }
}
</script>

<template>
  <div>
    <h3>C组件</h3>
    <button @click="handleClick">点击触发method2</button>
  </div>
</template>
<script lang="ts">
export default {
  created () {
    console.log('C: ', this.$listeners) // {method1: ƒ, method2: ƒ}
  },
  methods: {
    handleClick () {
      this.$emit('method2', 'c组件')
    }
  }
}
</script>

B:  {method1: ƒ, method2: ƒ}
C:  {method1: ƒ, method2: ƒ}

点击B组件中的 "点击触发method1" 按钮，控制台输出: 
method1 running:  b组件

然后再点击C组件中的 "点击触发method2" 按钮，控制台输出:
method2 running:  c组件

24、v-for和v-if哪个优先级更高? #

• Vue2中，v-for的优先级高于v-if；
• Vue3中，v-if的优先级高于v-for； 注意: 永远不要把v-if和v-for同时用在同一个元素上。

25、v-model是如何实现的? #

1. v-bind绑定响应式数据；
2. 通过oninput触发事件获取当前$event.target.value，然后赋值给当前变量。

<input
  :value="value"
  @input="event => value = event.target.value">

26、Vue的普通Slot以及作用域Slot的区别 #

Slot(插槽)用于实现组件之间的内容分发和复用。

• 普通插槽
  html

  <!-- 子组件 -->
  <template>
    <div>
      <p>子组件</p>
      <!-- 普通插槽占位 -->
      <slot></slot>
    </div>
  </template>
  <!-- 父组件 -->
  <template>
    <div>
      <p>父组件</p>
      <com-child>我是插槽占位填充内容</com-child>
    </div>
  </template>
  

  
• 作用域插槽: 作用域插槽可以拿到子组件里面的属性。在子组件中传入属性然后渲染。简单来说在父组件能够在插槽中访问到子组件的数据。
  html

  <!-- 子组件 -->
  <template>
    <div>
      <p>子组件</p>
      <slot v-bind:user="{ name: '张三', age: 23 }"></slot>
    </div>
  </template>
  
  <!-- 父组件 -->
  <template>
    <div>
      <p>父组件</p>
      <com-b>
        <template v-slot="slotProps">
          我是叫{{ slotProps.user.name }}，今年{{ slotProps.user.age }}岁
        </template>
      </com-b>
    </div>
  </template>
  

  
• 具名插槽: 有时我们需要多个插槽，对于这样的情况，<slot>元素有一个特殊的attribute：name，不带name的<slot>出口带有隐含的名字default。
  html

  <!-- 子组件 -->
  <template>
    <div>
      <p>子组件</p>
      <slot name="title"></slot>
      <slot name="author" v-bind="{ name: '张三' }"></slot>
      <slot></slot>
      <slot></slot>
      <slot name="content"></slot>
      <slot :name="slotName"></slot>
      <slot name="meta" v-bind="{ tags: ['vue', 'vite'], type: 'web前端学习' }"></slot>
    </div>
  </template>
  <script>
  export default {
    data () {
      return {
        slotName: 'time'
      }
    }  
  }
  </script>
  
  <!-- 父组件 -->
  <template>
    <div>
      <p>父组件</p>
      <com-b>
        <!-- 具名插槽 -->
        <template v-slot:title>
          <h1>标题</h1>
        </template>
  
        <!-- 具名插槽 + 作用域插槽 -->
        <template v-slot:author="data">
          <p>作者：{{ data.name }}</p>
        </template>
  
        <!-- 具名插槽的缩写 -->
        <template #content>
          <article>我是内容...</article>
        </template>
  
        <!-- 独占插槽的简写: default插槽可以省略名称 -->
        <template v-slot>
          <p>我是默认区域</p>
        </template>
  
        <!-- 动态插槽名 -->
        <template v-slot:[slotName]>
          <p>时间: 2022-08-19</p>
        </template>
  
        <!-- 插槽解构 -->
        <template v-slot:meta="{ tags, type }">
          <p>分类: {{ type }}, 标签: {{ tags }}</p>
        </template>
      </com-b>
    </div>
  </template>
  <script lang="ts">
  import ComB from './ComB.vue'
  export default {
    components: {
      ComB
    },
    data () {
      return {
        slotName: 'time'
      }
    }
  }
  </script>
  

  

27、Vue.use是干什么的？原理是什么？ #

Vue.use()是Vue.js提供的插件安装方法，用于全局注册Vue.js插件。

注意: 当install方法被同一个插件多次调用，插件将只会被安装一次。

28、组件写name有啥好处？路由name的作用？ #

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }, {
      path: '/text',
      name: 'text',
      component: text
    }, {
      path: '/text/:id',
      name: 'textDetail',
      component: param
    }
  ]
})

<template>
  <div id="app">
    <!-- 默认的渲染组件 -->
    <router-view></router-view>
    <!-- 将渲染Hello组件 -->
    <router-view  name="Hello"></router-view>
    <!-- 将渲染text组件 -->
    <router-view  name="text"></router-view>
  </div>
</template>

router.push({
  name: 'textDetail',
  params: {
    id: 1
  }
})

export default {
  watch: {
    '$router': {
      immediate: true,
      handler: (val, old) => {
        this.showFooter = val.name === 'Home'
      }
    }
  }
}

29、vue的修饰符有哪些? #

事件修饰符

• .stop: 阻止事件冒泡
• .prevent: 阻止事件默认行为
• .once: 点击事件只会触发一次
• .native: 在自定义组件上使用，使其当做原生HTML标签看待
• .self: 只当在event.target是当前元素自身时触发处理函数，即事件不是从内部元素触发的
• .capture: 添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
• .exact: 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<a v-on:click.stop="doThis"></a>

<!-- 随便按那个键 + 鼠标点击都会触发 -->
<button v-on:click.ctrl="onClick">A</button>
<!-- 只有按ctrl键 + 鼠标点击才会触发 -->
<button v-on:click.ctrl.exact="onClick">A</button>

按键修饰符

在监听键盘事件时，添加按键修饰符，通常用于keydown和keyup事件

• 按键码: 在键盘事件后面添加.xxx，用于监听按了哪个键。常用按键码如下:
  • .enter
  • .tab
  • .delete( (捕获“删除”和“退格”键))
  • .esc
  • .up
  • .down
  • .space等。

<!-- 按enter键调用submit方法 -->
<input @keyup.enter="submit" />

<!-- 组合使用: Ctrl + C -->
<input v-on:keyup.alt.67="clear">

表单修饰符|v-model修饰符

• .lazy: 在表单输入时不会马上显示在页面，而是等输入完成失去焦点时才会显示；
• .trim: 过滤表单输入时首尾的空格；
• .number: 限制输入数字或将输入的数据转为数字

鼠标按键修饰符

限制处理函数仅响应特定的鼠标按钮。

• .left: 鼠标左键被点击；
• .right: 鼠标右键被点击；
• .middle: 鼠标中键被点击；

<!-- 表示只有点击鼠标右键时才处理 onClick 函数，同时阻止浏览器右键的默认行为 -->
<button @click.right.prevent="onClick">点击我</button>

30、如何理解自定义指令? #

我们日常使用的v-for、v-if、v-model等等都称为指令，这些是vue的内置指令，这些指定都是我们可以直接使用的。

31、keep-alive平时在哪里使用？原理是什么？ #

<keep-alive>是Vue.js内置组件，用于缓存动态组件或者组件的状态，从而提高应用的性能。

32、谈谈Vue的性能优化有哪些? #

1. 减少不必要的计算和渲染：使用computed属性和v-if/v-show指令来避免不必要的计算和渲染，提高组件的更新效率。
2. 合理使用v-for指令：避免在v-for循环中使用复杂表达式或者方法，可以通过在computed或methods中预处理数据来提高性能。
3. 避免频繁操作DOM：合理使用key属性和v-html/v-text指令，尽量避免频繁操作DOM，减少页面重渲染次数。
4. 使用异步组件：将大型组件分割成异步加载的子组件，在需要时再进行加载，提高首屏加载速度和用户体验。
5. 优化网络请求：使用CDN加速、启用gzip压缩等方式优化静态资源请求，使用懒加载等技术优化动态加载请求。
6. 图片懒加载：当图片不在可视区域内时不立即加载，只有当滚动到该图片所在位置时才进行加载，减少页面初始加载时间和流量消耗。
7. 开启生产环境编译模式：在构建过程中开启生产环境编译模式，可以去除一些开发时用于调试的代码和警告，提升运行时性能。

33、vue中使用了哪些设计模式? #

1. 观察者模式：Vue的响应式系统基于观察者模式实现，当数据发生变化时，会通知所有关联的观察者进行更新。
2. 发布订阅模式：Vue的事件系统也是基于发布订阅模式实现的，组件之间可以通过事件来进行通信。
3. 代理模式：Vue的虚拟DOM采用了代理模式，对真实DOM进行了封装，提供了更加便捷的API操作。
4. 工厂模式：Vue中组件的创建和销毁都是通过工厂模式实现的，使得组件的创建和管理更加灵活。
5. MVVM模式：Vue采用MVVM（Model-View-ViewModel）模式，将视图与数据分离，通过ViewModel实现双向绑定，提高了代码的可维护性和可测试性。

34、vue中Watch的 deep:true 是如何实现的？ #

在Vue中，当使用watch监听对象时，可以通过设置deep:true选项来深度监听对象的变化。

35、Vue3速度快的原因？Vue3 为何比 Vue2 快？ #

36、什么是递归组件？举个例子说明下？ #

在组件中内使用组件本身，简单来说就是组件自己调用自己。

所谓递归组件，就是在当前组件内部引用自身，有个前提条件，组件必须声明name属性。

在我工作中会出现递归组件的情况有：

• “树”组件：用来展示文件层级的。
• 左侧导航栏：根据路由层级生成的导航菜单。
• 多级表格（嵌套的表格）。
• 评论嵌套回复

<template>
  <div class="myTree">
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <p>{{item.name}}</p>
        <div v-if="item.cList">
          <tree-menus :list="item.cList"></tree-menus>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "treeMenus",
  props: {
    list: Array,
  },
};
</script>

37、怎样理解 Vue 的单向数据流？ #

Vue 的单向数据流是指数据在 Vue 组件中的传递是单向的，即父组件可以通过 props 将数据传递给子组件，在子组件中不能直接修改这些数据。

如果需要修改，必须通过$emit触发事件由子组件向父组件传递数据来实现，若果非要直接修改prop会抛出警告。

这种单向数据流的设计使得组件之间的通信更加可预测和可维护，也有利于代码的复用和测试。

38、为什么不建议用index作为key？ #

首先明白key的作用？

key的特殊attribute主要用在 Vue 的虚拟 DOM 算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用key时，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。

• key在diff算法的作用，就是用来判断是否是同一个节点。
• Vue 中使用虚拟 dom且根据diff算法进行新旧 DOM 对比，从而更新真实dom，key是虚拟 DOM对象的唯一标识, 在diff算法中key起着极其重要的作用，key可以管理可复用的元素，减少不必要的元素的重新渲染,也要让必要的元素能够重新渲染。

为什么key 值不建议用index？

尤大大在vue2文档中明确支出：建议尽可能在使用v-for时提供key属性，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。简单来说就是如果使用index做key，那么直接底层帮你传进去好了，又何必多此一举。

• 1、性能消耗
  使用index做key，破坏顺序操作的时候， 因为每一个节点都找不到对应的key，导致部分节点不能复用,所有的新vnode都需要重新创建。
  • 例子一: 使用index做key，点击新增数据按钮新增一条数据，只需要将新增这一条数据的dom渲染即可，我们看看实际效果。
    html

    <template>
      <div id="app">
        <button @click="handleClick">添加数据</button>
        <ul>
          <li v-for="(item, index) in list" :key="index">{{ item.id }} - {{ item.name }} - {{ item.age }}</li>
        </ul>
      </div>
    </template>
    <script lang="ts">
    export default {
      data () {
        return {
          list: [
            { id: 1, name: '张三', age: 23 },
            { id: 2, name: '李四', age: 24 }
          ]
        }
      },
      methods: {
        handleClick () {
          const obj = { id: 3, name: '王五', age: 25 }
          this.list = [obj, ...this.list]
        }
      }
    }
    </script>
    

    • 打开浏览器的开发工具，修改数据的文本，后面加上-我没变，此时数据如下
    • 点击添加数据按钮，可以发现我们的dom整体都变了，很奇怪，我们明明只是新增了一条数据，那么只需要将新增这一条数据的dom渲染出来就行了，而实际是所有dom都改变了，整体而言性能方面消耗就大了(数据量大的话)。
    • 我们来看看上面的diff算法整体过程图 当我们在前面加了一条数据时index顺序就会被打断，导致新节点key全部都改变了，所以导致我们页面上的数据都被重新渲染了。
  • 例子二: 在例子一的基础上将key修改成唯一不重复的值时。
    html

    <li v-for="(item, index) in list" :key="item.id">{{ item.id }} - {{ item.name }} - {{ item.age }}</li>
    

    同样打开浏览器的开发工具，修改数据的文本，后面加上-我没变，然后点击新增数据按钮，效果如下: 从上图可以看出，我们点击新增数据按钮时，只是在添加了新增的一条数据的dom，而我们其他的dom并没有重新渲染。
  • 例子三: 计算出使用index作为key渲染数据量较大的开销
    • 使用index作为key
      html

      <template>
        <div id="app">
          <button @click="handleClick">添加数据</button>
          <ul>
            <li v-for="(item, index) in list" :key="index">
              {{ item.id }} - {{ item.name }}
            </li>
          </ul>
        </div>
      </template>
      <script lang="ts">
      export default {
        data () {
          return {
            list: []
          }
        },
        methods: {
          handleClick () {
            const obj = { id: 'student-10000', name: 'student10000' }
            this.list.unshift(obj)
          }
        },
        created () {
          for (let i = 0; i < 10000; i++) {
            this.list.push({
              id: 'student-' + i,
              name: 'student-' + i
            })
          }
        },
        beforeUpdate () {
          console.time('for')
        },
        updated () {
          console.timeEnd('for')
        }
      }
      </script>
      

      点击新增数据按钮，看到控制台输出时间for: 44.164794921875 ms，即代表我们操作一条数据，dom渲染更新耗时。
    • 使用item.id作为key: 将前一个例子的:key="index"改成如下
      html

      <li v-for="(item, index) in list" :key="item.id">
        {{ item.id }} - {{ item.name }}
      </li>
      

      点击新增数据按钮，看到控制台输出时间for: 36.15087890625 ms，即代表我们操作一条数据，dom渲染更新耗时。从两个结果对比来看，使用index为key的情况耗时更长。
• 2、数据错位
  上面例子可能觉得用index做key只是影响页面加载的效率，认为少量的数据影响不大，那面下面这种情况，可能用index就可能出现一些意想不到的问题了，还是上面的场景，这时我先再每个文本内容后面加一个input输入框，并且手动在输入框内填写一些内容，然后通过button向前追加一位同学看看
  html

  <template>
    <div id="app">
      <button @click="handleClick">添加数据</button>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          {{ item.id }} - {{ item.name }}
          <input type="text">
        </li>
      </ul>
    </div>
  </template>
  <script lang="ts">
  export default {
    data () {
      return {
        list: [
          { id: 1, name: '张三', age: 23 },
          { id: 2, name: '李四', age: 24 }
        ]
      }
    },
    methods: {
      handleClick () {
        const obj = { id: 3, name: '王五', age: 25 }
        this.list.unshift(obj)
      }
    }
  }
  </script>
  

  手动在每一项后面input中输入对应的名称 然后点击新增数据按钮，结果如下 这时候我们就会发现，在添加之前输入的数据错位了。添加之后王五的输入框残留着张三的信息，这很显然不是我们想要的结果。diff算法更新流程图如下 从上面比对图可以看出来这时因为采用index作为key时，当在比较时，发现虽然文本值变了，但是当继续向下比较时发现DOM节点还是和原来一摸一样，就复用了，但是没想到input输入框残留输入的值，这时候就会出现输入的值出现错位的情况。
  • 将上面的:key="index"，改成:key="item.id"效果图如下: 可以看出我们的数据错位问题也就修复了，此时的diff算法更新流程图如下

解决方案

只要保证key唯一不变就行，一般在开发中用的比较多就是下面三种情况:

• 在开发中最好每条数据使用唯一标识固定的数据作为key，比如后台返回的 ID，手机号，身份证号等唯一值
• 可以采用Symbol作为key，Symbol是 ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。
  js

  let a = Symbol('测试')
  let b = Symbol('测试')
  console.log(a === b) // false
  

• 可以采用uuid作为key，uuid是 Universally Unique Identifier 的缩写，它是在一定的范围内（从特定的名字空间到全球）唯一的机器生成的标识符。

39、怎么缓存当前的组件？缓存后怎么更新？ #

开发中缓存组件使用keep-alive组件。

• keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
• keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
• keep-alive可以设置以下props属性：
  • include: 字符串或正则表达式。只有名称匹配的组件会被缓存
  • exclude: 字符串或正则表达式。任何名称匹配的组件都不会被缓存
  • max: 数字。最多可以缓存多少组件实例

<!-- 基本用法 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
<!-- 使用includes和exclude： -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

更新方式: 设置了keep-alive缓存的组件，会多出两个生命周期钩子（activated与deactivated）

• activated: 被keep-alive缓存的组件激活时调用。
• deactivated: 被keep-alive缓存的组件失活时调用。
  • 首次进入组件时：beforeRouteEnter > beforeCreate > created > mounted > activated > ... ... > beforeRouteLeave > deactivated
  • 再次进入组件时：beforeRouteEnter > activated > ... ... > beforeRouteLeave > deactivated

<!-- App.vue -->
<div id="app" class='wrapper'>
  <keep-alive>
    <!-- 需要缓存的视图组件 --> 
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <!-- 不需要缓存的视图组件 -->
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

<!-- 具体的组件 -->
<template>

</template>
<script>
export default {
  name: 'Demo',
  methods: {
    // 获取数据
    listGet ()
  },
  activated () {
    // 激活时获取数据
    this.listGet()
  }
}
</script>

40、Vue中组件和插件有什么区别？ #

Vue中组件和插件都是扩展Vue应用的方式，但它们有不同的作用和使用方式。

41、Composition API 与 Options API 有什么不同？ #

对于vue2中Options API开发的项目，普遍会存在以下问题:

• 代码的可读性随着组件变大而变差
  • 一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散
  • 项目过大后methods中可能包含几十个方法，往往分不清哪个方法对应着哪个功能
  • 耦合度相对较高
• 每一种代码复用的方式，都存在缺点，例如: data中定义的变量每个组件都需要重新定义，例如分页数据定义
  js

  // Options API：每个组件都需要定义如下结构
  export default {
    data () {
      return {
        list: {
          page: 1,
          size: 10,
          total: 0,
          data: []
        }
      }
    },
    methods: {
      getList () {
        // ...
      }
    }
  }
  
  // Composition API：则直接封装成hooks，每次直接引入调用即可
  import { reactive } from 'vue'
  function usePage () {
    const list = reactive({
      page: 1,
      size: 10,
      total: 0,
      data: []
    })
    const getList = (url, filters) => {
      axios({
        url: url,
        method: 'post',
        data: filters
      }).then(res => {
        list.data = res.data.data
        list.total = res.data.total
      })
    }
    return {
      list,
      getList
    }
  }
  // 在不同组件都调用该方法即可
  const { list, getList } = usePage()
  

• TypeScript支持有限

export default {
  data () {
    return {
      功能A,
      功能B
    }
  },
  methods: {
    功能A,
    功能B
  },
  computed: {
    功能A,
    功能B
  }
}

// 功能A
function useA () {
  const aData = reactive({
    count: 0
  })
  const aFunc = () => {

  }
  const aComputed = computed(() => {
    return aData.count * 2
  })
  return {
    aData,
    aFunc,
    aComputed
  }
}
// 功能B
function useB () {
  const bData = reactive({
    count: 0
  })
  const bFunc = () => {

  }
  const bComputed = computed(() => {
    return bData.count * 2
  })
  return {
    bData,
    bFunc,
    bComputed
  }
}
// 使用，可以在多个组件导入使用
const { aData, aFunc, aComputed } = useA()
const { bData, bFunc, bComputed } = useB()

两者区别的对比图: 每一种颜色代表某一个功能的所有API

Composition API能与Options API一起使用吗

是可以的

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="inrement">自增</button>
  </div>
</template>
<script lang="ts">
import { getCurrentInstance, onMounted } from 'vue'
export default {
  data () {
    return {
      count: 0
    }
  },
  setup(props) {
    const instance = getCurrentInstance()
    onMounted(() => {
      console.log(instance.proxy.count)
    })
  },
  methods: {
    inrement () {
      this.count++
    }
  }
}
</script>

43、子组件可以直接改变父组件的数据么，说明原因？ #

子组件不可以直接改变父组件的数据。这样做主要是为了维护父子组件的单向数据流。每次父级组件发生更新时，子组件中所有的prop都将会刷新为最新的值。如果强行这样做了，Vue会在浏览器的控制台中发出警告。

Vue提倡单向数据流，即父级props的更新会流向子组件，但是反过来则不行。这是为了防止意外的改变父组件状态，使得应用的数据流变得难以理解，导致数据流混乱。如果破坏了单向数据流，当应用复杂时，debug的成本会非常高。
只能通过$emit派发一个自定义事件，父组件接收到后，由父组件修改。

44、怎么监听vuex数据的变化？ #

// vuex
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    updateCount (state, payload) {
      state.count += 1
    }
  }
})