vue3比vue2做了哪些优化

落叶时光
1,008 阅读1分钟

vue2如何监测数组的变化

使用了函数劫持的方式，重写了数组的方法，Vue 将 data 中的数组进行了原型链重写，指向了自定义的数组原型方法。这样当调用数组 api 时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。

对于数组而言，Vue 内部重写了以下函数实现派发更新

// 获得数组原型        
const arrayProto = Array.prototype        
export const arrayMethods = Object.create(arrayProto)
// 重写以下函数        
const methodsToPatch = [  'push',  'pop',  'shift',  'unshift',  'splice',  'sort',  'reverse']        
methodsToPatch.forEach(function (method) {              
// 缓存原生函数              
const original = arrayProto[method]              
// 重写函数              
def(arrayMethods, method, function mutator (...args) {                  
    // 先调用原生函数获得结果               
    const result = original.apply(this, args)                 
    const ob = this.__ob__            
    let inserted                    
    // 调用以下几个函数时，监听新数据                    
    switch (method) {                          
        case 'push':                          
        case 'unshift':                            
        inserted = args                            
        break                          
        case 'splice':                            
        inserted = args.slice(2)                            
        break                    
    }                    
    if (inserted) ob.observeArray(inserted)    
    // 手动派发更新    
        ob.dep.notify()                    
        return result              
    })        
})
function observeArray(items) {
    for (let i = 0; i < items.length; i++) {
      observe(items[i]);
    }
  }
  
 function observe(value) {
  // 只劫持数组或者对象
  if (
    Object.prototype.toString.call(value) === "[object Object]" ||
    Array.isArray(value)
  ) {
    return new Observer(value);
  }
}

vue2 怎么解决给对象新增属性不会触发组件重新渲染的问题

受现代 JavaScript 的限制 ( Object.observe 已被废弃)，Vue 无法检测到对象属性的添加或删除。

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

vm.$set()实现原理

export function set(target: Array<any> | Object, key: any, val: any): any {  // target 为数组  if (Array.isArray(target) && isValidArrayIndex(key)) {    // 修改数组的长度, 避免索引>数组长度导致 splice() 执行有误    target.length = Math.max(target.length, key);    // 利用数组的 splice 方法触发响应式    target.splice(key, 1, val);    return val;  }  // target 为对象, key 在 target 或者 target.prototype 上 且必须不能在 Object.prototype 上,直接赋值  if (key in target && !(key in Object.prototype)) {    target[key] = val;    return val;  }  // 以上都不成立, 即开始给 target 创建一个全新的属性  // 获取 Observer 实例  const ob = (target: any).__ob__;  // target 本身就不是响应式数据, 直接赋值  if (!ob) {    target[key] = val;    return val;  }  // 进行响应式处理  defineReactive(ob.value, key, val);  ob.dep.notify();  return val;}

  • 如果目标是数组,使用 vue 实现的变异方法 splice 实现响应式

  • 如果目标是对象,判断属性存在,即为响应式,直接赋值

  • 如果 target 本身就不是响应式,直接赋值

  • 如果属性不是响应式,则调用 defineReactive 方法进行响应式处理

ES6 Proxy

众所周知，尤大大的 vue3.0 版本用 Proxy 代替了defineProperty 来实现数据绑定，因为 Proxy 可以直接监听对象和数组的变化，并且有多达 13 种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）

const p = new Proxy(target, handler)

其中：

  • target ：要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）

  • handler ：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为

    var handler = {
    get: function(target, name){
    return name in target ? target[name] : 'no prop!'
    },
    set: function(target, prop, value, receiver) {
    target[prop] = value;
    console.log('property set: ' + prop + ' = ' + value);
    return true;
    } }; var user = new Proxy({}, handler) user.name = 'an' // property set: name = an console.log(user.name) // an console.log(user.age) // no prop!

上面提到过 Proxy 总共提供了 13 种拦截行为，分别是：

  • getPrototypeOf / setPrototypeOf

  • isExtensible / preventExtensions

  • ownKeys / getOwnPropertyDescriptor

  • defineProperty / deleteProperty

  • get / set / has

  • apply / construct

感兴趣的可以查看 MDN ，一一尝试一下，这里不再赘述

另外考虑两个问题：

  • Proxy只会代理对象的第一层，那么又是怎样处理这个问题的呢？

  • 监测数组的时候可能触发多次get/set，那么如何防止触发多次呢（因为获取push和修改length的时候也会触发）

Vue3 Proxy

对于第一个问题，我们可以判断当前 Reflect.get 的返回值是否为 Object ，如果是则再通过 reactive 方法做代理， 这样就实现了深度观测。

对于第二个问题，我们可以判断是否是 hasOwProperty

下面我们自己写个案例，通过proxy 自定义获取、增加、删除等行为

const toProxy = new WeakMap(); // 存放被代理过的对象
const toRaw = new WeakMap(); // 存放已经代理过的对象
function reactive(target) {
  // 创建响应式对象
  return createReactiveObject(target);
}
function isObject(target) {
  return typeof target === "object" && target !== null;
}
function hasOwn(target,key){
  return target.hasOwnProperty(key);
}
function createReactiveObject(target) {
  if (!isObject(target)) {
    return target;
  }
  let observed = toProxy.get(target);
  if(observed){ // 判断是否被代理过
    return observed;
  }
  if(toRaw.has(target)){ // 判断是否要重复代理
    return target;
  }
  const handlers = {
    get(target, key, receiver) {
        let res = Reflect.get(target, key, receiver);
        track(target,'get',key); // 依赖收集==
        return isObject(res) 
        ?reactive(res):res;
    },
    set(target, key, value, receiver) {
        let oldValue = target[key];
        let hadKey = hasOwn(target,key);
        let result = Reflect.set(target, key, value, receiver);
        if(!hadKey){
          trigger(target,'add',key); // 触发添加
        }else if(oldValue !== value){
          trigger(target,'set',key); // 触发修改
        }
        return result;
    },
    deleteProperty(target, key) {
      console.log("删除");
      const result = Reflect.deleteProperty(target, key);
      return result;
    }
  };
  
  // 开始代理
  observed = new Proxy(target, handlers);
  toProxy.set(target,observed);
  toRaw.set(observed,target); // 做映射表
  return observed;
}

Proxy 相比于 defineProperty 的优势：

  • 基于 Proxy 和 Reflect ，可以原生监听数组，可以监听对象属性的添加和删除

  • 不需要深度遍历监听：判断当前 Reflect.get 的返回值是否为 Object ，如果是则再通过 reactive 方法做代理， 这样就实现了深度监测

  • 只在 getter 时才对对象的下一层进行劫持(优化了性能)

所以，建议使用 Proxy 监测变量变化

生命周期

vue3中用setup代替了之前的beforeCreate、created

beforeDistroy->onBeforeUnmount

distoryed->onUnmounted

其他的生命周期在原来的基础上加上 on前缀，如mounted->onMounted

Compostion API: 组合API/注入API

vue3中通过结构赋值拿到createdApp、reactive、ref等，函数式编程的思想，这种设计方式可以按需引入资源，更好的里使用tree-shaking来减小打包体积；setup合并了一些生命周期，同一个功能不用再分布在多处；并且打破了this的限制，真正做到了高内聚，低耦合，更利于代码的扩展性和维护性。

Diff算法的优化

vue2中不管是静态数据还是动态数据，都会去逐层比较；

vue3新增了静态标记patchflag

a.在创建虚拟DOM的时候会根据DOM中的内容会不会发生变化添加静态标记 

b.数据更新后，只对比带有patch flag的节点，大大优化了性能

使用hoistStatic静态提升

vue2中无论状态是否更新，每次都会重新创建和渲染，vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可。

网站Vue 3 Template Explorer可以看到vue代码的具体内部原理

vue-next-template-explorer.netlify.app/

cacheHandlers 对绑定事件做缓存

vue2.x中，绑定事件每次触发都要重新生成全新的function去更新，cacheHandlers 是Vue3中提供的事件缓存对象，当 cacheHandlers 开启，会自动生成一个内联函数，同时生成一个静态节点。当事件再次触发时，只需从缓存中调用即可，无需再次更新。

SSR渲染的优化

Vue2 中也是有 SSR 渲染的，但是 Vue3 中的 SSR 渲染相对于 Vue2 来说，性能方面也有对应的提升。 当存在大量静态内容时，这些内容会被当作纯字符串推进一个 buffer 里面，即使存在动态的绑定，会通过模版插值潜入进去。这样会比通过虚拟 dmo 来渲染的快上很多。 当静态内容大到一个量级的时候，会用_createStaticVNode 方法在客户端去生成一个 static node，这些静态 node，会被直接 innerHtml，就不需要再创建对象，然后根据对象渲染。

更好的Ts支持

vue2不适合使用ts，原因在于vue2的Option API风格。options是个简单对象，而ts是一种类型系统、面向对象的语法。两者有点不匹配。

在vue2结合ts的具体实践中，要用 vue-class-component 强化 vue 组件，让 Script 支持 TypeScript 装饰器，用 vue-property-decorator 来增加更多结合 Vue 特性的装饰器，最终搞的ts的组件写法和js的组件写法差别挺大。

在vue3中，量身打造了defineComponent函数，使组件在ts下，更好的利用参数类型推断 。Composition API 代码风格中，比较有代表性的api就是 ref 和 reactive，也很好的支持了类型声明。

import { defineComponent, ref } from 'vue'
const Component = defineComponent({
    props: {
        success: { type: String },
        student: {
          type: Object as PropType<Student>,
          required: true
       }
    },
    setup() {
      const year = ref(2020)
      const month = ref<string | number>('9')
      month.value = 9 // OK
     const result = year.value.split('') 
 }

支持多个根节点组件

但是，这确实要求开发者明确定义属性应该分布在哪里

<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

自定义渲染API

使用自定义渲染API，如weex和myvue这类方案的问题就得到了完美解决。只需重写createApp即可。

avatar
文章
阅读
粉丝