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
Vue3.0watch
Vue3.0
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
pour créer unviteEnvironnement d'apprentissageVue3.0
Points de connaissances acquis grâce à l'utilisation de Vue3.0 (1)
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
Vue2.0watch 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
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
}
}
}复制代码 à 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
pour surveiller $watch
, 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( 'formData',
() => { // formData数据发生变化后会进入此回调函数
},
{ deep: true
}
)
})
}
}
}复制代码 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, () => { // 函数的返回值发生变化，进入此回调函数})复制代码 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
Vue3.0 est utilisé dans watch. de 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 '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)
}
}复制代码 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('子君') 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的用法与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)
}
}复制代码清除副作用
想象一下这样的一个场景，界面上面有两个下拉框，第二个下拉框的数据是根据第一个下拉框的数据联动的，当第一个下拉框数据发生变化后，第二个下拉框的数据会通过发送一个网络请求进行获取。这时候我们可以通过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> <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的计算属性也可以设置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-routervue-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是兼容一部分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的开发环境，仓库地址为 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!
Quel est le format de fichier mkv ?
Utilisation du cordon
Java est-il front-end ou back-end ?
Pourquoi mon téléphone portable ne peut-il pas passer d'appels mais ne peut pas surfer sur Internet ?
Raisons pour lesquelles le tableau Excel ne peut pas être ouvert
Comment configurer un VPS sécurisé
Comment insérer une vidéo en HTML
méthode de mise à niveau Win10
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
