Vue3.0 を使用して得た知識ポイント (2)

# 毎日残業して毎日忙しく、需要は虎か狼のように来ます。試験問題は山のように積まれて、がっかりして帰ってきました。

関連学習の推奨事項: javascript

最近、Vue3.0 関連の知識を勉強しています。 work 、Vue3.0 はまだ rc バージョンですが、これは私たちの研究には影響しません。今日の記事は Vue3.0 に関する記事の 4 回目です。前回の記事では、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 と Interview に焦点を当てた公開アカウントである [Front-end Youdewan] で最初に公開されました。終わりよーで】プレイ】。同時に、次のリンクをクリックして、Vue3.0

Vue3.0 に関するエディターの他の関連記事にアクセスします。Vue3.0 を学ぶには、まず Proxy

# について学びましょう。 ##使用方法

vite

Vue3.0 学習環境を構築する

Vue3.0 を使用して得られる知識ポイント (1)

Vue3.0

での watch

watch

の使用は、Vue3.0 における新しい概念ではありません。 # When ##Vue2.x を使用する場合、watch を使用して、Vue インスタンス上の式または関数の計算結果の変更を監視することがよくあります。 Reviewwatch

Vue2.0 では watch

式や関数の計算結果の変化を監視できます次の複数のメソッドを使用して

Vue インスタンスにアクセスします。以下にそのいくつかのリストを示します。最も一般的な使用方法

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
1. プロパティで監視されるように

   Vue

   インスタンスのプロパティを構成するか、

   . キー パスを介して特定の属性の変更を監視することができます。ネスト レベルがどれほど深くても、immediate を設定し、deep を設定してオブジェクト内のプロパティを深く監視することで、監視直後にオブジェクトをトリガーすることもできます。 $watch

   を使用して監視
2. 従来の

   watch オブジェクトの記述方法に加えて、Vue

   $watch メソッドがインスタンスで提供されており、これを使用して特定の属性の変更をより柔軟に監視できます。たとえば、このシナリオではフォームがあり、ユーザーがフォームを変更した後のフォーム内のデータの変更を監視したいと考えています。ただし、フォームのバックフィル データが非同期でリクエストされるという特別なシナリオがあります。この時点では、バックグラウンドでデータをリクエストした後の変更を監視したいと考えています。この場合、$watch を使用できます。 。次のコードに示すように:

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

   Listening 関数式リスニング文字列に加えて、$watch
   の最初のパラメータも使用できます。これは関数です。関数の戻り値が変化すると、コールバック関数がトリガーされます。

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

3. 上記は、

   Vue2.0 で使用する一般的な記述方法です。

   ,

   Vue3.0 の場合、Vue2.0

   と部分的に下位互換性があるため、上記の使用法は基本的に

   Vue3.0 で使用できます。ただし、Vue3.0 の大きなハイライトは composition API です。そのため、Vue2.0 の記述方法に加えて、 を使用することもできます。 api で提供されているコンポーネント watch は Vue3.0watch

   # で使用されます
#Vue3.0

では、

Vue2.0 の記述方法に加えて、データの変更を監視できる api が 2 つあります。 ##watch、2 つ目は

watchEffect

です。 watch の場合、その使用法は基本的に Vue2.0 の $watch と同じですが、watchEffect は Vue3.0 です。 新しく提供されたapiwatchの使用法次の例は、watch<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import { watch, ref, reactive } from &amp;#39;vue&amp;#39;export default { setup() { const name = ref(&amp;#39;子君&amp;#39;) const otherName = reactive({ firstName: &amp;#39;王&amp;#39;, lastName: &amp;#39;二狗&amp;#39; }) watch(name, (newValue, oldValue) =&gt; { // 输出 前端有的玩 子君 console.log(newValue, oldValue) }) // watch 可以监听一个函数的返回值 watch( () =&gt; { return otherName.firstName + otherName.lastName }, value =&gt; { // 当otherName中的 firstName或者lastName发生变化时，都会进入这个函数 console.log(`我叫${value}`) } ) setTimeout(() =&gt; { name.value = &amp;#39;前端有的玩&amp;#39; otherName.firstName = &amp;#39;李&amp;#39; }, 3000) } }复制代码</pre><div class="contentsignin">ログイン後にコピー</div></div> ##の使用方法を示しています。 #watch次のコードに示すように、単一の値または関数の戻り値を監視するだけでなく、複数のデータ ソースを同時に監視することもできます。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>export default { setup() { const name = ref(&amp;#39;子君&amp;#39;) const gzh = ref(&amp;#39;前端有的玩&amp;#39;) watch([name, gzh], ([name, gzh], [prevName, prevGzh]) =&gt; { console.log(prevName, name) console.log(prevGzh, gzh) }) setTimeout(() =&gt; { name.value = &amp;#39;前端有的玩&amp;#39; gzh.value = &amp;#39;关注我,一起玩前端&amp;#39; }, 3000) } }复制代码</pre><div class="contentsignin">ログイン後にコピー</div></div><h5 id="watchEffect的用法">watchEffect的用法</h5><p><code>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的你，同时关注公众号【前端有的玩】，带给你不一样的惊喜。喜欢本文，可以给小编一个赞哦。

结语

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

以上がVue3.0 を使用して得た知識ポイント (2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。