hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 前端开发 - 正文 君子好学,自强不息!

运用Vue3.0收成的知识点(二)_WEB前端开发

2020-09-19前端开发搜奇网49°c
A+ A-

日日加班日日忙,需求袭来如虎狼。 测试问题堆如山,万念俱灰归老家。

相干进修引荐:javascript

最近在事情之余一向进修Vue3.0相干学问,虽然Vue3.0至今照样rc版,但这并不影响我们去进修。本日这篇文章是我关于Vue3.0的第四篇文章。在前文中我们解说了怎样经由过程vitevuecli搭建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

watchVue3.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用法基础是如出一辙的,而watchEffectVue3.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除了能够监听单个值或许函数返回值以外,也能够同时监听多个数据源,比以下面代码所示:

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中,watchwatchEffect一样也会返回一个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)
      }
    }复制代码
    1. 消灭副作用

      设想一下如许的一个场景,界面上面有两个下拉框,第二个下拉框的数据是依据第一个下拉框的数据联动的,当第一个下拉框数据发生变化后,第二个下拉框的数据会经由过程发送一个收集要求举行猎取。这时刻我们能够经由过程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
        }
      },复制代码
  1. Vue3.0中运用盘算属性

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

    Vue2.0一样,Vue3.0的盘算属性也能够设置gettersetter,比方上面代码中的盘算属性,只设置了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.0main.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

实在vuexVue3.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. 作废beforeCreatecreated

    在运用componsition api的时刻,实在setup就替代了beforeCreatecreated,由于setup就是组件的现实进口函数。

  2. beforeDestroydestroyed 更名了

    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收成的学问点(二)的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
运用Vue3.0收成的知识点(二)_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

本文来源:搜奇网

本文地址:https://www.sou7.cn/300797.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。