vue2中如何实现响应式

对于数组
$set (第一个参数是数组，第二个参数是下标，第三个参数是新的内容)
vue.set (第一个是操作的数据，第二个是添加的内容，第三个是添加的内容的值)
splice (删除,插入,替换)

对于对象
$set
vue.set
object.assign (第一个参数是目标对象，后面的参数都是源对象)

强制刷新

this.$forceUpdate()

vue3如何实现响应式

reactive()(定义多个数据响应式)

VUE3的特点

1）性能的提升
打包大小减少
初始化渲染和更新渲染更快
内存占有减少

2）源码的升级
使用proxy代替defineProperty实现了响应式数据
重写了虚拟dom
3）集合了 TypeScript
4）新的特性
Vue3的招牌特性，Composition API
setup
setup是组合Composition API中的入口函数，也是第一个要使用的函数。

setup只在初始化时执行一次，所有的Composition API函数都在此使用

setup执行的时候,组件对象还没有创建,组件实例对象this还不可用,此时this是undefined, 不能通过this来访问data/computed/methods/props。
返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性，返回对象中的方法会与methods中的方法合并成功组件对象的方法，如果有重名, setup优先。因为在setup中this不可用，methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods里的内容，所以还是不建议混合使用。

setup函数如果返回对象, 对象中的 属性 或 方法 , 模板 中可以直接使用

ref

定义一个响应式的数据(一般用来定义一个基本类型的响应式数据Undefined、Null、Boolean、Number和String)

reactive

定义多个数据的响应式，接收一个普通对象然后返回该普通对象的响应式代理器对象(Proxy)，响应式转换是“深层的”：会影响对象内部所有嵌套的属性,所有的数据都是响应式的

watch+computed变成了函数

生命周期
setup代替了beforeCreate和created
在每个生命周期前面都加了on
beforeDestory和destoryed更换成了onbeforeunMount和onunMounted

创建vue3.0工程

1.通过脚手架 vue-cli
2.Vite

什么是vite

新一代前端构建工具

vite的优势

开发环境中，无需打包操作，可快速冷启动
轻量快速的热重载
真正的按需编译，不再等待整个项目编译完成