Vue面试解析

这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战

双向绑定和单项数据绑定的优缺点

• 单向绑定的优点：
  • 带来单向数据流，这样的好处是流动方向可以跟踪、流动单一、没有状态。
  • 单向数据流更利于状态的维护与优化，更利于组件之间的通信，更利于组件的复用
• 双向数据流的优点：
  • 在一些需要实时反应用户输入的场合会非常方便，用户在视图上的修改会自动同步到数据模型中去，数据模型中值的变化也会立刻同步到视图中去
• 双向数据绑定的缺点
  • 双向数据流是自动管理状态的，但是在实际应用中有很多需要手动处理状态变化的逻辑，使得程序复杂度上升，无法追踪局部状态的变化。
• 双绑跟单绑之间的差异只在于，双向绑定把数据变更的操作隐藏在框架内部，调用者并不会直接感知

谈谈你对组件的理解

• 可组合
• 可重用：每个组件都是具有独立功能的，它可以被使用多个场景（例如：添加和编辑）data数据
• 可维护：每个组件仅仅包含自身的逻辑，更容易被理解和维护
• 可测试：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对整个页面进行测试容易的多

在vue中，子组件为何不可以修改父组件传递的prop

• 为了保证数据的单向流动，便于对数据进行追踪，避免数据混乱。
• 官网解析

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解

vue的响应式原理中的Object.defineProperty有什么缺陷？

• 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应

Vue父组件和子组件生命周期钩子执行顺序？

• 加载渲染过程
  • 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
• 子组件更新过程
  • 父beforeUpdate->子beforeUpdate->子updated->父updated
• 父组件更新过程
  • 父beforeUpdate->父updated
• 销毁过程
  • 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

vue在create和mounted这两个生命周期中请求数据有什么区别？

• 在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html中的dom节点，一定找不到相关的元素
• 而在mounted中，由于此时html已经渲染出来了，所以可以操作dom节点。

Route和Router区别

• router是VueRouter的一个对象
  • 通过Vue.use(VueRouter)和VueRouter构造函数得到的一个router的实例对象
  • 这个对象是：全局对象，包含了所有的路由
• route是：跳转的路由对象
  • 每一个路由都会有一个route对象，是局部对象
  • 可以获取对应的name\path\params\query等

Vuex

• Vuex是专为Vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态。
• 优点：解决了非父子组件之间的通信，减少了ajax请求次数，有些可以直接从state中获取
• 缺点：刷新浏览器，vuex中的state会变为初始状态。
  • 解决办法：vuex-along，配合计算属性和sessionStorage来实现

state

• state是存储数据的
• 里面的数据是响应式的，state中的数据改变，对应这个数据的组件也会发生改变

Mutation

• vuex store中修改状态的唯一办法就是提交mutation,可以在回调函数中修改store中的状态

this.$store.commit('jia',5)
// vuex中
const store = new Vuex.store({
  state: {
    count: 0
  },
  mutations: {
    jia (state,payload) {
      state.count += payload
    }
  }
})

Action

• 类似于mutation，不同在于
  • Action提交的是mutation，而不是直接变更状态
  • Action可以包含任意异步操作
• 注：context 与 store功能相同

this.$store.dispatch('jiaHandle',{ count: 5,delay: 200})
// vuex中
const store = new Vuex.store({
  state: {
    count: 0
  },
  mutations: {
    jia (state,payload) {
      state.count = payload
    }
  },
  actions: {
    jiaHandle (context,payload) {
      setTimeOut((context,payload) => {
        // context 与 store功能相同
        context.commit('jia',payload.count)
      },payload.delay)
    }
  }
})

getter

• 可以对state进行计算操作，就是store的计算属性
• getter可以在多组件之间复用

计算属性和watch区别

• 计算属性computed的缓存功能，描述一个值依赖了其他的值，当所依赖的值发生变化时，计算属性也跟着改变
• watch监听的是：在data中定义的变量，当该变量变化时，会触发watch中的方法

vue中组件如何传值？

• 父传子：父组件把要从传递的数据绑定在属性上发送，子组件通过props接收
• 子传父：子组件通过this.$emit(自定义事件名，要发送的数据)，父组件设置一个监听事件来接收，然后拿到数据。

Vue组件传值的三种方式

vue组件中data为什么是函数？

• data是一个函数，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响
• 如果是引用类型（对象），当多个组件共用一个数据源时，一处数据改变，所有组件数据都会改变，所以要利用函数通过return 返回对象的拷贝（返回一个新的数据），让每个实例都有自己的作用域，相互不影响

如何让组件中的css在当前组件生效

• 在style中添加scoped