Vue3.0都有哪些新特性及优化点

Vue3的新特性：

Vue3主要有以下几个方面的改动及提升：

更快、更小、更易于维护

更快

在性能方面的提升，以及在源码层面的改动，主要包括：重构虚拟DOM、事件缓存、基于Proxy的响应式对象。

1. 重构虚拟DOM

Vue3重写了虚拟DOM的实现方法，使得初始渲染/更新可以提速达100%。

优化内容：

1.1 标记静态内容，并区分动态内容（静态提升）。
1.2 更新时只diff动态的部分。

2. 事件缓存

Vue3中，提供了事件缓存对象cacheHandlers，当cacheHandlers开启时，@click绑定的事件会被标记为静态节点，被放入cacheHandlers中，这样在视图更新时也不会追踪，当事件再次触发时，就无须重新生产函数，直接调用缓存的事件回调方法，在事件处理方面提升了Vue的性能。

3. 基于Proxy的响应式对象

在Vue2.0中，使用Object.defineProperty()实现响应式对象，对于一些复杂的对象，需要循环递归地给每个属性增加getter/setter监听器，性能开销较大。Vue3.0中，内部利用ES6的Proxy API实现响应式对象，可以自动监听对象中所有属性的变化，性能开销较小。

Object.defineProperty的实现方式：

javascript 复制代码

let obj = {
    _name: 'John'
}
Object.defineProperty(obj, 'name', {
    get: function() {
        return this._name
    },
    set: function(value) {
        console.log('name is changed to:', value)
        this._name = value
    }
})

ES6的proxy实现方式：

javascript 复制代码

onst user = {
    name: 'summer'
}
const proxy = new Proxy(user, {
    get(target, property, receiver) {
        onTrack()
        return Reflect.get(...arguments)
    },
    set(target, property, value, receiver) {
        onTrigger()
        return Reflect.set(...arguments)
    }
})

源码中Proxy的使用：

更小

Vue3.0的压缩后代码大小为20k左右，相比Vue2.0的压缩后代码大小244k，减少了91%。

使用Tree Shaking的原理是引入了ES6的模块静态分析，在编译时正确判断到底加载了什么代码，但是要注意import和export是ES6原生的，而不是通过Babel或Webpack转化的。

更易于维护

Vue3.0的源码结构更加清晰，模块化程度更高，代码的可读性、可维护性也更好。Vue3采用TypeScript来重写，；源代码目录结构遵循Monorepo。

1.1 源码从Flow改成了TypeScript来编写，TypeScript引入了很多新的特性，例如类型检测、接口等
1.2 Monorepo是一种管理代码的方式，核心观点是所有的项目在一个代码仓库中，但是代码分割到一个个小的模块中，而不是在src这个目录中。

组合式API

Vue2.0选项式API开发

javascript 复制代码

export default {
    name: 'test',
    components: {},
    props: {},
    data: {
        return {}
    },
    watch: {},
    mounted() {},
    methods: {}
}

Vue3.0组合式API开发

javascript 复制代码

export default {
    name: 'test',
    props: {
        name: String
    },
    components: {},
    setup(props, ctx) {
        console.log(props.name)
        const data = reactive({})
        onMounted() {},
        const myMethod = () => {}
        return {
            data,
            myMethod
        }
    },
}

Vite

使用vite初始化项目，要求node版本要大于等于18.3.0

javascript 复制代码

npm create vue@latest

Vite在开发环境下基于浏览器原生的ES6 Modules开发，在生产环境下基于Rollup打包。

特性：

1.1 快速冷启动
1.2 模块热更新
1.3 真正的按需编译

常用的ES6新特性哪些？

1.1 变量的声明：let、const
1.2 箭头函数
1.3 模板字符串
1.4 解构赋值
1.5 对象的扩展
1.6 Set和Map数据结构
1.7 Promise对象
1.8 Class类
1.9 模块化