Vue3.0 грядет, все, что вы хотите узнать, здесь (2)

Сверхурочные заняты каждый день, а спрос бьет как тигр. Тестовые вопросы навалились горой, и все мысли вернулись к родному городу.

Недавно учился в свободное времяVue3.0соответствующие знания, хотяVue3.0все ещеrcEdition, но это не влияет на наше исследование. Сегодняшняя статья обо мнеVue3.0четвертая статья. В предыдущем разделе мы объяснили, какviteиvuecliстроитьVue3.0среда разработки, затем введенаVue3.0серединаsetup,reactive,refПодождите, сегодняшняя статья в основном объясняет следующее:

Vue3.0используется вwatch
Vue3.0Использование вычисляемых свойств в
Vue3.0используется вvue-router
Vue3.0используется вvuex

Прежде чем начать эту статью, редактор предоставляетVue3.0Среда разработки, адрес складаgit ee.com/fa_zijun/v UE…,Добро пожаловать. Эта статья была впервые опубликована в общедоступном аккаунте [Front-end some play], в котором основное внимание уделяетсяVueи面试Соответствующие публичные аккаунты для повышения их конкурентоспособности на рынке находятся в [внешнем интерфейсе]. Также нажмите на ссылку ниже, чтобы посетить редактор оVue3.0другие связанные статьи

Чтобы изучить Vue3.0, давайте сначала разберемся с прокси

использоватьviteпостроить одинVue3.0среда обучения

Какие очки знаний я получил, используя Vue3.0 (1)

`Vue3.0`используется в`watch`

watchсуществуетVue3.0не является новой концепцией использованияVue2.x, мы часто используемwatchконтролироватьVueВыражение над экземпляром или изменение результата вычисления функции.

обзор`Vue2.0`середина`watch`

существует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Настройте, что отслеживать в свойствахVueСвойства выше экземпляра также могут быть переданы через.Ключевой путь для отслеживания изменения свойства в объекте также можно настроить с помощьюimmediateСрабатывает сразу после прослушивания, настройкиdeepГлубокий мониторинг свойств внутри объектов, независимо от того, насколько глубок их уровень вложенности.
использовать$watchмонитор

Помимо обычногоwatchПомимо обозначения объекта,VueПример приведен выше$watchметод, через$watchБолее гибко отслеживать изменения определенного свойства. Например, в таком сценарии у нас есть форма, а затем мы хотим отслеживать изменения данных формы после того, как пользователь изменит форму. Но есть особый сценарий, то есть данные обратной засыпки формы запрашиваются асинхронно, в это время мы хотим отслеживать изменения после запроса данных в фоновом режиме, в это время мы можем использовать$watch. Как показано в следующем коде:
```
export default {
  methods: {
    loadData() {
      fetch().then(data => {
        this.formData = data
        this.$watch(
          'formData',
          () => {
            // formData数据发生变化后会进入此回调函数
          },
          {
            deep: true
          }
        )
      })
    }
  }
}
```
Выражение функции слушателя

Помимо прослушивания строк,$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

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)
  }
}

остановить выполнение

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)
  }
}
```
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Эффект в принципе тот же.

существуетVue2.0Использование вычисляемых свойств в

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

существуетVue3.0Использование вычисляемых свойств в

<template>
  <div class="about">
    <h1>{{ name }}</h1>
  </div>
</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Вычисляемое свойство также может быть установлено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, то требуются некоторые корректировки

Отмена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('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }

Практическое использование иVue2.0В основном это то же самое, но метод письма изменился, поэтому стоимость обучения очень низкая.

Суммировать

Это оVue3.0Четвертая статья, каждая статья представляет собой резюме того, что я сделал в своем исследовании. я составилvue3.0Среда разработки, адрес складаgit ee.com/fa_zijun/v UE…, внутренне интегрированныйtypescript,eslint,vue-router,vuex,ant desigin vueПодождите, надеюсь, это поможет вам учитьсяVue3.0Для вас обратите внимание на официальный аккаунт [Some play at the front end], который будет преподносить вам разные сюрпризы. Если вам понравилась эта статья, вы можете поставить мне лайк.

Эпилог

Не истощайте свое вдохновение и воображение, не будьте рабом своих моделей. - Винсент Ван Гог

Vue3.0используется вwatch

обзорVue2.0серединаwatch

существуетVue3.0используется вwatch

Использование часов

Использование watchEffect

Vue3.0Использование вычисляемых свойств в

Vue3.0используется вvue-router

инициализацияvue-router

существуетsetupиспользуется вvue-router

Vue3.0используется вvuex

инициализацияvuex

существуетsetupиспользуется вvuex