Vue一些你不知道的东西

原创

CRMEB商城源码

修改于 2022-06-28 14:08:11

3980

修改于 2022-06-28 14:08:11

文章被收录于专栏：crmeb

Vue3知识点

1.teleport组件

掌握teleport组件的使用方式

teleport组件是什么呢？

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

// bounce.vue
<template>
  <div class="wrapper">
    <div class="content">
      <a class="close" href="javascript:">关闭</a>
    </div>
  </div>
</template>

<script>
    export default {
      name:"Bounce"
    }

</script>

<style lang="less">

  .wrapper {
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.4);
    .content {
      width: 660px;
      height:400px;
      background:white;
      position:absolute;
      left:50%;
      top:50%;
      transform:tanslate(-50%,-50%)
        .close {
          position:absolute;
          right:10px;
          top:10px;
          color:#999;
          text-color:none
      }
    }
  }

</style>

//App.vue
<!-- App.vue -->
<template>
  <teleport to="#Bounce"> 
    <Modal />
  </teleport>
</template>
<script>
import Bounce from "./components/Bounce.vue";
export default {
  components: { Bounce },
  name: "App",
};
</script>

<!-- index.html -->
<div id="Bounce"></div>

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

2.Suspense组件

掌握Suspense组件使用方式

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

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

<template> <pre>{{data}}</pre> </template>

<script>
  import axios from "axios";
  export default {
    name:"posts-data",
    async setup() {
      let response = await axios.get("https://jsonplaceholder.typicode.com/posts");
      return {data:response.data}
    }
  }
</script>

注意这个是子组件内部

<! -- App.uve -- >
<template>
  <Suspense>
    <Postsdata />
  </Suspense>
</template>

<script>
  import postsdata from "./components/Posts-data.vue"
  export default {
    components: {postsdata},
    name:"App"
  }
</script>

<!-- App.vue -->
<template>
  <Suspense>
    <template v-slot:default><Postsdata /></template>
    <template v-slot:fallback>加载中...</template>
  </Suspense>
</template>
<script>
import Postsdata from "./components/Posts-data.vue";
export default {
  components: { Postsdata },
  name: "App",
};
</script>

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

3.过渡动画

掌握transition组件的使用方式

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

<transition>
  <h1>
    transition动画
  </h1>
</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 name="fade">
  <h1>
    我是transition
  </h1>
</transition>

.fade-enter-from { }
.fade-enter-from { }
.fade-enter-active { }

.fade-leave-from { }
.fade-leave-from { }
.fade-leave-active { }

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

transition动画例子如下：

<transition name="fade">
  <h2 v-if="show">
    我是transition
  </h2>
</transition>
<butto @click="show = !show"></butto>

<script>
  export default {
    setup() {
      const show = ref(false)
    }
  }
</script>

.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  }

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({})

//src/main.js
import store from "./store";
const app = createApp(APP)
app.use(store)

4.2 State

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

export default createStore({
  state: {
    username:"张三"
  }
})

<template>
  {{$store.state.username}}
</template>

<script>
  import { useStore } from "vuex"
  export default {
    setup() {
      const store = useStore()
      console.log(store.state.username)
    }
  }
</script>

4.3 getters

export default createStore({
  getters: {
    newUsername(state) {
      return state.username + '📀'
    }
  }
})

<template>
  {{$store.getters.newUsername}}
</template>

<script>
  export default {
    setup() {
      console.log(store.getters.newUsername)
    }
  }
</script>

4.4 mutations

export default createStore({
  mutations: {
    updateUsername (state,username) {
      state.username = username
    }
  }
})

<template>
  <button @click="$store.commit('updateUsername','李四')">
    点我改名
  </button>
</template>

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

<template>
  <button @click="$store.dispatch('getUsername')">
    action点我

  </button>
</template>

//方式2
<template>
  <button @click="onClickHandler">button</button>
</template>
<script>
export default {
  setup () {
    const onClickHandler = () => {
      store.dispatch('getUsername')
    }
    return { onClickHandler }
  }
}
</script>

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
  }
})

<template>
  {{$store.state['a'].name}} state 
  {{$store.state['b'].name}} state
  
  {{$store.getters['a/newName']}} getters
  <button @click="$store.commit('b/updateName')">update moduleb</button> mutations
</template>

源码附件已经打包好上传到百度云了，大家自行下载即可～

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27

提取码: yu27

百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～

开源地址

码云地址：

http://github.crmeb.net/u/defu

Github 地址：

http://github.crmeb.net/u/defu

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。