Vue3基础知识
文章目录
- 第一章 vue3 安装
-
- 1.1安装
- 1.2开启服务器
- 1.3 使用图形化界面
- 1.4 Vite
- 1.5 vue3项目打包
- 1.6 vue3 创建项目
-
- 1.6.1 vue create命令
- 1.6.2 创建一个项目
- 第二章 vue3 基础
-
- 2.1 vue3 的目录结构
- 2.2 vue3 的起步
-
- 2.2.2 data 选项
- 2,2.3 methods
- 2.3 Vue3 指令
- 2.4 vue3 模板语法
-
- 2.4.1 插值
-
- 2.4.1 .1 文本
- 2.4.1.2 html
- 2.4.1.3 属性
- 2.1.1.4 表达式
- 第三章 常用的Composition API
-
- 3.1 set up
- 3.2 ref
- 3.3 reactive 函数
- 3.4 vue2中的响应式原理
- 3.5 vue3中的响应式原理
-
- 3.5.1 reactive 和ref的对比
- 3.6 setup的注意事项
- 3.7 计算属性和监视
-
- 3.7.1 computed 函数
- 3.7.2 watch属性
- 3.7.3 watchEffect
- 3.8 vue3的生命周期
- 3.9 自定义hook函数
- 3.10 toRef
- 第4章 一些其他的组合API
-
- 4.1 shallowReactive 和shallowRef （浅层次的响应式，只处理第一层）
- 4.2 readonly与shallowReadonly
- 4.3 toRaw 与markRaw
- 4.4 customRef
- 4.4 provide与 inject
- 4.5响应式数据的判断
- 4.6 组合式api的优势
- 4.7Fragment组件
- 4.8 Teleport组件
- 4.9 Suspense组件
- 第五章 其他
-
- 5.1 全局API的转移
- 5.2 其他
第一章 vue3 安装
1.1安装
安装的方式有很多种，我们选择 npm
- 查看版本
$ npm -v
2.3.0 - 升级
npm cnpm install npm -g - 升级或安装 cnpm
cnpm npm install cnpm -g - 最新稳定版
npm init vue@latest - 安装依赖包
cd runoob-vue3-test
1.2开启服务器
npm run dev
1.3 使用图形化界面
使用vue ui 命令来打开图形化界面创建和管理项目。
vue ui
vue ui是可视化界面，方便你去创建，更新和管理vue项目，包括下载router，vuex，axios，elementui等插件，配置好一些属性以及依赖关系，方便我们使用。
执行以上命令会在浏览器中打开图形化界面来引导项目创建：
1.4 Vite
vite是一个web开发构建工具，由于其原生ES6模块导入方式，可以实现闪电般的冷却服务器启动。通过在终端输入以下命令可以快速构建vue项目，语法格式如下：
npm init vite-app
创建项目 runoob-vue3-test2:
npm init vite-app runoob-vue3-test2
运行项目
$ cd runoob-vue3-test2
$ cnpm install
$ cnpm run dev
> [email protected] dev /Users/tianqixin/runoob-test/vue3/runoob-vue3-test2
> vite
最后打开项目：
打开 http://localhost:3000/
1.5 vue3项目打包
打包命令的指令如下：
cnpm run build
打包完成显示界面：
打包完成文件夹显示界面
双击index.html 就能显示界面，当然也有可能是空白界面，要正常显示则需要修改下 index.html 文件中 js、css 文件路径。
当打包的时候出现：
错误的时候，是因为：错误引用方式：
正确的引用方式如下：
1.6 vue3 创建项目
1.6.1 vue create命令
vue create 创建命令的语法格式如下：
vue create 【option】< app-name >
创建一个由vue-cli-service 提供支持的新项目：
【option】可以选择的是：
- -p, --preset ： 忽略提示符并使用已保存的或远程的预设选项
- -d, --default： 忽略提示符并使用默认预设选项
- -i, --inlinePreset ： 忽略提示符并使用内联的 JSON 字符串预设选项
- -m, --packageManager ： 在安装依赖时使用指定的 npm 客户端
-r, --registry ： 在安装依赖时使用指定的 npm registry
-g, --git [message]： 强制 / 跳过 git 初始化，并可选的指定初始化提交信息
-n, --no-git： 跳过 git 初始化
-f, --force： 覆写目标目录可能存在的配置
-c, --clone： 使用 git clone 获取远程预设选项
-x, --proxy： 使用指定的代理创建项目
-b, --bare： 创建项目时省略默认组件中的新手指导信息
-h, --help： 输出使用帮助信息
1.6.2 创建一个项目
- vue create vue3test
- 执行以上命令会出现安装界面，然后会出现安装界面，按下回车就会安装，等待安装完成即可。
- 启动应用 npm run serve
import {creatApp} from 'vue'
import App from './App.vue'
//创建应用的实例对象--app（类似于之间的vue2 中的vm）
const App =createApp（App）
//挂载
app.mount('#app')
第二章 vue3 基础
2.1 vue3 的目录结构
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| node_modules | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：asserts :放置图片，比如logo；components:放置组件信息；App.vue：项目入口，main.js 项目核心文件；index.css 样式文件。 |
| static | 静态资源目录，如图片、字体等。 |
| public | 公共资源 |
| test | 初始测试目录 |
| index.html | 首页入口 |
| package.JSON | 项目配置文件 |
| Readme.md | 项目的说明文档 |
| dist | 使用npm run build 命令打包后生成该目录。 |
2.2 vue3 的起步
Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下：
const app = Vue.createApp({ /* 选项 */ })
传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。
Vue.createApp(HelloVueApp).mount('#hello-vue')
createApp 的参数是根组件（HelloVueApp），在挂载应用时，该组件是渲染的起点。
一个应用需要被挂载到一个 DOM 元素中，以上代码使用 mount(‘#hello-vue’) 将 Vue 应用 HelloVueApp 挂载到
中。mount(‘#hello-vue’) 将 Vue 应用 HelloVueApp 挂载到 < div id=“hello-vue”>< /div> 中。
{{ }} 用于输出对象属性和函数返回值。
{{ message }} 对应应用中 message 的值。
2.2.2 data 选项
data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。
2,2.3 methods
我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。
2.3 Vue3 指令
Vue 指令（Directives）是 Vue.js 的一项核心功能，它们可以在 HTML 模板中以 v- 开头的特殊属性形式使用，用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。
Vue 指令是带有前缀 v- 的特殊 HTML 属性，它赋予 HTML 标签额外的功能。
与传统的 JavaScript 方法相比，使用 Vue 创建响应式页面要容易得多，并且需要的代码更少。
以下是几个常用的 Vue 指令：
| 指令 | 用法 |
|---|---|
| v-bind 缩写 ： | 用于将 Vue 实例的数据绑定到 HTML 元素的属性上。 |
| v-if | 用于根据表达式的值来条件性地渲染元素或组件。 |
| v-show | v-show 是 Vue.js 提供的一种指令，用于根据表达式的值来条件性地显示或隐藏元素。 |
| v-for | 用于根据数组或对象的属性值来循环渲染元素或组件。 |
| v-on缩写@ | 用于在 HTML 元素上绑定事件监听器，使其能够触发 Vue 实例中的方法或函数。 |
| v-model | 用于在表单控件和 Vue 实例的数据之间创建双向数据绑定 |
除了这些常用的指令，Vue 还提供了一些其他的指令，如 v-text、v-html 等，以及自定义指令，让开发者能够更加灵活地操作 DOM 元素。
2.4 vue3 模板语法
vue使用了基于html的模板语法，允许开发者声明式的将DOM的绑定到底层vue实例的数据，
2.4.1 插值
2.4.1 .1 文本
数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值
{{…}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{…}} 标签内容也会更新。
如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。
2.4.1.2 html
使用v-html指令输出html代码。
2.4.1.3 属性
HTML 属性中的值应使用 v-bind 指令。对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来。
2.1.1.4 表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
第三章 常用的Composition API
3.1 set up
- vue3 的新的配置项，值是函数
- 组件中的：数据，方法等，都要配置在set up 中
- set up 的两种返回值：
一种是返回一个对象，对象的属性，方法在模板中都可以直接使用。
另一种是返回一个渲染函数：则可以自定义渲染内容（了解即可）
渲染函数：
import {h} from ‘vue’
return ()=>h(‘h1’,‘尚硅谷’)
- 注意点：
尽量不要和vue2 配置混淆
vue2.x的配置（data methods compute ）中可以访问到setup 中的属性和方法。但是在sutup 中不能访问到vuex中的配置（data methods compute）如果有重名的，setup优先。
setup不是一个async函数，因为返回值不在是return对象，而是promise 模板看不到return 对象中 的属性。
案例：
3.2 ref
-
作用：定义一个响应式的数据
-
语法：
const xx = ref(initValue)
创建一个包含响应式的数据引用对象（reference对象）
js中操作数据：xxx.value
模板中读取数据的时候不需要使用value -
备注：
接收的数据的类型可以是基本类型也能是对象类型
基本类型的数据是依靠响应式object.defineProperty()的get与set完成的
对象类型的数据：内部的‘求助’vue的一个新的函数-----reactive函数
3.3 reactive 函数
- 作用：定义一个对象类型的响应式数据（基本类型不能用，只能用ref）
- 语法：const 代理对象 = reactive（源对象）接收一个对象（或者数组），返回一个代理对象（Proxy的实例对象）
- reactive 定义的响应式数据是‘深层次的’
- 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。
3.4 vue2中的响应式原理
- 实现原理
对象类型：通过Object.defineProperty() 对属性的读取，修改进行拦截（数据劫持）
数据类型：通过重写更新数组的一系列方法来实现拦截
Object.defineProperty(data,'count',{
get(){}
set(){}
})
存在的问题：
新增属性。删除属性，界面不会更新
直接通过下标修改数据，界面不会自动更新。
3.5 vue3中的响应式原理
实现原理：通过proxy代理：拦截对象中的任意属性的变化，包括：属性的增删改查
通过reflect（反射）：对被代理的属性进行操作
实例：
3.5.1 reactive 和ref的对比
- 从定义的角度上来看：ref用于定义基本数据类型，而reactive用于定义对象数据类型，当然ref也能定义对象数据类型，内部会指定通过reactive转为代理数据类型（proxy）
- 从原理上来看 ref通过object.defineProperty（）的get和set（）来实现响应式数据劫持，而reactive是通过proxy来实现响应式数据劫持，并且通过reflect操作源对象的内部数据
- 从使用角度上来看，ref：操作数据需要 .value。读取数据时候的模板中直接读取不需要.value reactive：操作的时候和读取数据的时候都不需要value
3.6 setup的注意事项
- setup 执行机制：
在beforeCreate之前执行一次，this是undifined - setup 的参数：
props：值是对象，包含：组件外部传递过来，和组件内部声明接收了的属性
context：上下文对象（本质是一个对象）
attrs：值为对象，包含：组件外部传递的信息，但是没有在props配置中声明的属性，相当于this.$attrs
slots:收到的插槽内容相当this. $emit
3.7 计算属性和监视
3.7.1 computed 函数
与vuex2 中的计算属性相同
写法：
3.7.2 watch属性
组合式的api
首先要引用：
import {reactive,computed,ref,watch} from 'vue'
使用：
情况一：监视ref所定义的一个响应式数据
watch(n,(newValue,oldValue)=>{
console.log('n变了',newValue,oldValue)
})
情况二：监视ref定义的多个响应式数据
let str= ref('你好呀')
watch([n,str],(newValue,oldValue)=>{
console.log('n 或者str变了',newValue,oldValue)
},{immediate:true})
情况三：watch监视reactive属性的值
注意：此处无法正确获取oldvalue,强制开启的深度监视，使用deep：false无效
watch(person,(newValue,oldValue)=>{
console.log('person发生了变化',newValue,oldValue)
})
情况四：只监视reactive所定义的一个响应式的数组中的一个属性
watch(()=>person.name,(newValue,oldValue)=>{
console.log('只有名字改变了',newValue,oldValue)
})
情况5：监视reactive所定义的响应式数组的许多的数据的变化，将多组数据写成数组的形式
watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
console.log('数据发生了变化',newValue,oldValue)})
情况6：监视reactive所定义的响应式数组中的更深一层的数据变化(这个是时候需要使用深度显示deep属性)
watch(()=>person.job,(newValue,oldValue)=>{
console.log('job发生了变化',oldValue,newValue)
},{deep:true})//
3.7.3 watchEffect
上来就写回调，不写监视谁。
监视watchEffect中的函数中包含的数据
watchEffect和computed很相似：
但是computed注重的是值，所以要写返回值，
watchEffect注重的是过程，所以不用写返回值。
3.8 vue3的生命周期
在vue3 换名字的只有最后一组：befortUnmount / Unmounted （卸载前面/卸载后）
最开始就调用CreatApp，之后才会调用，不用。
生命周期：
vue3提供了组合式api形式的生命周期的钩子，与vuex2的关系是如下表所示：
| vue2 | vue3 |
|---|---|
| beforeCreat | setup() |
| created | setup |
| beforeMount | onBeforeMounted |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| update | onUpdate |
| beforeUnmount | onBeforeUnmount |
| Unmounted | onUnmounted |
onbeforemount的优先级高于beforeMount
3.9 自定义hook函数
- 什么是hook？ —本质是一个函数，把setup函数中使用组合式api进行封装
- 类似于vue2的mixin
- 自定义hook的优势是：复用代码，让setup中的逻辑更加的清除。
3.10 toRef
- 作用：创建一个ref对象，其value值指向另一个对象中的某个属性值，
- 语法：const name = toRef(person,‘name’)
- 应用：要将响应式对象中的某个属性单独提供给外部使用时
- 扩展：toRefs和toRef功能一致，但是可以批量创建多个ref对象，语法：toRefs（person）
第4章 一些其他的组合API
4.1 shallowReactive 和shallowRef （浅层次的响应式，只处理第一层）
- shallowReactive：只处理对象最外层的属性的响应式（浅层响应式）
- shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理
- 什么时候使用： 如果有一个对象数据，结构比较深，但是变化时候只有外层属性变化 ==》shallowReactive
如果有一个对象数据，后续功能不会改变对象的属性，而新生成的对象来替换 ==》shallowRef
4.2 readonly与shallowReadonly
- readonly：是将一个响应式数据变成只读（深只读模式）
- shallowReadonly：让一个响应式数据变成只读模式（浅只读）
- 应用场景：不希望数据被修改
4.3 toRaw 与markRaw
- toRaw ：
作用是：将一个由reactive生成的响应式对象（后面用到数据能改变）转为普通对象
使用场景：用于读取响应式对象当中的普通对象，对这个普通对象的所有操作，不会引起页面更新， - markRaw：永远不会成为响应式数据了。
4.4 customRef
- 作用：创建一个自定义的ref（本质上是一个函数，或者是容器），并对其依赖项进行跟踪和更新触发进行显示控制。
- 实现防抖动效果（延迟显示）：
name:'App',
setup(){
//使用程序员自己定义的ref
// let keyword = ref('hello')
//自定义一个myref函数
function myref(value){
return customRef((track,trigger)=>{
return{
//有人读
get(){
track()//通知vue去追踪数据变化
console.log('有人读取了数据')
return value
},
//有人改
set(newvalue){
console.log('有人改了数据')
//取消其设置的延迟操作
clearTimeout(timer)
timer = setTimeout(()=>{
value= newvalue
trigger()//通知vue去重新解析模板
},5000)
},
}
})
}
//自定义
let keyword = myref('hello')
return {keyword}
}
4.4 provide与 inject
实现 祖和后代之间的通信。
套路：父组件用一个provide来提供数据，后代组件使用inject来收取这些被提供的数据。
具体的操作方法：
父组件：
setup() {
let car = reactive({
name:'奔驰',
price:'40k'
})
provide('car',car)
接收组件：
setup(){
let car = inject('car')
return{car}
}
4.5响应式数据的判断
isRef（）、isReactive。。。
4.6 组合式api的优势
vue2 中的是配置式api vue3 是组合式api，
使用传统的option的api时候，新增或者修改一个需求，要分别在data method和computed中修改
vue3可以更加优雅的组织函数，代码和功能，让相关的函数更加有序的组织在一起。
4.7Fragment组件
- 在vue2中：组件必须是一个根标签
- 在vue3中，组件可以没有根组件，内部会将多个标签包含在一个Fragment虚拟元素中
- 好处：减少标签层数，减小内存的占用
4.8 Teleport组件
- 定义：将组件html结构移动到指定位置的技术。
4.9 Suspense组件
- 等待异步组件时渲染一些额外内容，让应用有更好的体验感
- 使用步骤：
1.异步引入组件
2.使用suspense包裹组件，并且配置好default与fallback（v-solt）
第五章 其他
5.1 全局API的转移
- vue2.有许多的全局API和配置：如全局注册，全局指令
- vue3对这些api都做了调整，将全局的api都调整到了应用实例上面（app）
5.2 其他
data选项必须申明为函数
过度类名的更改
移除keyCode作为v-on的修饰符
移除v-on.native的修饰（表示为原生事件） ：通过emit[‘close’]申明自定义事件。
移除过滤器