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

文章目录

• 七、说一说vue3中的生命周期函数?
• 八、说一说Vue3中父子组件通信?
• 九、说一说Vue3中跨组件通信?
• 十、说一说Vue3中如何通过ref获取组件?
• 十一、Vue3中wacth和watchEffect的区别
• 十二、Vuex和Pinia的区别
• 十三、Vue3中基本都是结合TS开发，说一说TS和JS的区别？

七、说一说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 + 类型系统 + 高级工具链

核心区别：

如何选择：