Vue3的笔记(1)

84 阅读2分钟

Vue 3.0 的性能提升

  1. 响应式系统升级

    vue2中使用Object.defineProperty来做数据拦截,在初始化时会遍历对象所以属性,如果属性是对象就递归遍历,是一个相对比较昂贵的操作

    vue3中用es6的Proxy来做数据拦截,会在目标对象之上架了一层拦截,代理的是对象而不是对象的属性,如果属性是对象也只是在访问到时才会进行Proxy操作,不需要对原始对象做太多操作


  2. 编译优化

    vue2中将模板编译成render函数,编译静态节点和静态根节点,发生变化通知watcher,触发update,更新虚拟DOM,执行diff算法;会标记静态根节点,diff时跳过,但仍然会对比静态节点

    vue3中会对静态节点进行标记和提示,会将静态节点提升缓存起来,下一次diff时用到就直接使用创建好的静态节点;对于动态节点会进行标记,标记出动态节点动态的内容,方便diff时找到需要对比的内容;会缓存事件处理函数,将处理函数的绑定缓存起来,节省事件重复绑定,变化处理函数时,只需要修改绑定函数里面的调用就可以了


  3. 优化打包体积

    vue3移除了一些不常用的API,并且会按需引用,减少打包没有用的的内容

Composition API

Composition API是vue3新增的API,基于函数的API,可以将一个功能的代码写在一个函数中,在setup函数中调用这个函数,返回这个函数的返回值,就可以在页面中使用;Composition API可以很方便的将每一个功能的函数放在一起,很容易地看出一个功能的实现,更容易地将功能代码抽取共用

Composition API是新增的API,Vue3中还是可以使用Options API

const getProductList = async () => {
  const res = await this.$axios.post('http://test-api-url')
  const productList = ref(res.object.list || [])
  return productList
}
const getShopCart = () => {
  const shopCartList = ref(storage.getItem('SHOP_CART') || [])
  watchEffect(() => {
    storage.setItem(KEY, shopCartList.value)
  })
  return shopCartList
}
const productAddToShopCart = shopCartList => {
  const addProduct = (product) => {
    shopCartList.value.push(product)
  }
  return addProduct
}
const shopCartDeleteproduct = shopCartList => {
  const deleteProduct = (product) => {
    const index = shopCartList.value.indexOf(product)
    shopCartList.value.splice(index, 1)
  }
  return deleteProduct
}
export default {
  name: 'App',
  setup () {
    const productList = getProductList()
    const shopCartList = getShopCart()

    return {
      productList,
      shopCartList,
      ...productAddToShopCart(shopCartList),
      ...shopCartDeleteproduct(shopCartList)
    }
  }
}