【Vue】-- ♡关于vue的那些面试题♡

💭

组件的data为什么是一个函数不是一个对象?

根组件的data可以是一个对象 普通组件必须是一个函数

因为组件是一个可复用得实例 如果是一个对象组件全部指向同一个引用地址

其中一个发生改变 其他组件也会受到影响

所以说组件得data是一个函数 每次返回一个新对象

💭

对MVVM开发模式的理解：

Model 代表数据模型，数据和业务逻辑都在Model层中定义；

View 代表UI视图，负责数据的展示；

ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作

Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步

💭

条件渲染 v-if 与 v-show 的区别;

v-if 是惰性的 如果一开始不满足条件 就不会渲染dom元素

只有满足条件时才会给页面添加dom元素

dom开销较少

应用场景 : 数据加载数据div 加载暂无数据div

v-show: 即使不满足条件也会加载dom元素 本质是操作css属性的display为none

当满足条件时就会 显示dom元素

应用场景:频繁切换css样式

💭

v-if和v-for为什么不能同时使用？

因为在vue2中v-for 优先级 高于 v-if

而在vue3中v-for 优先级低于 v-if

💭

key的作用：

因为vue框架会高效复用组件 如果我们不希望当前组件被复用的话

可以加一个唯一值 key去标识当前组件不被复用

💭

watch与computed的区别

1. watch无缓存，只有发生变化时watch才会执行，一般用来执行开销较大的异步请求
2. computed有缓存性,值不变化时会在第一次调用时缓存起来，计算的值其中一个发生变化就会调用方法最新执行，不支持异步

💭

methods与computed的区别

1. methods无缓存，调用一次执行一次
2. 封装异步请求，返回函数，调用方法一定要有（）

💭

组件通信/传值

• 父传子

  1. 使用子组件时在子组件标签中写入需要传递的值
  2. 在子组件内部定义props接收

• 子传父

  1. 子组件使用$emit(自定义事件名称，传递的参数)发射自定义事件
  2. 在父组件中声明自定义事件

@my-event='handler'

      // 写在methods中
      handler(a){

      }

• 兄弟传值

  1. 利用事件总线 ==> eventbus.js
  2. 在兄弟组件分别导入事件总线
  3. 利用$emit('toBro', this.msg）发射数据
  4. 利用$on('toBro',a)接收数据

• Vuex进行兄弟传值

  1. 定义一个vuex状态机/仓库

  2. 在兄弟组件分发动作/提交突变(此时state被修改掉了)

     this.$store.dispatch('login','admin1')

  3. 在另一个兄弟组件使用辅助函数引入state

     ...mapState('',['user']);

• 嵌套很深的组件（不限于父子组件）

  1. 在祖先组件所以provide函数返回一个对象 传递值
  2. 在子组件/孙组件使用inject注入数据