• Vue一些你不知道的东西


    Vue3知识点


    1.teleport组件

    掌握teleport组件的使用方式

    teleport组件是什么呢?

    解释: teleport组件可以将指定的组件渲染到应用外部的其他位置,就好比,子组件,我在父组件注册之后,通过id指定要渲染到哪个页面上,以下是代码例子:

    // bounce.vue
     
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    //App.vue
    
    
     
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    
    
    • 1
    • 2

    总结的来说就是,第一步使用teleport组件就是现在组件内部写好样式,第二步是从指定的页面写一个标签元素指定好id是什么,再回到父组件注册然后用teleport包住子组件然后用to=“指定属性。


    2.Suspense组件

    掌握Suspense组件使用方式

    Suspense组件用于确保组件中的setup函数调用和模版渲染之间的执行顺序,先执行setup后再进行模版渲染。

    当组件中的setup写成异步函数形式,代码执行就是倒过来,先渲染模版再执行setup函数咯🔧

     
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    [注意]  这个是子组件内部

    
     
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    
    
     
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    注意点:如果要使用Suspense组件请再网络中设置低速3g可以更好的理解Suspense组件的使用。


    3.过渡动画

    掌握transition组件的使用方式

    Vue提供了transition 组件让我们执行过渡动画,我们只需要使用transition组件包裹要执行的动画元素即可,执行过渡动画的前提是元素具有创建与销毁的操作。

     transition动画  

    • 1
    • 2
    • 3
    • 4

    元素被创建时,transition组件会为执行动画的元素添加三个类名,可以通过三个类名为元素添加入场动画

    .v-enter-from { opacity: 0 } //元素执行动画的初始样式(动画起点样式)
    ​
    .v-enter-to {opacity : 1} //元素执行动画的目标样式 (动画终点样式)
    ​
    .v-enter-active { transition opacity 2s ease-in-out} //可以用于指定元素指定动画类型 
    
    • 1
    • 2
    • 3
    • 4
    • 5

    当元素被销毁时,transition组件会为执行动画的元素添加三个类名,可以通过这三个类名添加离场的动画样式

    .v-leave-from {opacity: 1} //元素执行动画的初始样式(动画起点样式)
    .v-leave-to {opacity: 0} //元素执行动画的初始样式(动画起点样式)
    .v-leave-active { transition opacity 2s ease-in-out} //可以用于指定元素指定动画类型 
    
    • 1
    • 2
    • 3

    如果在页面中有多个要执行动画,而多个元素要执行的动画不同时候,为了对多个元素的动画样式进行区分,在调用transition 组件时需要为它添加 name属性以区分样式类名.

     我是transition  

    • 1
    • 2
    • 3
    • 4
    .fade-enter-from { }
    .fade-enter-from { }
    .fade-enter-active { }
    ​
    .fade-leave-from { }
    .fade-leave-from { }
    .fade-leave-active { } 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    [用法注意点]  其实这用法就跟具名插槽类型,如果插槽掌握了transition对你来说也简简单单

    transition动画例子如下:

     我是transition  

    • 1
    • 2
    • 3
    • 4
    • 5
     
    
    • 1
    • 2
    • 3
    • 4
    • 5
    .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} 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    4.Vuex状态管理

    在不用全局状态管理库时,应用状态由组件管理,当多个组件需要共享使用同一个应用状态时,应用状态需要通过props或自定义事件在组件之间进行传递,在组件与组件之间关系没有很靠近,手递手的这种传递方式显得特别混杂,使维护变困难

    综上所述:我们知道了使用全局状态管理库后就很好的解决了这个问题。


    Vuex流程如下:

    State: 存储应用状态

    Action: 用于执行异步操作,不能直接修改状态(dispatch)

    Mutation:用于执行同步操作,修改state中存储的应用状态(commit)

    Getter:vuex中的计算属性(store.getters)

    Module:模块,对你以上属性拆分到另外一个文件中

    在组件开发中可以通过dispatch调用Action 类型的方法执行异步操作,当异步操作执行完成后,在Action方法中可以通过commit调用 mutation 类型方法修改状态,当状态被修改后,视图更新

    4.1.创建Store

    //在src/store/index里面写
    import { createStore } from "vuex";
    export default createStore({}) 
    
    • 1
    • 2
    • 3
    //src/main.js
    import store from "./store";
    const app = createApp(APP)
    app.use(store) 
    
    • 1
    • 2
    • 3
    • 4

    4.2 State

    在应用杂图对象中存储 username 状态

    export default createStore({
      state: {
        username:"张三"}
    }) 
    
    • 1
    • 2
    • 3
    • 4
     
    
    • 1
    • 2
     
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    4.3 getters

    export default createStore({
      getters: {
        newUsername(state) {
          return state.username + '📀'
      }}
    }) 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
     
    
    • 1
    • 2
     
    
    • 1
    • 2
    • 3
    • 4
    • 5

    4.4 mutations

    export default createStore({
      mutations: {
        updateUsername (state,username) {
          state.username = username
      }}
    }) 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
     
    
    • 1
    • 2
    • 3
    • 4

    4.5 actions

    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
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    //方式1
    ​
    
    ​
    //方式2
    
     
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    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}
    }) 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
     
    
    • 1
    • 2
    • 3
    • 4

    \

  • 相关阅读:
    开源七轴myArm协作机械臂正逆运动学技术讲解
    keep-alive缓存,三级路由不生效
    SpringMVC 02
    QJsonParseError::errorString() == “unterminated object“
    Handler
    Power BI简介
    Unity自定义Timeline总结
    cmd暂停命令pause
    2022.11.28总结
    Python Cartopy地图投影【3】
  • 原文地址:https://blog.csdn.net/pfourfire/article/details/126478841