前端开发面试题总结-vue3框架篇（二）

七、说一说vue3中的生命周期函数?

vue3中的生命周期函数来自vue,所以需要通过vue按需引入,生命周期函数可以多次调用

// 1. 创建阶段
● vue2: beforeCreate/created
● vue3: setup// 2. 挂载阶段
● vue2: beforeMount/mounted
● vue3: onBeforeMount/onMounted// 3. 更新阶段
● vue2: beforeUpdate/updated
● vue3: onBeforeUpdate/onUpdated// 4. 销毁阶段
● vue2: beforeDestory/destoryde
● vue3:  onBeforeUnMounte/onUnMounted

八、说一说Vue3中父子组件通信?

父传子
● 父组件通过属性绑定传递

父组件

<script setup lang='ts'>   
import { ref } from 'vue'   
import Child from './components/Child.vue' const money = ref(10000000) </script> <template>   <h1>     这是App组件: {{ money }}   </h1>   <div>------------------------</div>   <!-- 1. 父组件通过属性绑定去传 -->   <Child :money="money" /> </template> <style></style>

子组件通过defineProps接收, 子组件接收的数据在模板中可以直接使用在js中, 通过defineProps的返回值使用

子组件

<script setup lang='ts'> const props = defineProps({    money: {      type: Number,       required: true     }   }) </script> <template>  <h2>这是子组件: {{ money }}</h2> </template> <style></style>

子传父
●子组件获取emit对象

子组件

const emit = defineEmits(['buy-car'])

通过emit触发自定义事件,并传递数据

const buyCar = () => {   
// console.log('买车', 1000000)   
// 2. 通过emit对象触发一个自定义事件, 并且   
emit('buy-car', 1000000) 
}

父组件定义自定义事件和事件函数

<script setup lang='ts'>   import { ref } from 'vue'   
import Child from './components/Child.vue'   const money = ref(10000000) // 4. 定义事件函数,内部修改money数据   const setMoney = (val) => {     money.value = money.value - val  } </script> <template>   <!-- 3. 定义自定义事件 -->   <Child @buy-car="setMoney" /> </template> <style></style>

九、说一说Vue3中跨组件通信?

●父组件通过provide传递函数

const completeEva = (score: number) => {   // 函数的功能 } provide('completeEva', completeEva)

●后代组件通过inject注入函数

const completeEva = inject<(score: number) => void>('completeEva')

●调用函数将数据通过参数的方式传给父级组件

 completeEva && completeEva(score.value)

十、说一说Vue3中如何通过ref获取组件?

● 创建空的ref
● 给组件绑定ref属性值是空的ref的名字
● 组件和空ref的value绑定在一起
●利用ref.value获取子组件

<script setup lang='ts'>  import { ref } from 'vue'   import ComA from './components/ComA.vue'  // 1. 定义空ref   const comARef = ref(null) const getComA = () => {    // 3. 利用ref的value获取组件     console.log(comARef.value?.updateAge)  } </script> <template>   <!--   空的ref的value绑定为组件 -->   <ComA ref="comARef" />   <button @click="getComA">获取coma组件</button> </template> <style></style>

十一、Vue3中wacth和watchEffect的区别

Vue3 中 watch 与 watchEffect 的核心区别：

选择建议：
● 需要旧值 → watch；
● 依赖复杂且无需旧值 → watchEffect；
● 需延迟执行或条件监听 → watch。

十二、Vuex和Pinia的区别

Vuex 与 Pinia 的核心区别：

关键差异点：

1. 开发体验：
   ● Pinia 省去 mutations，简化同步操作，减少模板代码。
   ● Pinia 支持直接通过 this 访问整个 store 的 state 和方法。
2. 模块管理：
   ● Vuex 的模块依赖全局命名空间，易命名冲突。
   ● Pinia 的每个 store 独立，通过文件组织，天然支持代码分割。
3. TypeScript：
   ● Pinia 自动推断 state/actions 类型，无需手动声明接口。
4. 兼容性：
   ● Vuex 兼容 Vue2 和 Vue3（需 Vuex 4）。
   ● Pinia 支持 Vue3, 也支持vue2，但是组合式 API 只能在vue3中使用。
   选择建议：
   ● 新项目：优先 Pinia（官方推荐，更现代、轻量、易维护）。
   ● 老项目：继续使用 Vuex，逐步迁移至 Pinia。
   ● 复杂场景：Pinia 的插件系统（如持久化缓存）更灵活。

十三、Vue3中基本都是结合TS开发，说一说TS和JS的区别？

TS = JS + 类型系统 + 高级工具链
核心区别：

如何选择：