Maison > Article > interface Web > Points de connaissances acquis avec Vue3.0 (2)

Points de connaissances acquis avec Vue3.0 (2)

coldplay.xixiavant: 2020-09-19 09:26:112364parcourir

Faire des heures supplémentaires chaque jour est chargé et les demandes arrivent comme des tigres et des loups. Les questions du test se sont accumulées comme une montagne et je suis rentré chez moi déçu.

Recommandations d'apprentissage connexes : javascript

J'ai étudié Vue3.0 connaissances connexes récemment après le travail, bien que Vue3.0 oui jusqu'à présent Il s'agit toujours de la version rc, mais cela n'affecte pas notre étude. L'article d'aujourd'hui est mon quatrième article sur Vue3.0. Dans l'article précédent, nous avons expliqué comment créer l'environnement de développement vite via vuecli et Vue3.0, puis avons présenté les Vue3.0, setup, reactive, etc. dans l'article d'aujourd'hui. explique principalement ce qui suit : ref

utilisé dans Vue3.0watch
utilisé des propriétés calculées dans Vue3.0
utilisé dans Vue3.0vue-router Utilisez
Vue3.0vuex

Avant de commencer cet article, l'éditeur propose un environnement de développement L'adresse de l'entrepôt est gitee.com/f_zijun. /vue..., Bienvenue. Cet article a été publié pour la première fois sur le compte public [Front-end Youdewan], qui est un compte public axé sur Vue3.0 et Vue liés, afin d'améliorer sa compétitivité sur le marché, uniquement sur [Front-end Youdewan]. En même temps, cliquez sur le lien suivant pour accéder aux autres articles connexes de l'éditeur sur 面试Vue3.0

Apprendre Vue3.0, apprenons d'abord Proxy

Utilisez

pour créer unviteEnvironnement d'apprentissageVue3.0

Points de connaissances acquis grâce à l'utilisation de Vue3.0 (1)

Utilisé dans`Vue3.0watch`

watch n'est pas un concept nouveau lors de l'utilisation de Vue3.0, nous utilisons souvent Vue2.x pour surveiller les changements dans une expression ou le résultat d'un calcul de fonction sur l'instance watch. Vue

Revue de

`Vue2.0watch` dans

Dans

, nous pouvons utiliser Vue2.0 pour surveiller les expressions ou fonctions sur l'instance watch des manières suivantes Les changements dans les résultats du calcul sont répertoriés ci-dessous : Vue

La façon la plus courante de l'utiliser
```
export default {
  data() {    return {      name: &#39;子君&#39;,      info: {        gzh: &#39;前端有的玩&#39;
      }
    }
  },  watch: {
    name(newValue, oldValue) {      console.log(newValue, oldValue)
    },    &#39;info.gzh&#39;: {
      handler(newValue, oldValue) {        console.log(newValue, oldValue)
      },      // 配置immediate会在watch之后立即执行
      immediate: true
    }
  }
}复制代码
```
Nous pouvons configurer le
à surveiller dans l'attribut watch Pour les attributs sur l'instance, vous pouvez également utiliser le chemin de clé Vue pour surveiller les modifications d'un certain attribut dans l'objet. Vous pouvez également configurer . pour qu'il se déclenche immédiatement après la surveillance et configurer immediate pour surveiller en profondeur les attributs. dans l'objet. Quelle est la profondeur du niveau d'imbrication. deep
Utilisez
pour surveiller $watch
En plus de la méthode conventionnelle d'écriture d'objet
, l'instance watch fournit la méthode Vue, qui peut être adopté $watchPlus de flexibilité pour surveiller les changements dans un certain attribut. Par exemple, dans ce scénario, nous avons un formulaire et nous espérons surveiller les modifications des données dans le formulaire une fois que l'utilisateur a modifié le formulaire. Mais il existe un scénario spécial, c'est-à-dire que les données de remplissage du formulaire sont demandées de manière asynchrone. À ce stade, nous souhaitons surveiller les modifications après avoir demandé les données en arrière-plan. Dans ce cas, nous pouvons utiliser $watch. Comme le montre le code suivant : $watch
```
export default {  methods: {
    loadData() {
      fetch().then(data => {        this.formData = data        this.$watch(          &#39;formData&#39;,
          () => {            // formData数据发生变化后会进入此回调函数
          },
          {            deep: true
          }
        )
      })
    }
  }
}复制代码
```
Expression de fonction d'écoute
En plus d'écouter les chaînes, le premier paramètre de
peut également être une fonction When. Une fois la valeur de retour de la fonction modifiée, la fonction de rappel $watch
```
this.$watch(() => this.name, () => {  // 函数的返回值发生变化，进入此回调函数})复制代码
```
est déclenchée. Voici quelques façons courantes d'écrire
dans Vue2.0, elle apporte quelques modifications à . Il est rétrocompatible, donc l'utilisation ci-dessus peut essentiellement être utilisée dans watch, mais un gros point fort de Vue3.0 est Vue2.0, donc en plus de la méthode d'écriture dans Vue3.0, vous pouvez également l'utiliser. dans Vue3.0 Le composition APIVue2.0componsition apiwatch
fourni est utilisé dans

`Vue3.0` est utilisé dans `watch`. de

, il y en a deux

qui peuvent surveiller les changements de données, le premier est Vue3.0 et le second est Vue2.0. Pour api, son utilisation est fondamentalement la même que celle de watch dans watchEffect, et watch est la nouvelle utilisation Vue2.0$watchwatchEffect de watchVue3.0api L'exemple suivant montre comment utiliser

import { watch, ref, reactive } from &#39;vue&#39;export default {
  setup() {    const name = ref(&#39;子君&#39;)    const otherName = reactive({      firstName: &#39;王&#39;,      lastName: &#39;二狗&#39;
    })
    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 = &#39;前端有的玩&#39;
      otherName.firstName = &#39;李&#39;
    }, 3000)
  }
}复制代码

en plus de surveiller une seule valeur ou une valeur de retour de fonction, vous pouvez également surveiller plusieurs sources de données en même temps, comme indiqué dans le code suivant : watch

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

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

watchEffect的用法

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

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

    setTimeout(() => {
      id.value = &#39;1&#39;
    }, 2000)
  }
}复制代码

停止执行

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

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

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

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

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

清除副作用

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

import { ref, watchEffect } from &#39;vue&#39;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的作用基本是一样的。

在Vue2.0中使用计算属性

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

在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: &#39;王&#39;,      lastName: &#39;二狗&#39;
    })    const name = computed({      get: () => info.firstName + &#39;-&#39; + info.lastName,
      set(val) {        const names = val.split(&#39;-&#39;)
        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 &#39;vue&#39;import VueRouter from &#39;vue-router&#39;Vue.use(VueRouter)const router = new VueRouter({  mode: &#39;history&#39;,  routes: []
})export default router复制代码

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

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

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

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

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

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

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

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

`Vue3.0`中使用`vuex`

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

初始化`vuex`

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

import { createStore } from &#39;vuex&#39;export default createStore({  state: {},  mutations: {},  actions: {}
})复制代码

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

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

在`setup`中使用`vuex`

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

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

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

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

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

取消beforeCreate与created

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

在setup中，beforeDestroy更名为onBeforeUnmount,destroyed更名为onUnmounted
将生命周期函数名称变为on+XXX，比如mounted变成了onMounted,updated变成了onUpdated

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

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

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

总结

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

结语

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Rencontrer AjaxArticle suivant：Rencontrer Ajax

Articles Liés

Voir plus

Points de connaissances acquis avec Vue3.0 (2)

Utilisé dansVue3.0watch

Vue2.0watch dans

Vue3.0 est utilisé dans watch. de

watchEffect的用法

Vue3.0中使用计算属性

Vue3.0中使用vue-router

初始化vue-router

在setup中使用vue-router

Vue3.0中使用vuex

初始化vuex

在setup中使用vuex

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

总结

结语

Articles Liés

Utilisé dans`Vue3.0watch`

`Vue2.0watch` dans

`Vue3.0` est utilisé dans `watch`. de

`Vue3.0`中使用计算属性

`Vue3.0`中使用`vue-router`

初始化`vue-router`

在`setup`中使用`vue-router`

`Vue3.0`中使用`vuex`

初始化`vuex`

在`setup`中使用`vuex`