Mit Vue3.0 gewonnene Wissenspunkte (2)

Verwendung von watch

Review watch

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)
     }
   }复制代码

   Nach dem Login kopieren

   Nach dem Login kopieren
   🎜Wir können die Eigenschaften der zu überwachenden Vue-Instanz im watch-Attribut oder über .< /code> 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 $watch</code verwenden >. Wie im folgenden Code gezeigt:🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { ref, watchEffect } from &amp;#39;vue&amp;#39;export default { setup() { const id = ref(&amp;#39;0&amp;#39;) watchEffect(() =&gt; { // 先输出 0 然后两秒后输出 1 console.log(id.value) }) setTimeout(() =&gt; { id.value = &amp;#39;1&amp;#39; }, 2000) } }复制代码</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div></li><li>🎜Funktionsausdruck abhören🎜🎜Zusätzlich zum Abhören von Zeichenfolgen kann der erste Parameter von <code>$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)复制代码

   Nach dem Login kopieren

   Nach dem Login kopieren
   🎜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 api< verwenden können <code>watch🎜

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

Verwendung von watch

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)
  }
}复制代码

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)复制代码

   Nach dem Login kopieren

   Nach dem Login kopieren

   在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)
     }
   }复制代码

   Nach dem Login kopieren

   Nach dem Login kopieren

   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)
        }
      }复制代码

      Nach dem Login kopieren

      现在假如我切换了一下第一个下拉框的数据之后，这时候数据请求已经发出，然后我将这个页面切换到另一个页面，因为请求已经发出，所以我希望在页面离开的时候，可以结束这个请求，防止数据返回后出现异常，这时候就可以使用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()
            })
          })
        }
      }复制代码

      Nach dem Login kopieren

Vue3.0中使用计算属性

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

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

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

   Nach dem Login kopieren

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>复制代码

   Nach dem Login kopieren

   和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
       }
     }
   }复制代码

   Nach dem Login kopieren

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!