Vue3的新特性总结

vue3新特性:

1.速度加快 打包速度减少了41%
2.内存减少了54%
3.渲染加快

2源码升级

• 1.使用Proxy代替defineproperty实现响应式
• 2.重写虚拟DOM的实现和Tree-Shaking

3.拥抱TypeScript

• 1.Vue3可以更好的支持TypeScript

4.新的特性

• 1.Commposition API(组合api)
  • setup配置
  • ref与reactive
  • watch与watchEffect
  • provide与inject
  • …

1.配置工程环境
vue-cli必须在4.5.0以上
vue creat vue3_test

2.使用vite创建
官网： https://vites.cn
vite与webpack的区别
webpack是先构建然后再服务器准备
而vite是先准备再去动态的去寻找需要的路由

vue2.x的响应式

• 实现原理:

• 对象类型:

  • 通过Object.defineProperty()对属性的读取\修改进行拦截(数据劫持)

  • 数组类型:通过重新更新数组的一系列方法来实现拦截,(对数组的变更方法进行了包裹)

  • * Object.defineProperty(data,'count',{
    		set(){}
    		get(){}
    	})
    ####	存在问题:
    *新增属性 删除属性 界面不会更新(可通过$set或Vue.set进行修改,通过$delete或Vue.delete进行删除)
    *直接通过下标修改数组,界面不会自动更新.(可通过$set或Vue.set进行修改,也可通过数组的splice方法进行替换元素 ==>splice(0,1,"男") ==>修改第0个元素为男)