js中写的方法都要用export default 抛出
1组件注册
使用
组件命名规则:驼峰式命名
动态组件
关键字: is
2-1creative
创造数据
reactive 和 ref 都是响应式数据
在用 reacive 来创造数据时,需要将return 时 要用 …toRefs(data) 将data里面的数据修改为响应式数据
2-2 ref
获取动态的dom节点 或者组件实例
1 获取普通的dom节点
<div>
<p ref="sendP">今天又是高斯宠武藏的一天</p>
<div>
因为setup 中,dom元素还没有被创建,所以要配合onMounted,才可以获取到节点
import { onMounted,ref} from 'vue'
const sendP = ref(null)
onMounted(()=>{
console.log("sendP.value",sendP.value);
})
打印结果
2 获取子组件的实例
注意:需要在子组件中,在子组件中将要给父组件的数据暴露出去, defineExpose
defineExpose({
msg
})
ref 也可以定义变量
3-1.props
父向子传值
props用defineProps
来声明
props校验
defineProps({
// 基础类型检查
// (给出 `null` 和 `undefined` 值则会跳过任何类型检查)
propA: Number,
// 多种可能的类型
propB: [String, Number],
// 必传,且为 String 类型
propC: {
type: String,
required: true
},
// Number 类型的默认值
propD: {
type: Number,
default: 100
},
// 对象类型的默认值
propE: {
type: Object,
// 对象或数组的默认值
// 必须从一个工厂函数返回。
// 该函数接收组件所接收到的原始 prop 作为参数。
default(rawProps) {
return { message: 'hello' }
}
},
// 自定义类型校验函数
propF: {
validator(value) {
// The value must match one of these strings
return ['success', 'warning', 'danger'].includes(value)
}
},
// 函数类型的默认值
propG: {
type: Function,
// 不像对象或数组的默认,这不是一个工厂函数。这会是一个用来作为默认值的函数
default() {
return 'Default function'
}
}
})
props单项数据流
父组件跟新后,子组件的props都会跟新,不要直接在props中修改数据
操作修改props的两种方式
1 reactive
2 计算属性
3-2-1 祖孙传值 provide/inject
父组件使用
import {provide} from 'vue'
import axios from 'axios'
provide('axios',axios)
子孙组件 接收
import {inject} from 'vue'
let $axios = inject('axios')
3-2$emit子向父传值
子组件1
4路由
router
1.导入
import { useRouter } from 'vue-router'
2.激活
const router = useRouter()
route
1.导入
import { useRoute } from 'vue-router'
2.激活
const route = useRoute()
3.路由传值
3-1 query
3-2 params
4-2vuex
import { useStore } from 'vuex'
const store = useStore()
向 vuex states 中保存数据
store.commit('方法名',data)
5透传
继承合并
如果不希望组件继承属性和方法时 使用 inheritAttrs: false
来禁止
6插槽
具名插槽
7全局挂在与使用
1.全局挂在
app.config.globalProperties.$axios = axios
2.全局使用
import { getCurrentInstance } from 'vue';
const {proxy} = getCurrentInstance()
vue3 全局挂在的方法 在 proxy 中查找 proxy 代替了this
8自定义指令
app.directive
全局挂在自定义指令
// main.js
import Vfixed from ......
app.directive('fixed',Vfixed)
使用
<p v-fixed>啦啦啦</p>
注册一个全局组件
9内置组件
制作基于状态变化的过渡和动画:
Transition
TransitionGroup
keepAlive 可以缓存组件
10vue3
的生命周期
setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method
onBeforeMount() : 组件挂载到节点上之前执行的函数;
此时,dom还没有创建完成
onMounted() : 组件挂载完成后执行的函数;
onBeforeUpdate(): 组件更新之前执行的函数;
onUpdated(): 组件更新完成之后执行的函数;
onBeforeUnmount(): 组件卸载之前执行的函数;
onUnmounted(): 组件卸载完成后执行的函数;
onActivated(): 被包含在 <keep-alive> 中的组件,会多出两个生命周期钩子函数,被激活时执行;
onDeactivated(): 比如从 A 组件,切换到 B 组件,A 组件消失时执行;
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数
vue3的生命周期响应的比vue2的更快
12-1 toRefs响应式数据
将data中的每个属性都执行原始对象响应属性的ref ,使其变为响应式数据
( 这么操作的原因,es6 j解构赋值操作,对一个响应式对象直接解构时,解构后的数据不在有响应式,而toRefs解决了这一个问题)
12-2 ref
ref 定义的都是响应式数据
这里是ref的第二种用法,定义变量,
由ref定义的变量,使用时,必须 .value 来获取
12-3 toRef
创建一个ref 对象 ,其 value 值指向另外一个对象的某个属性,一个ref只能修改一个对象的属性,而toRefs可以修改整个对象
语法 const name = toRef(name,"泽塔“)
因为 toRef 和 toRefs 都会返回一个 ref 对象 所以在 js 中调用他们时,需要使用 .value
13 readyonly 只读复制
复制 data 但只能进行读操作,无法进行写操作
14-1 watch 侦听器
第一个参数 要监听的数值(依赖项)
第二个参数 依赖的数据发送变化后执行的函数
第三个参数 是一个对象
immediate 在创建侦听器时立即触发回调函数,第一次调用时旧值是 undefined
deep 是否开启深度监听
flush 调整回调函数的刷新时机
onTrack/onTrigger 调试侦听器的依赖 ???
关闭 watch
在需要关闭侦听器的地点再次调用侦听器就好了
14-2 watchEffect
消除副作用???
15 vue3+ts实战
一 下载 element-ui
yarn add element-plus
全局注册组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
二 正文
1 defineComponent
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uoWLbNPH-1684060102938)(Img/image-20221201105115249.png)]
2 element-plus 样式穿透
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aMwt2M0U-1684060102938)(Img/image-20221201110135304.png)]
16-input输入框
在获取input 节点后,
inputRef.value.focus() 可以让input输入框自动的获取节点
17 Pinia
安装
yarn add pinia
# 或者使用 npm
npm install pinia
配置根存储
import { createPinia } from 'pinia'
app.use(createPinia())
import { defineStore } from 'pinia'
// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
// 推荐使用 完整类型推断的箭头函数
state: () => {
return {
// 所有这些属性都将自动推断其类型
counter: 0,
name: 'Eduardo',
isAdmin: true,
}
},
getters: {
// 自动将返回类型推断为数字
doubleCount(state) {
return state.counter * 2
},
// 返回类型必须明确设置
doublePlusOne(): number {
return this.counter * 2 + 1
},
},
actions: { // action 是异步操作
increment() {
this.counter++
},
async registerUser(login, password) {
try {
this.userData = await api.post({ login, password })
showTooltip(`Welcome back ${this.userData.name}!`)
} catch (error) {
showTooltip(error)
// 让表单组件显示错误
return error
}
},
},
})
使用
import { storeToRefs } from 'pinia'
export default defineComponent({
setup() {
const store = useStore()
// `name` 和 `doubleCount` 是响应式引用
// 这也会为插件添加的属性创建引用
// 但跳过任何 action 或 非响应式(不是 ref/reactive)的属性
const { name, doubleCount } = storeToRefs(store)
return {
name,
doubleCount
}
},
})
可以在获取后,直接对它进行操作
const store = useStore()
store.counter++
重置
const store = useStore()
store.$reset()
改变状态
有两种方法
1 直接通过 store 在页面中修改
2 使用$patch 方法修改
store.$patch({
counter: store.counter + 1,
name: 'Abalam',
})
替换
1.为新对象来替换 Store 的整个状态
store.$state = { counter: 666, name: 'Paimon' }
2.也可以用pinia
实例的 state
来替换应用程序的整个状态
pinia 实例的 state 来替换应用程序的整个状态
订阅状态
cartStore.$subscribe((mutation, state) => {
// import { MutationType } from 'pinia'
mutation.type // 'direct' | 'patch object' | 'patch function'
// 与 cartStore.$id 相同
mutation.storeId // 'cart'
// 仅适用于 mutation.type === 'patch object'
mutation.payload // 补丁对象传递给 to cartStore.$patch()
// 每当它发生变化时,将整个状态持久化到本地存储
localStorage.setItem('cart', JSON.stringify(state))
})
getters 的访问
可以直接在 store 实例上访问 getter
<script>
export default {
setup() {
const store = useStore()
return { getUserById: store.getUserById }
},
}
</script>
数据持久化
使用 插件
pinia-plugin-persist
下载
pnpm install pinia-plugin-persist --save
mian.ts 配置文件
使用
简单使用
persist 配置
// 开启数据缓存
persist: {
enabled: true,
strategies: [
{
// 自定义名称
key: 'login_store',
// 保存位置,默认保存在sessionStorage
storage: localStorage,
// 指定要持久化的数据,默认所有 state 都会进行缓存,你可以通过 paths 指定要持久化的字段,其他的则不会进行持久化。
paths: ['age'],
},
],
},
e()
return { getUserById: store.getUserById }
},
}
##### 数据持久化
使用 插件
`pinia-plugin-persist`
下载
> pnpm install pinia-plugin-persist --save
mian.ts 配置文件
[外链图片转存中...(img-dwv9GhLj-1684060102939)]
`使用`
简单使用
[外链图片转存中...(img-CChmabf2-1684060102939)]
persist 配置
// 开启数据缓存
persist: {
enabled: true,
strategies: [
{
// 自定义名称
key: ‘login_store’,
// 保存位置,默认保存在sessionStorage
storage: localStorage,
// 指定要持久化的数据,默认所有 state 都会进行缓存,你可以通过 paths 指定要持久化的字段,其他的则不会进行持久化。
paths: [‘age’],
},
],
},