文章目录

• 一、vue3有了解过吗？能说说跟vue2的区别吗？
• • 1.vue3介绍
  • 2.vue3的新特性：
  • • 2.1速度更快
    • 2.2体积更小
    • 2.3更易维护
    • 2.4更好的Typescript支持
    • 2.5编译器重写
    • 2.6更接近原生
    • 2.7更易使用
  • 3.vue3新增特性
  • • framents
    • Teleport
    • createRenderer
    • composition Api
  • 4.非兼容变更
  • • Global API
    • 模板指令
    • 组件
    • 渲染函数
    • 其他改变
    • 移除API
• 二、vue3.0所采用的Composition Api与Vue2.x使用的Options Api有什么不同？
• • 1.Options Api
  • 2.Composition Api
  • 3.对比
  • • 3.1逻辑组织
    • 3.2逻辑复用

一、vue3有了解过吗？能说说跟vue2的区别吗？

1.vue3介绍

关于vue3的重构背景，尤大是这样说的：
vue新版本的理念成型于2018年末，当时vue2的代码库已经两岁半了，比起通用软件的生命周期来这好像也没那麽久，但在这段时期，前端世界已经今昔非比了。
在我们更新（和重写）vue的主要版本时，主要考虑两点因素：首先是新的JavaScript语言特性在主流浏览器中的受支持水平，其次是当前代码库中随着时间推移而逐渐暴露出来的一些设计和架构问题。
简要：

• 利用新的语言特性（es6）
• 解决架构问题

2.vue3的新特性：

• 速度更快
• 体积减少
• 更易维护
• 更接近原生
• 更易使用

2.1速度更快

vue3和vue2相比

• 重写了虚拟Dom实现
• 编译模板的优化
• 更高效的组件初始化
• undate性能提高1.3~2倍
• SSR速度提高了2~3倍

2.2体积更小

通过webpack的tree-shaking功能，可以将无用模板‘剪辑’，仅打包需要的。
tree-shaking两大好处：

• 对开发人员，能够对vue实现更多其他的功能，而不必担忧整体体积过大。
• 对使用者，打包出来的包体积变小了
  vue可以开发出更多其他的功能，而不必担忧vue打包出来的整体体积过多。

2.3更易维护

compositon Api

• 可与现有的Options API 一起使用
• 灵活的逻辑组合和复用
• Vue3模块可以和其他框架搭配使用

2.4更好的Typescript支持

vue3是基于typescipt编写的，可以享受到自动的类型定义提示。

2.5编译器重写

2.6更接近原生

可以自定义渲染API

import { createRenderer } from '@vue/runtime-core'
const { render } = createRenderer({nodeOps,patchData
})

2.7更易使用

响应式API暴露出来

import { observable,effect } from 'vue'
const state = observable({count: 0
})
effect(() => {console.log(`count is: ${state.count}`)
}) // count is: 0
state.count++ // counte is: 1

轻松识别组件重新渲染原因

const Comp = {render(props) {return h('div',props.count)},renderTriggered(event) {debugger}
}

3.vue3新增特性

vue3中需要关注的一些新功能包括:

• framents
• Teleport
• composition Api
• createRenderer

framents

在vue3.x中,组件现在支持有多个根节点

Teleport

Teleport是一种能够将我们的模板移动到DOM中vue app之外的其他位置的技术。
在vue2中，像modals,toast等这样的元素，如果我们嵌套在vue的某个组件内部，那么处理嵌套组件的定位、z-index和样式就会变得很困难。
通过Teleport，我们可以在组件的逻辑位置写模板代码，然后再vue应用范围之外渲染它。

打开toast

Toast文案

createRenderer

通过createRenderer,我们能够搭建自定义渲染器，我们能够将vue的开发模型扩展到其他平台。
我们可以将其生成在canvas画布上：

关于createRenderer，我们了解下基本使用：

import { createRenderer } from '@vue/runtime-core'
const { render, createApp } = createRenderer({patchProp,insert,remove,createElement,// ...
})
export { render, createApp }
export * from '@vue/runtime-core'

composition Api

composition Api，也就是组合式api，通过这种形式，我们能够更加容易维护我们的代码，将相同功能的变量进行一个集中式的管理。
关于composition api的使用：

export default {setup() {const count = ref(0)const double = computed(() => count.value * 2)function increment() {count.value++}onMounted(() => console.log('component mounted!'))return {count,double,increment}
}

4.非兼容变更

Global API

• 全局vue API已更改为使用应用程序实例
• 全局和内部API已经被重构为可tree-shakable

模板指令

• 组件上v-model用法已更改