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