尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程

Vue3

编码规范

创建vue3工程

基于vite创建

快速上手 | Vue.js (vuejs.org)

npm create vue@latest

在nodejs环境下运行进行创建

按提示进行创建

用vscode打开项目

安装依赖

源文件有src

内有main.ts  App.vue

简单分析

编写src

vue2语法在三中适用

vue2中的date  methods语法是

选项式API

setup

setup函数执行的时机

setup执行时机比vue2中的beforecreate还要早

setup函数中的this是undefined      vue3中已经开始弱化this

数据原来是写在data中的 ，此时的name、age、tel都不是响应式数据

即，通过下面的方法修改变量，  变量虽然改变，但页面没有变化

setup返回值

小小面试题

Vue3中使用setup和使用data     methods  

setup和optionAPI的关系

data（methods    下文data代指vue2旧写法）和setup可以同时存在

且  data中可以访问setup中的数据，通过this关键字

旧写法可以读取新写法中的东西

新写法无法读取旧写法中的东西

vue2中选项式语法可以和vue3 中的新语法setup共存

旧语法可以读出setup中的东西，setup不可以读出旧语法中的东西

setup语法糖

省去每次将return放出去数据方法的步骤

这个script标签是用来配置组件名字

这个script标签用来配置组合式API

此时有两个script标签，且两个标签的lang属性一致

此时只需要在setup 的script标签内随意写数据和方法

若想要将这两个script标签写在一个内

需要借助插件完成

安装插件

1.npm i vite-plugin-vue-setup-extend -D

-D 是开发依赖的意思

2.修改vite.config.ts文件

响应式数据

ref定义基本类型 的数据

想让哪个数据成为响应式数据，就给那个数据包裹ref（）

模板中不需要.value

js中进行数据操作，需要通过.value调用

name不是响应式的，name.value是响应式的

此时 的 被ref（）包裹的name age为refImpl对象

reactive定义对象类型的数据

被reactive包裹的对象类型数据转变为响应式对象数据

通过控制台输出响应式对象可知，为proxy代理对象（数组）  proxy为原生js就有的，叫做代理

原生内置的函数

reactive所定义的对象类型的响应式数据是深层次的 

ref与reactive

表面上是ref定义对象类型数据改为响应式数据，实际上ref遇见对象数组等非基本数据类型，底层是通过reactive实现的

reactive重新分配一个新对象，会失去响应式

此时要是使用object.assign 替换

也就是说重新上传一个新对象，不能直接对进行了响应式改变的对象直接更改对象

而是通过object的assign 方法实现对象的覆盖

ref可以通过.value 直接修改对象

toRefs和toRef

把一个响应式结构中的属性拿出来并且使其具备响应式

toRefs 将对象内的属性可以多个同步取出并进行ref响应式

toRef(对象，对象其中的一个属性名)

toRefs(对象)

toRefs解构对象，toRef解构对象的某个属性

计算属性

根据已有数据计算出新数据

input表单中的属性

v-bind：   单向绑定

v-model：双向绑定

方法没有缓存

计算属性有缓存

在多次调用fullName是，如果firstName和LastName未改变，则计算属性执行一次

slice截取

val.split(‘-’)根据这个字符分开成为一个数组

.toUpperCase()字母大写的方法

计算属性最终得到的也是一个ref响应式数据

在对fullName进行修改时  .value 修改 的值会在set方法中返回给val

Watch

3.getter函数

Watch监视-情况一

监视ref定义的 基本类型数据

Watch监视-情况二

若想要监视对象内部属性的变化，需要手动开启深度监视

 

如果修改的是对象中的属性，因为所更改的是旧的对象中的属性，所以oldvalue为原本的对象，又因为更改后的属性所对应的还是旧属性，所以newvalue所对应的也是原本更改了属性的对象，所以这种写法下，仅修改属性值，而不修改整个对象的话，oldvalue和newvalue是相同的

实际使用中通常不使用旧值 

 Watch监视-情况三

如果监视的是reactive所定义的数据，底层隐式地创建了深层的监听

 Watch监视-情况四

监视的属性为基本数据类型

getter函数，一个函数返回一个值

监视的属性为对象数据类型

如果直接写对象的这个对象类型的属性，只能监视，这个对象类型数据内部的变化，整体对象的改变无法监视

写函数式返回 这个对象数据类型的属性  返回的是地址值，只有当这个属性整个对象改变时，才会监视，触发监视函数

中和方案：采用函数书写，添加深度监视属性

 Watch监视-情况五

监视上述多个数据

watchEffect

watch  监视 多个数据 需要将多个数据指出

watchEffect   不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）

标签的ref属性

用于给节点打标识

如何调用dom标签，使用id调用难免会出现 俩个vue文件中出现标有相同id的html标签

所以此时通过ref在  模版中的html标签内打上ref标签，内写上名字，再在js板块写

名字=ref（）即可实现调用dom元素，且不会出现两个id重复的情况

ref加在html标签上，得到的是dom元素

加载组件上，得到的是组件的实例对象，但暴露出的数据需要再组件的vue内进行修改

ref写在组件标签上，，最终能获取组件实例

由于具有保护措施，，打印出的组件实例，没有实质的内容，

此时需要在   组件源文件，儿子端，内调用defineExpose设置暴露给父级的东西

scoped局部样式无脑加

其他vue文件就再也不怕类名起重复了

回顾TS中的_接口_泛型_自定义类型

TS接口规范的使用

@符在文件路径时使用，指站在金字塔顶端

限制Persons数组时

使用泛型

泛型什么时候用什么时候写

自定义类型

props的使用

从父级传数据

reactive直接传泛型

defineProps  函数用于接受数据

标签内传入数据的值

传入数据时，在html标签中遇到的问题    ：与否  决定是表达式还是简单的字符

vue中的遍历   

数据源中每一项（形参）    数据源

还应添加索引值     key     :key可以进行对索引值的 赋值，避免后面遍历的时候出现问题

没有key索引值为0-1-2-。。。。。

props的几种写法

define为前缀的函数表示该函数为宏函数

不用引入也可以直接使用

生命周期（组件的一生）

Vue2的生命周期

v-if既然不展示，结构给删了

v-show       结果还在

debugger()

Vue3的生命周期

创建在setup这个中

挂载

挂载前onBeforeMount()

挂载完毕onMounted()

更新

更新前onBeforeUpdate

更新完毕onUpdate()

卸载

卸载前onBeforeUnmount()

卸载完毕onUnmounted()

 最基本八个生命周期

自定义Hooks

Hooks：

mixin

命名：useDog   （与狗相关的） useXX  与XX相关的一部分内容  被模块化包装

Hooks的调用

Hooks本质是一个个可以调用的函数

Hooks内能写钩子（生命周期函数）

   

组合式API          Hooks实现相关内容（数据函数等）模块化，整合到一起

export default  后面直接跟值

路由（route）

就是一种对应关系

1.路由就是一组key-value的对应关系

2.多个路由需要经过路由器的管理

spa        应用    单页面应用 需要使用路由

路由_基本切换效果

第一步写出导航区，和展示区

第二步  请出路由器

制定路由的时候  一定要想好路由器的工作模式

制定好路由后一定要暴露router

并在main.ts引入router

并使用路由器

此时已经具备路由环境

还应在App。vue文件中添加可视路由模块

路由_两个注意点

路由_路由器工作模式

to的两种写法

命名路由

路由嵌套

添加子级路由不用填/

路由传参  query参数

从一个响应式上解构一个属性，这个属性丢失响应式

params参数

占位问题

params不能传对象和数组

params       

不能用path只能用name

路由的props配置

第一种写法：将路由收到的所有params参数作为props传给路由组件      只能params参数使用

第二种写法：函数写法

更加适合query参数，因为params参数用第一种方法更加简单

第三种写法：无法进行修改，只有固定数据，使用较少

replace

跳转的时候有两种方式

push  会有历史记录，能够后退

导航区加replace    不能够后退

给

编程式路由导航

脱离routerLink实现跳转页面

router.push()写法                 routerLink 中 to能写什么

重定向

作用：将特定的路径，重新定向到已有路由。

通常写在路由设置最下面

pinia

vue.js状态管理库

自己定义的ref，需要.value拆包

如果是reactive里面包了一个ref，自动拆包，不需要再.value就能获取值

5.4修改数据的三种方式

第一种：直觉修改

 

工具中可以看到

第二种：patch批量变更

patch批量变更，在时间线上，多个数据单个修改      组件会进行多次修改

                                                    而使用第二种修改方式    组件只会进行一次patch修改

批量变更

第三种：action

storeToRefs

读取store数据更加优雅

storeToRefs只关心数据不关心其他的

而使用toRefs会使内部所有属性被ref包裹

getters的使用

对stroe数据不满意，对其进行修改

如果用this，不能使用箭头函数

订阅subscribe可以监视vueX的修改

只要是store  身上都有这个subscribe方法

、

localStorage.setItem('talkList',state.talkList)//浏览器的本地存储

localStorage里面存的都是字符串，如果存的不是字符串

，底层会调用toString

store组合式写法

选项式

组合式

组件通信

UomgAPI