zerojs前端面试题系列--vue3篇（4）

1. Vue3中的可选链运算符（?.）和空值合并运算符（??）是什么？它们有什么作用？

可选链运算符（?.）和空值合并运算符（??）是Vue 3.x中新增的两种运算符。

可选链运算符（?.）是一种简化代码的运算符，它能够访问深层次的嵌套对象属性和方法，而不需要进行繁琐的空值判断。如果访问的属性或方法不存在，它会返回undefined而不会抛出错误。

例如，以下代码可以通过可选链运算符（?.）来避免类型错误：

const user = {
  name: 'John',
  address: {
    city: 'New York',
    street: null
  }
}

const streetName = user.address.street?.name; // undefined

空值合并运算符（??）是一种用于处理null或undefined的运算符。如果对左侧的表达式进行求值，结果为null或undefined，那么它会返回右侧的表达式。

例如，以下代码可以通过空值合并运算符（??）来设置默认值：

const name = user.name ?? 'Anonymous'; // 'John'
const street = user.address.street?.name ?? 'Main Street'; // 'Main Street'

综上所述，可选链运算符（?.）和空值合并运算符（??）可以让我们更方便地处理undefined、null和深层次嵌套的属性和方法，提高代码的可读性和可维护性。

2. Vue3中处理的组件通信方式有哪些？

在Vue3中，可以使用以下几种方式来处理组件传值：

1. Props：通过在父组件中使用props属性来向子组件传递数据。子组件接收props时，需要在setup()方法中使用props参数来获取。

2. Emit：子组件可以通过$emit方法向父组件发送事件。父组件可以使用v-on指令监听子组件发出的事件，并在事件处理函数中获取子组件传递的数据。

3. v-model：使用v-model指令可以让父组件通过双向绑定来修改子组件中的数据，同时也可以监听子组件发出的事件。

4. Refs：可以使用ref属性来获取子组件的引用，从而直接访问子组件中的数据和方法。

5. Provide/Inject：可以使用provide和inject来在父组件和其所有子孙组件之间共享数据和方法。

6. EventBus：可以使用Vue实例作为事件总线，在不同的组件中分发和监听事件。

7. Vuex/Pinia：状态管理工具可以让应用程序中的所有组件共享和管理一个全局状态，从而实现组件间的数据共享和通信。其中Vuex是Vue官方提供的状态管理库，而Pinia是一个轻量级的状态管理库。

3. 在vue3的setup方法中，返回一个对象时，需要注意哪些问题？返回一个渲染函数时，又有哪些注意事项？

在 Vue3 的 setup 方法中，如果返回一个对象，则需要注意以下几点：

1. 返回的对象中的属性会变成组件实例的响应式数据，因此需要确保返回的对象属性和值都是响应式数据。

2. 如果需要在 setup 方法中使用组件实例的 this，可以通过 getCurrentInstance() 方法获取当前组件实例。

3. 返回的对象中也可以包含一些函数或计算属性，它们也可以访问到响应式数据。

举个例子：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });
    const firstName = ref('Tom');
    const lastName = ref('Smith');
    return {
      count,
      increment,
      fullName,
      firstName,
      lastName
    };
  }
};

在上面的例子中，返回的对象包含了一个响应式数据 count 和一个修改它的方法 increment，还有一个计算属性 fullName 和两个其它的响应式数据 firstName 和 lastName。

如果返回一个渲染函数，则需要注意以下几点：

1. 渲染函数中需要返回一个 VNode 对象，可以使用 h 函数创建。

2. 可以访问到响应式数据和方法。

3. 不能访问到组件实例的 this。

举个例子：

import { ref, h } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return () => {
      return h('div', {}, [
        h('p', `Count: ${count.value}`),
        h('button', { onClick: increment }, 'Increment')
      ]);
    };
  }
};

在上面的例子中，返回一个渲染函数，根据 count 的值渲染一个包含它和一个按钮的 div 元素。其中，increment 方法可以在按钮的 onClick 事件中使用。

4. 在Vue3中如何实现递归组件？

在Vue 3.0中实现递归组件有两种方法：

1. 使用template模板定义递归组件

可以在组件中使用template模板以递归的方式引用组件自身。例如：

<template>
  <div>
    <div>{{name}}</div>
    <div v-if="children">
      <my-component v-for="(child, index) in children" :key="index" :name="child.name" :children="child.children" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    name: String,
    children: Array
  },
}
</script>

2. 使用render函数定义递归组件

可以使用render函数递归渲染组件并引用组件自身。例如：

<script>
export default {
  name: 'MyComponent',
  props: {
    name: String,
    children: Array
  },
  render() {
    return h(
      'div',
      [
        h('div', this.name),
        this.children && h(
          'div',
          this.children.map(child => {
            return h(MyComponent, { props: child })
          })
        )
      ]
    )
  }
}
</script>

5. Vue3中的虚拟DOM是如何工作的？它和Vue2相比有哪些不同？

Vue3的虚拟DOM和Vue2的虚拟DOM实现的基本原理是相同的，都是通过将DOM树映射到JavaScript对象上，然后比较新旧虚拟DOM来确定需要更新的元素。不同的是，Vue3的虚拟DOM引入了一些优化措施，使其更加高效。下面是Vue3中虚拟DOM的一些特点：

1. Fragment

Vue3中的虚拟DOM支持Fragment，即可以同时渲染多个根节点。这样可以避免在渲染列表等场景下产生多余的包裹节点，提升了性能和渲染效率。

2. 静态提升

Vue3中的虚拟DOM引入了静态提升的概念，即对于静态节点，在编译时会将其提升为全局变量，这样可以避免每次渲染时重复创建相同的静态节点，提升渲染效率。

3. 动态Props缓存

在Vue3中，动态Props的值会在首次渲染时缓存，避免不必要的重新计算和渲染，提升渲染效率。

4. Teleport

Vue3中新增了Teleport组件，可以在组件外部渲染内容，这个内容会被挂在到body下，可以用于实现弹出框和对话框等场景，避免嵌套多余DOM节点，提升渲染效率。

总的来说，Vue3的虚拟DOM改进了一些性能瓶颈，提升了渲染效率，使得Vue应用性能更加出色。

6. Vue3的静态提升是什么？

Vue3的静态提升是基于编译器优化的一种技术，其主要原理是将模板中的静态节点在编译期间进行标记，并将其生成为一段静态渲染函数，这段渲染函数的执行效率更高，因为它不需要重复生成和更新静态节点。

具体来说，静态节点指的是在组件的渲染过程中不需要进行变化的节点，比如纯文本节点、静态属性节点等。在编译期间，编译器会根据模板对静态节点进行标记，并将其转换为渲染函数中的静态节点。这些静态节点会在组件初始化时就已经生成并保存在缓存中，在渲染过程中直接从缓存中获取，避免了重复生成和更新的过程。

此外，Vue3的编译器还对动态节点进行了优化，将其转换为更高效的渲染函数，在渲染过程中只需要针对动态节点进行更新，大大提高了组件的渲染效率和性能。

总的来说，Vue3的静态提升机制是基于编译期间对模板进行优化的一种技术，其主要目的是提高组件的渲染效率，从而提升整个应用程序的性能。

举个例子，假设有如下模板：

<div>
  <p class="title">Static Title</p>
  <p>{{ dynamicText }}</p>
</div>

在编译时，Vue3会发现<p class="title">Static Title</p>是一个静态节点，它的 class 和文本内容不会被改变，因此这个节点可以被提前创建，并存储在一个常量中。而另一个<p>{{ dynamicText }}</p>是一个动态节点，每次渲染时内容都会被改变，因此它不能被提前创建。

通过静态提升，Vue3可以显著提高渲染性能，特别是当页面中存在大量静态节点或属性时。

小程序刷题

搜索: zerojs零技术

© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦！！！