Mit Vue3.0 gewonnene Wissenspunkte (2)

Jeden Tag Überstunden zu machen, ist jeden Tag anstrengend und die Nachfrage kommt wie ein Tiger oder ein Wolf. Die Prüfungsfragen türmten sich wie ein Berg und ich kehrte enttäuscht nach Hause zurück.

Verwandte Lernempfehlungen: Javascript

Vor kurzem habe ich nach der Arbeit Vue3.0-bezogenes Wissen gelernt, obwohl Vue3.0 immer noch rcVersion, aber dies hat keinen Einfluss auf unsere Studie. Der heutige Artikel ist mein vierter Artikel über Vue3.0. Im vorherigen Artikel haben wir erklärt, wie man mit vite und vuecli eine Vue3.0-Entwicklungsumgebung erstellt, und anschließend Vue3 vorgestellt. 0setup, reactive, ref usw. im Code> Der heutige Artikel erklärt hauptsächlich den folgenden Inhalt: Vue3.0相关知识，虽然Vue3.0至今还是rc版，但这并不影响我们去学习。今天这篇文章是我关于Vue3.0的第四篇文章。在前文中我们讲解了如何通过vite和vuecli搭建Vue3.0开发环境，然后介绍了Vue3.0中的setup,reactive,ref等，今天这篇文章主要讲解了以下内容:

1. Vue3.0中使用watch
2. Vue3.0中使用计算属性
3. Vue3.0中使用vue-router
4. Vue3.0中使用vuex

开始本文前，小编提供了一个Vue3.0开发环境，仓库地址为 gitee.com/f_zijun/vue…，欢迎使用。本文首发于公众号【前端有的玩】，这是一个专注于Vue与面试相关的公众号，提升自己的市场竞争力，就在【前端有的玩】。同时点击以下链接即可访问小编关于Vue3.0的其他相关文章

学习Vue3.0,先来了解一下Proxy

使用vite搭建一个Vue3.0学习环境

使用Vue3.0收获的知识点（一）

Vue3.0中使用watch

watch在Vue3.0中并不是一个新的概念，在使用Vue2.x的时候，我们经常会使用watch来监听Vue实例上面的一个表达式或者一个函数计算结果的变化。

回顾Vue2.0中的watch

在Vue2.0中，我们使用watch可以通过下面多种方式去监听Vue实例上面的表达式或者函数计算结果的变化,如下罗列了其中的几种

1. 最常规使用方式

   export default {
     data() {    return {      name: '子君',      info: {        gzh: '前端有的玩'
         }
       }
     },  watch: {
       name(newValue, oldValue) {      console.log(newValue, oldValue)
       },    'info.gzh': {
         handler(newValue, oldValue) {        console.log(newValue, oldValue)
         },      // 配置immediate会在watch之后立即执行
         immediate: true
       }
     }
   }复制代码

   我们可以在watch属性里面配置要监听的Vue实例上面的属性，也可以通过.键路径去监听对象中的某一个属性的变化，也可以通过配置immediate在监听后立即触发，配置deep去深度监听对象里面的属性，不论嵌套层级有多深。

2. 使用$watch监听

   除了常规的watch对象写法之外，Vue实例上面提供了$watch方法，可以通过$watch更灵活的去监听某一个属性的变化。比如这样一个场景，我们有一个表单，然后希望在用户修改表单之后可以监听到表单的数据变化。但是有一个特殊的场景，就是表单的回填数据是异步请求过来的，这时候我们希望在后台请求完数据之后再去监听变化，这时候就可以使用$watch。如下代码所示:

   export default {  methods: {
       loadData() {
         fetch().then(data => {        this.formData = data        this.$watch(          'formData',
             () => {            // formData数据发生变化后会进入此回调函数
             },
             {            deep: true
             }
           )
         })
       }
     }
   }复制代码

3. 监听函数表达式

   除了监听字符串之外，$watch的第一个参数也可以是一个函数，当函数的返回值发生变化之后，触发回调函数

   this.$watch(() => this.name, () => {  // 函数的返回值发生变化，进入此回调函数})复制代码

   上文中就是Vue2.0中我们使用watch的一些常用写法，对于Vue3.0，因为其对Vue2.0做了部分的向下兼容，所以上面的用法在Vue3.0中基本都可以使用，但是Vue3.0一个很大的亮点就是composition API,所以除了Vue2.0中的写法之外，也可以使用componsition api中提供的watch

在Vue3.0中使用watch

在Vue3.0中，除了Vue2.0的写法之外，有两个api可以对数据变化进行监听，第一种是watch,第二种是watchEffect。对于watch,其与Vue2.0中的$watch用法基本是一模一样的，而watchEffect是Vue3.0新提供的api

watch的用法

下面的示例演示了如何使用watch

import { watch, ref, reactive } from 'vue'export default {
  setup() {    const name = ref('子君')    const otherName = reactive({      firstName: '王',      lastName: '二狗'
    })
    watch(name, (newValue, oldValue) => {      // 输出 前端有的玩 子君
      console.log(newValue, oldValue)
    })    // watch 可以监听一个函数的返回值
    watch(      () => {        return otherName.firstName + otherName.lastName
      },
      value => {        // 当otherName中的 firstName或者lastName发生变化时，都会进入这个函数
        console.log(`我叫${value}`)
      }
    )

    setTimeout(() => {
      name.value = '前端有的玩'
      otherName.firstName = '李'
    }, 3000)
  }
}复制代码

watch

watch
1. Verwenden berechneter Eigenschaften in Code>Vue3.0
2. <code>vue-router
3. Wird in Vue3.0 verwendetvuex

Bevor Sie mit diesem Artikel beginnen, stellt der Editor einen Vue3 bereit .0 Entwicklungsumgebung. Die Warehouse-Adresse lautet gitee.com/f_zijun/vue..., Sie können sie gerne verwenden. Dieser Artikel wurde erstmals auf dem öffentlichen Konto [Front-End Youwan] veröffentlicht, einem öffentlichen Konto, das sich auf Vue und Interview zur Verbesserung der Wettbewerbsfähigkeit auf dem Markt konzentriert, gerade in [Front -Ende Etwas spielen]. Klicken Sie gleichzeitig auf den folgenden Link, um auf die anderen verwandten Artikel des Herausgebers zu Vue3.0 zuzugreifen. 🎜🎜Lernen Sie Vue3.0 und lernen Sie zuerst Proxy kennen.🎜🎜Verwenden Sie viteErstellen Sie eine <code>Vue3.0-Lernumgebung🎜🎜Verwenden Sie Vue3 ,0 gewonnene Wissenspunkte (1) 🎜🎜

Verwendung von watch

in Vue3.0🎜 watch Es ist kein neues Konzept in Vue3.0 Bei der Verwendung von Vue2.x verwenden wir häufig watch Um Änderungen zu überwachen im Berechnungsergebnis eines Ausdrucks oder einer Funktion auf der Vue-Instanz. 🎜

Review watch

in Vue2.0 🎜In Vue2.0 In , können wir watch verwenden, um Änderungen in Ausdrücken oder Funktionsberechnungsergebnissen auf Vue-Instanzen auf folgende Weise zu überwachen. Einige davon sind unten aufgeführt🎜

1. 🎜 Die gebräuchlichste Art der Verwendung🎜

   export default {
     setup() {    const name = ref('子君')    const gzh = ref('前端有的玩')
       watch([name, gzh], ([name, gzh], [prevName, prevGzh]) => {      console.log(prevName, name)      console.log(prevGzh, gzh)
       })
   
       setTimeout(() => {
         name.value = '前端有的玩'
         gzh.value = '关注我,一起玩前端'
       }, 3000)
     }
   }复制代码

   🎜Wir können die Eigenschaften der zu überwachenden Vue-Instanz im watch-Attribut oder über . konfigurieren Schlüsselpfad, um Änderungen an einem bestimmten Attribut im Objekt zu überwachen. Sie können auch <code>immediate so konfigurieren, dass es sofort nach der Überwachung ausgelöst wird, und deep, um die Attribute im Objekt gründlich zu überwachen . , egal wie tief die Verschachtelungsebene ist. 🎜
2. 🎜Verwenden Sie $watch zum Überwachen🎜🎜Zusätzlich zur herkömmlichen watch-Objektschreibmethode, der Vue-Instanz Bietet die Methode $watch, mit der Sie Änderungen in einem bestimmten Attribut mithilfe von $watch flexibler überwachen können. In diesem Szenario haben wir beispielsweise ein Formular und hoffen, die Datenänderungen im Formular überwachen zu können, nachdem der Benutzer das Formular geändert hat. Es gibt jedoch ein spezielles Szenario, bei dem die Backfill-Daten des Formulars asynchron angefordert werden. Zu diesem Zeitpunkt möchten wir die Änderungen nach der Anforderung der Daten im Hintergrund überwachen. In diesem Fall können wir $watchverwenden >. Wie im folgenden Code gezeigt:🎜

   import { ref, watchEffect } from 'vue'export default {
     setup() {    const id = ref('0')
       watchEffect(() => {      // 先输出 0 然后两秒后输出 1
         console.log(id.value)
       })
   
       setTimeout(() => {
         id.value = '1'
       }, 2000)
     }
   }复制代码

3. 🎜Funktionsausdruck abhören🎜🎜Zusätzlich zum Abhören von Zeichenfolgen kann der erste Parameter von $watch auch eine Funktion sein Funktion Nachdem sich der Rückgabewert geändert hat, wird die Rückruffunktion ausgelöst 🎜

   const unwatch = this.$watch('name',() => {})// 两秒后停止监听setTimeout(()=> {
     unwatch()
   }, 2000)复制代码

   🎜Die oben genannten sind einige gängige Möglichkeiten, wie wir watch in Vue2.0 verwenden. Für Vue3.0 , da es teilweise abwärtskompatibel mit Vue2.0 ist, sodass die obige Verwendung grundsätzlich in Vue3.0 verwendet werden kann, aber Ein großes Highlight von Vue3.0 ist die composition API, sodass Sie zusätzlich zur Schreibmethode in Vue2.0 auch die composition apiwatch🎜

bereitgestellt in /code> wird in Vue3.0 >watch

🎜In Vue3.0 gibt es zusätzlich zur Schreibmethode von Vue2.0 zwei apiSie kann Datenänderungen überwachen. Der erste ist watch und der zweite ist watchEffect. Für watch ist die Verwendung grundsätzlich dieselbe wie für $watch in Vue2.0, während watchEffect Vue3.0Neu bereitgestellte api🎜

Verwendung von watch

🎜Das folgende Beispiel zeigt, wie watch verwendet wird 🎜

export default {
  setup() {    const id = ref('0')    const unwatch = watchEffect(() => {      // 仅仅输出0
      console.log(id.value)
    })

    setTimeout(() => {
      id.value = '1'
    }, 2000)    // 1秒后取消watch，所以上面的代码只会输出0
    setTimeout(() => {
      unwatch()
    }, 1000)
  }
}复制代码

🎜watch Zusätzlich zur Überwachung eines einzelnen Werts oder Funktionsrückgabewerts können auch mehrere Datenquellen gleichzeitig überwacht werden, wie im folgenden Code gezeigt:🎜

export default {
  setup() {    const name = ref('子君')    const gzh = ref('前端有的玩')
    watch([name, gzh], ([name, gzh], [prevName, prevGzh]) => {      console.log(prevName, name)      console.log(prevGzh, gzh)
    })

    setTimeout(() => {
      name.value = '前端有的玩'
      gzh.value = '关注我,一起玩前端'
    }, 3000)
  }
}复制代码

watchEffect的用法

watchEffect的用法与watch有所不同，watchEffect会传入一个函数，然后立即执行这个函数，对于函数里面的响应式依赖会进行监听，然后当依赖发生变化时，会重新调用传入的函数，如下代码所示:

import { ref, watchEffect } from 'vue'export default {
  setup() {    const id = ref('0')
    watchEffect(() => {      // 先输出 0 然后两秒后输出 1
      console.log(id.value)
    })

    setTimeout(() => {
      id.value = '1'
    }, 2000)
  }
}复制代码

1. 停止执行

   Vue2.0中的$watch会在调用的时候返回一个函数，执行这个函数可以停止watch，如下代码所示

   const unwatch = this.$watch('name',() => {})// 两秒后停止监听setTimeout(()=> {
     unwatch()
   }, 2000)复制代码

   在Vue3.0中，watch与watchEffect同样也会返回一个unwatch函数，用于取消执行，比如下面代码所示

   export default {
     setup() {    const id = ref('0')    const unwatch = watchEffect(() => {      // 仅仅输出0
         console.log(id.value)
       })
   
       setTimeout(() => {
         id.value = '1'
       }, 2000)    // 1秒后取消watch，所以上面的代码只会输出0
       setTimeout(() => {
         unwatch()
       }, 1000)
     }
   }复制代码

   2. 清除副作用

      想象一下这样的一个场景，界面上面有两个下拉框，第二个下拉框的数据是根据第一个下拉框的数据联动的，当第一个下拉框数据发生变化后，第二个下拉框的数据会通过发送一个网络请求进行获取。这时候我们可以通过watchEffect来实现这个功能，比如像下面代码这样

      import { ref, watchEffect } from 'vue'function loadData(id) {  return new Promise(resolve => {
          setTimeout(() => {
            resolve(        new Array(10).fill(0).map(() => {          return id.value + Math.random()
              })
            )
          }, 2000)
        })
      }export default {
        setup() {    // 下拉框1 选中的数据
          const select1Id = ref(0)    // 下拉框2的数据
          const select2List = ref([])
          watchEffect(() => {      // 模拟请求
            loadData(select1Id).then(data => {
              select2List.value = data        console.log(data)
            })
          })    
          // 模拟数据发生变化
          setInterval(() => {
            select1Id.value = 1
          }, 3000)
        }
      }复制代码

      现在假如我切换了一下第一个下拉框的数据之后，这时候数据请求已经发出，然后我将这个页面切换到另一个页面，因为请求已经发出，所以我希望在页面离开的时候，可以结束这个请求，防止数据返回后出现异常，这时候就可以使用watchEffect为第一个回调函数传入的入参来处理这个情况，如下代码所示

      function loadData(id, cb) {  return new Promise(resolve => {    const timer = setTimeout(() => {
            resolve(        new Array(10).fill(0).map(() => {          return id.value + Math.random()
              })
            )
          }, 2000)
          cb(() => {
            clearTimeout(timer)
          })
        })
      }export default {
        setup() {    // 下拉框1 选中的数据
          const select1Id = ref(0)    // 下拉框2的数据
          const select2List = ref([])
          watchEffect(onInvalidate => {      // 模拟请求
            let cancel = undefined
            // 第一个参数是一个回调函数，用于模拟取消请求，关于取消请求，可以了解axios的CancelToken
            loadData(select1Id, cb => {
              cancel = cb
            }).then(data => {
              select2List.value = data        console.log(data)
            })
            onInvalidate(() => {
              cancel && cancel()
            })
          })
        }
      }复制代码

Vue3.0中使用计算属性

想一想在Vue2.0中我们一般会用计算属性做什么操作呢？我想最常见的就是当模板中有一个复杂计算的时候，可以先使用计算属性进行计算，然后再在模板中使用，实际上，Vue3.0中的计算属性的作用和Vue2.0的作用基本是一样的。

1. 在Vue2.0中使用计算属性

     computed: {
       getName() {      const { firstName, lastName } = this.info      return firstName + lastName
       }
     },复制代码

2. 在Vue3.0中使用计算属性

   <template>  <p class="about">
       <h1>{{ name }}</h1>
     </p></template>
   <script>
   import { computed, reactive } from &#39;vue&#39;
   
   export default {
     setup() {
       const info = reactive({
         firstName: &#39;王&#39;,
         lastName: &#39;二狗&#39;
       })
   
       const name = computed(() => info.firstName + info.lastName)
   
       return {
         name
       }
     }
   }
   </script>复制代码

   和Vue2.0一样，Vue3.0的计算属性也可以设置getter和setter，比如上面代码中的计算属性，只设置了getter,即加入cumputed传入的参数是一个函数，那么这个就是getter,假如要设置setter,需要像下面这样去写

   export default {
     setup() {    const info = reactive({      firstName: '王',      lastName: '二狗'
       })    const name = computed({      get: () => info.firstName + '-' + info.lastName,
         set(val) {        const names = val.split('-')
           info.firstName = names[0]
           info.lastName = names[1]
         }
       })    return {
         name
       }
     }
   }复制代码

Vue3.0中使用vue-router

初始化vue-router

在Vue2.0中我们使用vue-router的时候，会通过new VueRouter的方式去实现一个VueRouter实例，就像下面代码这样

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const router = new VueRouter({  mode: 'history',  routes: []
})export default router复制代码

但到了Vue3.0,我们创建VueRouter的实例发生了一点点变化，就像Vue3.0在main.js中初始化Vue实例需要像下面写法一样

import { createApp } from 'vue'createApp(App).$mount('#app')复制代码

vue-router也修改为了这种函数的声明方式

import { createRouter, createWebHashHistory } from 'vue-router'const router = createRouter({  // vue-router有hash和history两种路由模式，可以通过createWebHashHistory和createWebHistory来指定
  history: createWebHashHistory(),
  routes
})

router.beforeEach(() => {
  
})

router.afterEach(() => {
  
})export default router复制代码

然后在main.js中，通过

 createApp(App).use(router)复制代码

来引用到Vue中

在setup中使用vue-router

在Vue2.0中，我们通过this.$route可以获取到当前的路由，然后通过this.$router来获取到路由实例来进行路由跳转，但是在setup中，我们是无法拿到this的，这也意味着我们不能像Vue2.0那样去使用vue-router, 此时就需要像下面这样去使用

import { useRoute, useRouter } from 'vue-router'export default {
  setup() {    // 获取当前路由
    const route = useRoute()    // 获取路由实例
    const router = useRouter()    // 当当前路由发生变化时，调用回调函数
    watch(() => route, () => {      // 回调函数
    }, {      immediate: true,      deep: true
    })    
    // 路由跳转
    function getHome() {
      router.push({        path: '/home'
      })
    }    
    return {
      getHome()
    }
  }
}复制代码

上面代码我们使用watch来监听路由是否发生变化，除了watch之外，我们也可以使用vue-router提供的生命周期函数

import { onBeforeRouteUpdate, useRoute } from 'vue-router'export default {
  setup() {
    onBeforeRouteUpdate(() => {      // 当当前路由发生变化时，调用回调函数
    })
  }
}复制代码

除了onBeforeRouteUpdate之外，vue-router在路由离开的时候也提供了一个生命周期钩子函数

onBeforeRouteLeave(() => {   console.log('当当前页面路由离开的时候调用')
})复制代码

Vue3.0中使用vuex

其实vuex在Vue3.0中的使用方式和vue-router基本是一致的

初始化vuex

首先新建store/index.js,然后添加如下代码

import { createStore } from 'vuex'export default createStore({  state: {},  mutations: {},  actions: {}
})复制代码

然后在main.js中，通过以下方式使用

 createApp(App).use(store)复制代码

在setup中使用vuex

和useRouter一样，vuex也提供了useStore供调用时使用,比如下面这段代码

import { useStore } from 'vuex'export default {
  setup() {
    const store = useStore()
    const roleMenus = store.getters['roleMenus']
    return {
      roleMenus
    }
  }
}复制代码

其余的使用方式基本和Vue2.0中的用法是一致的，大家具体可以参考vuex官方文档

Vue3.0中的生命周期钩子函数

在前文中，我们说到Vue3.0是兼容一部分Vue2.0的，所以对于Vue2.0的组件写法，生命周期钩子函数并未发生变化，但是假如你使用的是componsition api,那么就需要做一部分调整

1. 取消beforeCreate与created

   在使用componsition api的时候，其实setup就代替了beforeCreate与created,因为setup就是组件的实际入口函数。

2. beforeDestroy与destroyed 改名了

   在setup中，beforeDestroy更名为onBeforeUnmount,destroyed更名为onUnmounted

3. 将生命周期函数名称变为on+XXX，比如mounted变成了onMounted,updated变成了onUpdated

在setup中使用生命周期函数的方式

setup() {
    onMounted(() => {      console.log('mounted!')
    })
    onUpdated(() => {      console.log('updated!')
    })
    onUnmounted(() => {      console.log('unmounted!')
    })
  }复制代码

实际用法与Vue2.0基本是一致的，只是写法发生了变化，所以学习成本是很低的。

总结

这是小编关于Vue3.0的第四篇文章，每一篇文章都是自己在学习中做的一些总结。小编整理了一个vue3.0的开发环境，仓库地址为 gitee.com/f_zijun/vue…，内部集成了typescript,eslint,vue-router,vuex,ant desigin vue等，希望可以帮到正在学习Vue3.0的你，同时关注公众号【前端有的玩】，带给你不一样的惊喜。喜欢本文，可以给小编一个赞哦。

结语

不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高

Das obige ist der detaillierte Inhalt vonMit Vue3.0 gewonnene Wissenspunkte (2). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!