掌握teleport组件的使用方式
teleport组件是什么呢?
解释: teleport组件可以将指定的组件渲染到应用外部的其他位置,就好比,子组件,我在父组件注册之后,通过id指定要渲染到哪个页面上,以下是代码例子:
// bounce.vue
//App.vue
总结的来说就是,第一步使用teleport组件就是现在组件内部写好样式,第二步是从指定的页面写一个标签元素指定好id是什么,再回到父组件注册然后用teleport包住子组件然后用to=“指定属性。
掌握Suspense组件使用方式
Suspense组件用于确保组件中的setup函数调用和模版渲染之间的执行顺序,先执行setup后再进行模版渲染。
当组件中的setup写成异步函数形式,代码执行就是倒过来,先渲染模版再执行setup函数咯🔧
{{data}}
[注意] 这个是子组件内部
加载中...
注意点:如果要使用Suspense组件请再网络中设置低速3g可以更好的理解Suspense组件的使用。
掌握transition组件的使用方式
Vue提供了transition 组件让我们执行过渡动画,我们只需要使用transition组件包裹要执行的动画元素即可,执行过渡动画的前提是元素具有创建与销毁的操作。
transition动画
元素被创建时,transition组件会为执行动画的元素添加三个类名,可以通过三个类名为元素添加入场动画
.v-enter-from { opacity: 0 } //元素执行动画的初始样式(动画起点样式)
.v-enter-to {opacity : 1} //元素执行动画的目标样式 (动画终点样式)
.v-enter-active { transition opacity 2s ease-in-out} //可以用于指定元素指定动画类型
当元素被销毁时,transition组件会为执行动画的元素添加三个类名,可以通过这三个类名添加离场的动画样式
.v-leave-from {opacity: 1} //元素执行动画的初始样式(动画起点样式)
.v-leave-to {opacity: 0} //元素执行动画的初始样式(动画起点样式)
.v-leave-active { transition opacity 2s ease-in-out} //可以用于指定元素指定动画类型
如果在页面中有多个要执行动画,而多个元素要执行的动画不同时候,为了对多个元素的动画样式进行区分,在调用transition 组件时需要为它添加 name属性以区分样式类名.
我是transition
.fade-enter-from { }
.fade-enter-from { }
.fade-enter-active { }
.fade-leave-from { }
.fade-leave-from { }
.fade-leave-active { }
[用法注意点] 其实这用法就跟具名插槽类型,如果插槽掌握了transition对你来说也简简单单
transition动画例子如下:
我是transition
.fade-enter-from { opacity:1 }
.fade-enter-from { opacity:0 }
.fade-enter-active { transition:opacity 2s ease-in-out }
.fade-leave-from { opacity:0 }
.fade-leave-from { opacity:1 }
.fade-leave-active { transition:opacity 2s ease-in-out}
在不用全局状态管理库时,应用状态由组件管理,当多个组件需要共享使用同一个应用状态时,应用状态需要通过props或自定义事件在组件之间进行传递,在组件与组件之间关系没有很靠近,手递手的这种传递方式显得特别混杂,使维护变困难
综上所述:我们知道了使用全局状态管理库后就很好的解决了这个问题。
Vuex流程如下:
State: 存储应用状态
Action: 用于执行异步操作,不能直接修改状态(dispatch)
Mutation:用于执行同步操作,修改state中存储的应用状态(commit)
Getter:vuex中的计算属性(store.getters)
Module:模块,对你以上属性拆分到另外一个文件中
在组件开发中可以通过dispatch调用Action 类型的方法执行异步操作,当异步操作执行完成后,在Action方法中可以通过commit调用 mutation 类型方法修改状态,当状态被修改后,视图更新
//在src/store/index里面写
import { createStore } from "vuex";
export default createStore({})
//src/main.js
import store from "./store";
const app = createApp(APP)
app.use(store)
在应用杂图对象中存储 username 状态
export default createStore({
state: {
username:"张三"}
})
{{$store.state.username}}
export default createStore({
getters: {
newUsername(state) {
return state.username + '📀'
}}
})
{{$store.getters.newUsername}}
export default createStore({
mutations: {
updateUsername (state,username) {
state.username = username
}}
})
export default createStore({
actions: {
async getUsername(ctx) {
await sleep(1000)
ctx.commit('updateUsername',"赵喜纳")
}}
})
function sleep(time) {
return new Promise((resolve) => {
setTimeout(() => {
resovle()
},time)})
}
//方式1
//方式2
4.6 module
Vuex 允许开发者通过模块对状态进行拆分,允许开发者将不同功能的状态代码拆分到不同的模块中。
命名空间模块需要在模块对象中添加 namespaced: true
选项。
import { createStore } from 'vuex'
const moduleA = {
namespaced: true,
state () {
return { name: '模块A' }},
getters: {
newName (state) {
return state.name + '😀'
}}
}
const moduleB = {
namespaced: true,
state () {
return { name: '模块B' }},
mutations: {
updateName (state) {
state.name = '我是模块B'
}}
}
export default createStore({
modules: {
a: moduleA,
b: moduleB}
})
{{$store.state['a'].name}} state
{{$store.state['b'].name}} state{{$store.getters['a/newName']}} getters mutations
\