Vue3学习笔记整理
2022-12-23 15:03:25 54 举报AI智能生成
Vue3学习笔记整理包括了Vue3的基础知识、核心概念、组件化开发、响应式原理等方面的内容。在学习过程中，我们通过阅读官方文档、观看视频教程和实践项目等方式来掌握Vue3的各种特性和用法。此外，我们还对Vue3与Vue2的区别进行了详细的对比分析，以便更好地理解新版本的优势和改进之处。总之，这份学习笔记为我们提供了一份系统且全面的Vue3学习指南，帮助我们快速上手并熟练运用这一流行的前端框架。
作者其他创作
大纲/内容
Vue.js
Vue基础语法<br>
MVVM<br>
VM：就是View-Model，数据双向绑定
Model：取数据的地方
View：展示数据的地方
moustache插值语法<br>
选项式&组合式
选项式
data
methods
组合式
setup语法糖<br>
setup
ref
ref一般用来定义基本类型数据,如果想要改变它的值,必须使用value
reactive、toRef、toRefs
reactive一般用来定义引用数据类型<br>
computed<br>
<font color="#4d4d4d">是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新</font><br>
watch
watch监听ref定义的变量
watch默认浅层次监听,监听reactive定义的响应式数据的全部属性,强制开启深度监听(deep设置无效),并且无法获取正确的oldValue<br>
watch立即监听
immediate
component<br>
组件基本使用
创建、引入、（注册）/使用、
全局组件与局部组件
全局：AppNew.component("组件名","组件");<br>
组件间通信
父传子
props/defineProps<br>
type
required<br>
default<br>
子传父
$emit/defineEmits<br>
defineExpose
祖传孙
<font color="#0d0b22">defineExpose</font>/ref属性
provide/inject
兄弟组件
pinia
动态组件<component is=""></component>
keep-alive
指令
v-cloak<br>
<font color="#010101">隐藏双括号，有值再显示</font>
v-html
可以将string的html解析出来并且进行渲染
v-text
都是用于将数据显示在界面中,它只接受一个string类型<br>
v-show
v-show会给元素添加一个属性,display:none<br>
v-if
当条件为false时,包含v-if指令的元素,不会出现在dom中<br>
v-else<br>
<font color="#010101">配合v-if</font>
v-else-if<br>
<font color="#010101">配合v-else</font>
<font color="#009688">v-slot</font>
插槽
v-pre<br>
用于显示原本的Mustache语法
v-once
该指令后面不需要跟任何表达式,该指令表示元素和组件只渲染一次,不会随数据改变而改变
v-for
遍历数组/对象
key的作用
v-bind/语法糖:<br>
动态class对象：<div :class="{ 'is-active': true, 'red': isRed }"></div><br>
动态class数组：<div :class="['is-active', isRed ? 'red' : '' ]"></div><br>
动态style对象：<div :style="{ color: textColor, fontSize: '18px' }"></div><br>
v-on/语法糖@<br>
参数
事件调用的方法没有参数
在事件定义时,写方法时省略了小括号,但方法本身需要一个参数,<br> 这时vue会默认将浏览器生产的event事件对象作为参数传入到方法<br>
方法定义时,我们需要event对象,同时又需要其他参数<br>
修饰符
.stop
阻止冒泡<br>
.prevent
阻止默认事件<br>
.keyCode|keyAlias
监听键盘事件<br>
.once
只会执行一次
.self
<font color="#444444">点击事件绑定本身才触发</font>
监听事件
@click/@keyup
v-model
修饰符
number
可以将输入转换成Number类型.否则不管是否输入数字，其实都是String。
lazy
使用修饰符.lazy会转变为在change事件中同步.就是在失去焦点或者按回车才更新
trim<br>
自动过滤输入的首位空格<br>
双向数据绑定
自定义指令
<font color="#986801">directives</font><br>
<div>bind<br></div>
<font color="#4d4d4d">指令与元素成功绑定时调用；</font><font color="#010101">只调用一次</font>
inserted
<font color="#4d4d4d">指令所在元素被插入页面时调用；</font>
update<br>
<font color="#4d4d4d">指令所在模板结构被重新解析时调用。</font>
全局指令
局部指令
生命周期钩子函数
beforeCreate<br>
created<br>
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmount<br>
keepAlive<br>
deactivated
activated
插槽slot
普通插槽
slot
具名插槽
域名插槽
全局属性<br>
<font color="#0d0b22">proxy.globalProperties.$xxx=xxx</font>
router
路由基本使用
路由配置
path
name
component<br>
预加载
import Xxx from "@/xxx/xxx.vue";component:Xxx
懒加载
<font color="#0d0b22">component:</font>() => import(<font color="#0d0b22">"@/xxx/xxx.vue"</font>)<br>
路由模式
hash<br>
有#号
history<br>
无#号
abstract：适用于Node
重定向
redirect
路由元信息
<font color="#0d0b22">meta</font>
<router-link></router-link><router-view><router-view>
嵌套路由
children<br>
声明式路由和编程式路由<br>
声明式
<router-link to="{}"></router-link><router-view></router-view>
编程式
proxy.$router.push()
有历史记录
proxy.$router.replace()
无历史记录
proxy.$router.go()
前进后退,正数前进,负数后退
路由传参,$router发,$route收
声明式
<router-link to="{path:"xxx",query:{text:"xxx"}}"></router-link><router-view></router-view>
编程式
query和params
query
proxy.$router.push({path:xxx,query:{text:"路由传值"}})<br>
params
只能配置name字段,proxy.$router.replace({name:xxx,params:{text:"路由传值"}});
$router和$route的区别
动态路由
添加
<font color="#444444">addRoute</font>
删除
<font color="#444444">removeRoute</font>
路由导航守卫
全局路由守卫
router.beforeResolve(to,from,next)
前置路由守卫
router.beforeEach(to, from, next)<br>
to即将要进入的目标
from当前导航正要离开的路由
next,是否可以进入某个具体路由，或者是某个具体路由的路径
后置路由守卫
router.afterEach(to, from)
独享路由守卫
beforeEnter(to,from,next)
组件路由守卫
beforeRouteEnter(to, from, next)：跳转路由渲染组件时触发<br>
beforeRouteUpdate(to, from, next)：跳转路由且组件被复用时触发<br>
beforeRouteLeave(to, from, next)：跳转路由且离开组件时触发
pinia
state<br>
定义公共变量
$patch<br>
$patch函数的形式修改状态数据
$patch对象的形式修改状态数据<br>
getters<br>
相当于component
actions<br>
相当于methods
axios
Promise<br>
状态
<font color="#da1039">pending进行中</font>
<font color="#da1039">fulfilled成功</font>
resolve<br>
then
<font color="#da1039">rejected失败</font>
reject<br>
catch
基本使用
请求方式
get
post
put/patch
delete<br>
传参
params<br>
data
二次封装
请求拦截、响应拦截
xxx.interceptors.request.use((config)=>{<font color="#444444">return config</font>},(err)=>{return Promise.reject(error);},)<br>
xxx.interceptors.response.use()
跨域<br>
什么是跨域
<font color="#0d0b22">跨域:跨域是指浏览器不能执行其他网站的脚本。它是浏览器同源策略造成的，是浏览器对JS实施的安全限制。</font>
如何解决跨域
JSONP
CORS
代理请求
同源策略
<font color="#0d0b22">协议,域名,端口相同，三者有一个不同，即为跨域</font>
防抖与节流
防抖
<font color="#000000">触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间</font>
节流
<font color="#000000">高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率</font><br>
Element-plus
收藏
收藏
职业：暂无
0 条评论
下一页
