# vue 相关

vue相关

双向绑定原理
横向比较
选项参数和声明周期
组件通信
- 1. vue 组件的通信方式都有哪些?
- 2. 子组件可以直接改变父组件的数据么？
vue-router
vuex
- 1. vuex 的原理以及自己的理解
- 2. vuex 和 localStorage 的区别

# 双向绑定原理

# 1. vue2.x 的双向数据绑定原理是什么?

vue相关

vue.js 是采用数据劫持结合订阅发布模式的方式，通过Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到数据变化；
compile解析模版指令，将模版中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
Wathcer订阅者是Observer和Compile之间通信的桥梁，主要做的事情是：
1. 在自身实例化时往属性订阅器dep里添加自己
2. 自身必须有一个update()方法
3. 待属性变动dep.notice通知时，能调动自身的update()方法，并触发Compile中绑定的回调，则功成身退。
4. MVVM 作为数据绑定的入口，整合Observer、Compile和Wathcer三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模版指令，最终利用Wathcer搭起Observer和Compile之间的通信桥梁，达到数据变化->视图更新；视图交互变化(input)->数据 model 变更的双向绑定效果。

# 2. vue2 中对数组操作的实现

// 核心源码实现
import { ARR_METHOS } from './config'
import observeArr from './observeArr'

export const originArrMethods = Array.prototype
export const arrMethods = Object.create(originArrMethods)

ARR_METHOS.forEach(m => {
  arrMethods[m] = function() {
    const args = Array.prototype.slice.call(arguments)
    const result = originArrMethods[m].apply(this, args)
    let newArr

    switch (m) {
      case 'push':
      case 'unshift':
        newArr = args
        break
      case 'splice':
        // 获取
        newArr = args.splice(2)
      default:
        break
    }

    newArr && observeArr(newArr)
    return result
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 3. 数据发生改变后，视图会立即同步执行重新渲染吗?

# 4. 对虚拟 DOM 的理解?

# 5. `v-model` 的实现原理

# 6. vue dom diff 算法

# 7. vue 的 `$nextTick` 原理

# 8. vue 是如何收集依赖的

# 9. vue3.x响应式数据原理

# 10. `template` 到 `render` 的过程

# 11. `keep-alive` 是如何实现的，具体缓存的是什么?

# 12. new Vue() 发生了什么？

# 13. vue如何检测数组变化？

# 14. $set 方法是如何实现的？

# 15. vue中模板编译原理？

# 16. mixin的使用场景和原理？

Vue.mixin的作用就是抽离公共的业务逻辑，原理类似“对象的继承”，当组件初始化时会调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并，如果混入的数据和本身组件中的数据冲突，会采用**“就近原则”**以组件的数据为准，而mixin的数据是不会被共享的。

mixin的缺陷：

命名冲突问题
依赖问题问题
数据来源问题

# 横向比较

# 1. vue3 与 vue2 的对比

# 2. react 和 vue 的对比

# 3. vue 单页与多页的对比

# 4. redux 和 vuex 的对比

# 5. computed 和 methods 的对比

# 6. vuex 和 localStorage 的对比

# 7. Proxy 与 Object.defineProperty 优劣对比

# 选项参数和声明周期

# 1. 为什么 data 必须是函数返回?

# 2. 简述 vue 的生命周期

# 3. 简述 `mixin`、`extends` 的覆盖逻辑

# 4. 计算属性和普通属性的区别

# 5. vue 父子组件执行顺序

# 6. 自定义指令的理解和使用

# 7. vue的 hooks 有哪些

# 组件通信

# 1. vue 组件的通信方式都有哪些?

# 2. 子组件可以直接改变父组件的数据么？

# vue-router

# 1.vue-router 的原理

# 2. 怎么定义 vue-router 的动态路由?

# 3. 怎么获取传过来的动态参数?

# 3. vue-router 几种跳转方式

# 4. 路由钩子在 vue 生命周期的体现?

导航被触发；
在失活的组件里调用beforeRouteLeave守卫；
调用全局beforeEach守卫；
在复用组件里调用beforeRouteUpdate守卫；
调用路由配置里的beforeEnter守卫；
解析异步路由组件；
在被激活的组件里调用beforeRouteEnter守卫；
调用全局beforeResolve守卫；
导航被确认；
调用全局的afterEach钩子；
DOM更新；
用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。

# vuex

# 1. vuex 的原理以及自己的理解

# 2. vuex 和 localStorage 的区别