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