Vue一些你不知道的东西

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> 

\