Skip to main content

vue

基础

  1. v-show和v-if有什么区别？
  2. 动态给vue的data添加一个新的属性时会发生什么？怎样解决？
  3. 为什么data属性是一个函数而不是一个对象？
  4. Vue中组件和插件有什么区别？
  5. 双向数据绑定是什么
  6. Vue中的$nextTick有什么作用？
  7. 自定义指令吗？自定义指令的应用场景有哪些？
  8. 过滤器了解吗？过滤器的应用场景有哪些？
  9. 什么是虚拟DOM？如何实现一个虚拟DOM？
  10. keep-alive的理解是什么？
  11. vue中key的原理吗？说说你对它的理解?(设置key值一定能提高diff效率吗)

vue3.0

  1. 了解哪些优化
  2. 性能提升在哪里 1.编译阶段: diff算法优化 静态提升 事件监听缓存 SSR优化 2.体积(Tree shanking) 3.响应式系统 vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式 vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历
  3. Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？
  4. 如何实现一个modal组件 (Teleport:允许我们将组件模板的一部分“传送”到存在于该组件的 DOM 层次结构之外的 DOM 节点中。)

父子渲染过程

  1. 父子组件加载渲染过程：

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 A-beforeCreate -> 子 A-created -> 子 A-beforeMount ->子 B-beforeCreate -> 子 B-created -> 子 B-beforeMount -> 子 A-mounted -> 子 B-mounted -> 父 mounted

1.当父组件执行完 beforeMount 挂载开始后，会依次执行子组件中的钩子，直到全部子组件 mounted 挂载到实例上，父组件才会进入 mounted 钩子

2.子级触发事件，会先触发父级 beforeUpdate 钩子，再去触发子级 beforeUpdate 钩子，下面又是先执行子级 updated 钩子，后执行父级 updated 钩子 2. 子组件更新：父 beforeUpdate->子 beforeUpdate->子 updated->父 updated

编程题

输出顺序,原因 obj.b

  data() {
    return {
      a: 1,
      b: 1,
      obj:{}
    };
  },
  watch: {
    a() {
      console.log('a is changed');
    },
    b() {
      console.log('b is changed');
    },
  },
  methods: {
    changeData() {
      this.b = Date.now();
      this.a = Date.now();
    },
  },