`Vue3.0
官方网站地址: v3.vuejs.org
新增特性
- 向下兼容,Vue3 支持大多数 Vue2 的特性。
- 性能的提升,每个人都希望使用的框架更快,更轻。打包大小减少 41%,初次渲染快 55%,更新快 133%,内存使用减少 54%
- 新推出的
Composition API
,在 Vue2 中遇到的问题就是复杂组件的代码变的非常麻烦,甚至不可维护。封装不好,重用不畅。 - 更好
TypeScript
支持,Vue3 的源代码就是使用TypeScript
进行开发的。
Vue-cli 搭建
Vue3开发环境
安装:
1 | npm install -g @vue/cli | 推介 |
检查版本命令为:
1 | vue --version |
vue-cli 命令行创建项目
命令行中输入vue create vue3-demo
1 | ? Please pick a preset: (Use arrow keys) //请选择预选项 |
TypeScript
进行开发 Vue3 的代码 不能直接使用第二项默认模板
1 | ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) |
1 | ? Choose a version of Vue.js that you want to start the project with (Use arrow keys) |
1 | Use class-style component syntax? |
是否需要使用class-style
是否使用TypeScript
和Babel
的形式编译 JSX
1 | Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) |
回车后会让你选择增加lint
的特性功能。
1 | ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) |
选择这些配置文件时单独存放,还是直接存放在package.json
文件里
1 | Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files |
需不需要把这些配置保存下来,下次好直接进行使用
1 | Save this as a preset for future projects? (y/N) |
图形化创建项目
使用 vue ui
1 | Starting GUI. |
把http://localhost:80
地址拷贝到浏览器地址栏
进行选项配置
项目目录
1 | |-node_modules -- 所有的项目依赖包都放在这个目录下 |
package.json
1 | { |
- serve : 在开发时用于查看效果的命令,视频中演示看一下效果
- build : 打包打码,一般用于生产环境中使用
- lint : 检查代码中的编写规范
main.ts 文件
1 | import { createApp } from "vue"; // 引入vue文件,并导出`createApp` |
setup()和 ref()函数
实例
1 | <template> |
setup
中加入一个girls
变量,为了能让模板中进行使用,还需要返回。
1 | <script lang="ts"> |
使用v-for
语法
1 | <button v-for="(item, index) in girls" v-bind:key="index"> |
点击按钮的时候,触发一个方法selectGirlFun
,方法绑定一个选定值selectGirl
1 | <script lang="ts"> |
修改template
代码
1 | <template> |
setup
函数的用法,可以代替 Vue2 中的 date 和 methods 属性,直接把逻辑写在 setup 里就可以ref
函数的使用,要在template
中使用的变量,必须用ref
包装一下。return
出去的数据和方法,在模板中才可以使用,这样可以精准的控制暴露的变量和方法。
reactive() 函数优化程序
setup
中要改变和读取一个值的时候,还要加上value
。
可以优化
引入一个新的 APIreactive
return
返回的时候只需要返回一个data
,
1 | <script lang="ts"> |
修改template
部分的代码
字面量前要加入data
1 | <template> |
data 增加类型注解
接口(interface
)来作类型注解。
1 | interface DataProps { |
显示的为 data
变量作一个类型注解.
1 | cosnt data: DataProps = ... |
toRefs()继续优化
每次输出变量前面都要加一个data
,这是可以优化的。
...
扩展,运算符结构后就变成了普通变量,不再具有响应式的能力
新函数toRefs()
1 | import { reactive, toRefs } from "vue"; |
data
进行包装
1 | const refData = toRefs(data); |
template
去掉 data
1 | <template> |
示例代码
1 | <template> |
Vue3.生命周期和钩子函数
函数名 | 作用 |
---|---|
setup() | 开始创建组件之前,在beforeCreate和created之前执行。创建的是data和method |
onBeforeMount() | 组件挂载到节点上之前执行的函数。 |
onMounted() | 组件挂载完成后执行的函数。 |
onBeforeUpdate() | 组件更新之前执行的函数。 |
onUpdated() | 组件更新完成之后执行的函数。 |
onBeforeUnmount() | 组件卸载之前执行的函数。 |
onUnmounted() | 组件卸载完成后执行的函数 |
onActivated() | 被包含在 |
onDeactivated() | 比如从 A 组件,切换到 B 组件,A 组件消失时执行。 |
onErrorCaptured() | 当捕获一个来自子孙组件的异常时激活钩子函数 |
引入
1 | import { |
1 | <script lang="ts"> |
setup()
,setup 这个函数是在beforeCreate
和created
之前运行的
Vue2.x Vue3.x 生命周期对比
1 | Vue2--------------vue3 |
onRenderTracked()和 onRenderTriggered()
onRenderTracked 状态跟踪
onRenderTracked
直译过来就是状态跟踪
,它会跟踪页面上所有响应式变量和方法的状态
页面有update
的情况,他就会跟踪,然后生成一个event
对象
1 | import { .... ,onRenderTracked,} from "vue"; |
在setup()
函数中进行使用了。
1 | onRenderTracked((event) => { |
onRenderTriggered
就是狙击枪,只精确跟踪发生变化的值,进行针对性调试。
1 | import { .... ,onRenderTriggered,} from "vue"; |
1 | onRenderTriggered((event) => { |
event
对象属性的详细介绍:
1 | - key 那边变量发生了变化 |