vue3数据响应式的理解

  • Vue2使用defineProperty
  • Vue3使用Proxy

Vue2中的响应式

Vue2中，对一个数据进行响应式处理是通过Object.defineProperty()进行递归处理，在效率上是比较慢的。而且，在Vue生命周期中，响应式处理是在beforeCreated和created函数之间，这也造成了后续想要新增/删除某个对象的响应式属性时，就必须调用Vue.$set方法手动触发响应式处理。

Vue3中的响应式

Vue3中，由于使用了ES6中的Proxy，也就不需要对数据进行递归处理。

  1. let proxy = new Proxy(data, {
  2.   get: function() {},
  3.     set: function() {},
  4. })
  5. proxy.something

当使用proxy中的某个值时，才会调用Proxy中的set/get方法，避免了无意义的处理，也不用Vue.$set方法（在Vue3中也删除了$set方法）。
Proxy本身的效率就比defineProperty高。

Vue3中为什么不用构造函数

  1. new Vue({}).$mount('#app1')
  2. new Vue({}).$mount('#app2')

在上述代码中，在同一个页面中具有两个Vue应用，看似是没有任何问题。但是如果我们想要全局注入mixins、注册components时

  1. Vue.component(SomeThing)
  2. Vue.mixins()

则会把多个Vue应用都会应用到。
但是在Vue3中，用createApp来创建Vue应用，则不会出现这种情况。

  1. createApp(root).use().mount('#app1')
  2. createApp(root).use().mount('#app2')

不过一般情况也不会出现一个页面多个Vue应用的情况。