国家和住房城乡建设部网站,海外网络推广渠道,河北省建设工程招标投标协会网站,吉林省交通建设集团有限公司网站一、Vue3简介二、Vue3有那些优化性能的提升源码升级拥抱TypeScript新的特性 三、创建Vue3.0工程四、Vue3工程结构#xff08;使用cli创建的vue3#xff09;五、常用的Composition API#xff08;组合式API#xff09;setupsetup的两个注意点 ref函数reactive函数Vue3.0中的… 一、Vue3简介二、Vue3有那些优化性能的提升源码升级拥抱TypeScript新的特性 三、创建Vue3.0工程四、Vue3工程结构使用cli创建的vue3五、常用的Composition API组合式APIsetupsetup的两个注意点 ref函数reactive函数Vue3.0中的响应式原理vue2.x的响应式Vue3.0的响应式 reactive对比 ref计算属性与监视computed函数watch函数watchEffect函数 自定义hook函数toRef重点 六、其他Composition APIshallowReactive与shallowRefreadonly与shallowReadonlytoRaw与markRawcustomRefprovide与inject响应式数据的判断 七、Composition API 的优势options API 存在的问题Composition API 的优势 八、新的组件FragmentTeleport 九、其他全局API的转移其他改变 一、Vue3简介
2020年9月18日Vue.js发布3.0版本代号:One Piece(海贼王)耗时2年多、2600次提交、30个RFC、600次PR、99位贡献者github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.0
二、Vue3有那些优化
性能的提升
打包大小减少41%初次渲染快55%更新渲染快133%内存减少54%
源码升级
使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking
拥抱TypeScript
Vue3可以更好的支持TypeScript
新的特性
Composition API(组合API) setup配置ref与reactivewatch与watchEffect 新的内置组件 FragmentTeleportSuspense 其他改变 新的生命周期钩子data 选项应始终被声明为一个函数移除keyCode支持作为 v-on 的修饰符
三、创建Vue3.0工程 使用vue-cli创建 选择第二个 使用vite创建 官方地址https://v3.cn.vuejs.org/guide/installation.html#vite
## 创建工程
npm init vite-app project-name
##进入工程目录
cd project-name
## 安装依赖
npm install
## 运行
npm run dev四、Vue3工程结构使用cli创建的vue3 五、常用的Composition API组合式API
setup
1、Vue3.0中的一个新的配置项值为一个函数 2、setup是所有CompositionAPI表演的舞台 3、组件中所用到的数据、方法等等均需要配置在setup中 4、setup函数有两种返回值 1.若返回一个对象则对象中的属性、方法,在模板中均可以直接使用。(重点关注!)2.若返回一个渲染函数:则可以自定义渲染内容。(了解)5、注意点
1.尽量不要与Vue2.x配置混用Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法但在setup中不能访问到Vue2.x配置(data、methos、computed...)。如果有重名setup优先。
2.setup不能是一个async函数因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性,setup的两个注意点
setup执行的时机 在beforeCreact之前执行一次this是undefined setup的参数 props值为对象包含组件外部传递过来且组件内部声明接收了的属性context上下文对象 attr值为对象包含组件外部传递过来但没有在props中声明的属性相当于this.$attrsslots收到的插槽内容相当于this.$slotsemit分发自定义事件的函数相当于this.$emit
ref函数
作用定义一个响应式的数据语法const xxx ref(initValue) 创建一个包含响应式数据的引用对象reference对象JS中操作数据xxx.value模版中读取数据不需要.value,直接div{{xxx}}/div 备注 接收的数据可以是基本数据类型也可以是对象类型基本数据类型响应式依然靠object.defineProperty()的get与set完成对象类型的数据:内部求助了Vue3.0中的一个新函数一 reactive 函数。
reactive函数 Vue3.0中的响应式原理
vue2.x的响应式 Vue3.0的响应式 MDN文档中描述Proxy和Reflect
Proxyhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ProxyReflecthttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect reactive对比 ref
从定义的角度 ref用来定义基本数据类型reactive用来定义对象 或数组数据类型备注:ref也可以用来定义对象(或数组)类型数据它内部会自动通过reactive转为代理对象。 从原理的角度 ref通过object.defineProperty()和get与set来实现响应式数据劫持reactive通过proxy来实现响应式并通过reflect操作源对象内部的数据 从使用的角度 ref定义数据操作数据需要用.value读取数据时模版中直接读取不需要.valuereactive定义的数据操作数据与读取数据都不需要.value
计算属性与监视
computed函数
与Vue2中的配置功能一致写法
watch函数 与Vue2中的watch配置是一致的 两个小坑 监视reactive定义的响应式数据时oldValue无法正确获取强制开启了深度监视deep配置失效监视reactive定义的响应式数据中的某个属性时deep配置有效 情况一 情况二 情况三 情况四 情况五 特殊情况
watchEffect函数
watch的套路是:既要指明监视的属性也要指明监视的回调。watchEffect的套路是:不用指明监视哪个属性监视的回调中用到哪个属性那就监视哪个属性。watchEffect有点像computed: 但computed注重计算出来的值回调函数的返回值所以必须写返回值而watchEffect更注重过程回调函数体所以不用写返回值
自定义hook函数
什么是hook本质是一个函数把setup函数中使用的composition API进行封装类似于vue2中的mixin自定义hook的优势复用代码让setup中的逻辑更清晰 新增一个文件目录hooks 定义 使用
toRef重点
作用:创建一个ref对象其value值指向另一个对象中的某个属性。可以将对象中的属性进行拆解使用语法:const name toRef(person,name)应用:要将响应式对象中的某个属性单独提供给外部使用时。扩展:toRefs与toRef功能一致但可以批量创建多个ref对象语法:toRefs(person)
六、其他Composition API
shallowReactive与shallowRef
shallowReactive:只处理对象最外层属性的响应式(浅响应式)shallowRef: 只处理基本数据类型的响应式,不进行对象的响应式处理。什么时候使用? 如果有一个对象数据结构比较深,但变化时只是外层属性变化 shallowReactive。如果有一个对象数据后续功能不会修改该对象中的属性而是生新的对象来替换 shallowRef。
readonly与shallowReadonly
readonly: 让一个响应式数据变为只读的(深只读)shallowReadonly:让一个响应式数据变为只读的(浅只读)应用场景:不希望数据被修改时
toRaw与markRaw
toRaw: 作用:将一个由reactive 生成的响应式对象转为普通对象。使用场景:用于读取响应式对象对应的普通对象对这个普通对象的所有操作不会引起页面更新 markRaw: 作用:标记一个对象使其永远不会再成为响应式对象。应用场景: 有些值不应被设置为响应式的例如复杂的第三方类库等,当渲染具有不可变数据源的大列表时跳过响应式转换可以提高性能。
customRef
作用创建一个自定义的ref并对其依赖项跟踪和更新触发进行显示控制实现防抖效果
provide与inject
作用实现祖孙组件通信套路:父组件有一个 provide选项来提供数据子组件有一个 inject 选项来开始使用这些数据具体实现 祖宗组件中 孙子组件中
响应式数据的判断
isRef: 检查一个值是否为一个 ref 对象isReactive:检査一个对象是否是由 reactive创建的响应式代理。isReadonly: 检查一个对象是否是由readonly创建的只读代理isProxy: 检查一个对象是否是由 reactive或者readonly方法创建的代理
七、Composition API 的优势
options API 存在的问题 Composition API 的优势 八、新的组件
Fragment
在Vue2中: 组件必须有一个根标签在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级,减小内存占用
Teleport
to中可以写bodycss的选择器九、其他
全局API的转移
VUE2中有许多全局api和配置 例如注册全局组件注册全局指令等 vue3中对这些api做出了调整 将全局的API即Vue.xxx调整到应用实例app上
其他改变
data始终应该被声明为一个函数过度类名的更改 vue2.0写法 vue3写法 移除keyCode作为 v-on 的修饰符同时也不再支持 config.keycodes移除 v-on.native修饰符 父组件中绑定事件 子组件中声明自定义事件 移除了过滤器
