Vue3 带来的变化（性能）

  1. 使用proxy进行数据劫持
  • 在vue2.x的时候，vue2是使用Object.defineProperty来劫持数据的getter和setter方法的
  • 这种方式一致存在一个缺陷就是当给对象添加或者删除属性时，是无法劫持和监听的
  • 所以在vue2.x的时候，不得不提供一些特殊的API,比如$set或$delete,事实上都是一些hack方法，也增加开发者学习新的API的成本；
  • 而在vue3.x开始，Vue使用proxy来实现数据劫持。
  1. 由Options API 到 Composition API
  • 在vue2.x的时候，我们会通过Options API 来描述组件对象
  • Options API包括data、props、methods、computed、生命周期等等这些选项
  • 存在比较大的问题是多个逻辑可能是在不同的地方
    • 比如create中会使用某个method来修改data的数据，代码的内聚性非常差
  • Composition API 可以将相关联的代码 放在同一处 进行处理，而不需要在多个options之间寻找
  1. Hooks函数增加代码的复用性
  • 在vue2.x的时候，我们通常通过mixins在多个组件之间共享逻辑
  • 但是有一个很大的缺陷就是mixins也是由一大堆的Options组成的，并且多个mixins会存在命名冲突的问题

  • 在vue3.x中，我们可以通过Hook 函数，来将一部分独立的逻辑抽取出去，并且它们还可以做到是响应的

    data属性

    data属性是传入一个函数，并且该函数需要返回一个对象：

  • 在Vue2.x的时候，也可以传入一个对象（虽然官方推荐是一个函数）；

  • 在Vue3.x的时候，必须传入一个函数，否则就会直接在浏览器中报错；

data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理：

  • 所以我们在template中通过 {{counter}} 访问counter，可以从对象中获取到数据；

  • 所以我们修改counter的值时，template中的 {{counter}}也会发生改变；

    methods属性

    methods属性是一个对象，通常我们会在这个对象中定义很多的方法：

  • 这些方法可以被绑定到 template 模板中；

  • 在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性；

对于有经验的同学，在这里我提一个问题，官方文档有这么一段描述：

  • 问题一：为什么不能使用箭头函数（官方文档有给出解释）？
  • 问题二：不使用箭头函数的情况下，this到底指向的是什么？（可以作为一道面试题）

image.png

v-for中的key是什么作用？

在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。
这个key属性有什么作用呢？我们先来看一下官方的解释：

  • key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；
  • 如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；
  • 而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；