Vue3.0을 사용하여 얻은 지식 포인트 (2)
- coldplay.xixi앞으로
- 2020-09-19 09:26:112364검색
매일 야근을 하고, 매일 바쁘고, 요구사항은 호랑이와 늑대처럼 다가옵니다. 시험문제가 산더미처럼 쌓여서 실망한 채 집으로 돌아왔습니다.
관련 학습 추천: javascript
최근 퇴근 후 Vue3.0 관련 지식을 배우고 있는데, Vue3.0은 아직 입니다. > rc버전이지만 이는 우리 연구에 영향을 미치지 않습니다. 오늘의 글은 Vue3.0에 관한 네 번째 글입니다. 이전 글에서는 vite와 vuecli를 통해 Vue3.0 개발 환경을 구축하는 방법을 설명한 뒤, Vue3.0을 소개했습니다. 0setup, reactive, ref 등을 code>에서 설명합니다. 오늘 글에서는 주로 다음 내용을 설명합니다. Vue3.0相关知识，虽然Vue3.0至今还是rc版，但这并不影响我们去学习。今天这篇文章是我关于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开发环境，仓库地址为 gitee.com/f_zijun/vue…，欢迎使用。本文首发于公众号【前端有的玩】，这是一个专注于Vue与面试相关的公众号，提升自己的市场竞争力，就在【前端有的玩】。同时点击以下链接即可访问小编关于Vue3.0的其他相关文章
学习Vue3.0,先来了解一下Proxy
使用vite搭建一个Vue3.0学习环境
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的用法
下面的示例演示了如何使用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
- watch
- 코드에서 계산된 속성 사용>Vue3.0
<code>vue-router- Vue3.0에서 사용됨
vuex
Vue3 .0 개발 환경입니다. 창고 주소는 gitee.com/f_zijun/vue... 입니다. 이용하시면 됩니다. 이 글은 시장 경쟁력 향상을 위해 Vue와 인터뷰에 초점을 맞춘 공개 계정인 [Front-End Youwan]에 처음 게재되었습니다. -일부 플레이 종료]. 동시에 다음 링크를 클릭하여 Vue3.0에 대한 편집자의 다른 관련 기사에 액세스하세요.🎜🎜Vue3.0 알아보기, 먼저 Proxy에 대해 알아보기🎜🎜vite<code>Vue3.0 학습 환경 구축🎜🎜Vue3 사용 .0 지식 포인트 획득(1) 🎜🎜
Vue3.0🎜에서 <code>watch
사용 watch Vue3.0에서는 새로운 개념이 아닙니다. Vue2.x를 사용할 때 변경 사항을 모니터링하기 위해 watch를 사용하는 경우가 많습니다. Vue 인스턴스의 표현식이나 함수의 계산 결과. 🎜
Vue2.0에서 <code>watch
검토 🎜In Vue2.0 In , watch를 사용하여 다음 방법을 통해 Vue 인스턴스의 표현식 또는 함수 계산 결과의 변경 사항을 모니터링할 수 있습니다. 그 중 몇 가지가 아래에 나열되어 있습니다. 가장 일반적인 사용 방법🎜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)
}
}复制代码🎜watch 속성이나 를 통해 모니터링되도록 <code>Vue 인스턴스의 속성을 구성할 수 있습니다. 키 경로를 사용하여 개체의 특정 속성 변경 사항을 모니터링하도록 immediate를 구성하고, 개체의 속성을 심층적으로 모니터링하도록 deep을 구성할 수도 있습니다. object. 중첩 수준이 아무리 깊어도 마찬가지입니다. 🎜$watch를 사용하여 모니터링🎜🎜기존의 watch 객체 작성 방법 외에 Vue 인스턴스 $watch 메소드를 사용하면 $watch를 통해 특정 속성의 변경 사항을 보다 유연하게 모니터링할 수 있습니다. 예를 들어, 이 시나리오에는 양식이 있으며 사용자가 양식을 수정한 후 양식의 데이터 변경 사항을 모니터링하려고 합니다. 하지만 양식의 백필 데이터가 비동기적으로 요청되는 특별한 시나리오가 있습니다. 이 경우 백그라운드에서 데이터를 요청한 후 변경 사항을 모니터링하려고 합니다. 이 경우 $watch를 사용할 수 있습니다. >. 다음 코드에 표시된 대로:🎜import { ref, watchEffect } from 'vue'export default {
setup() { const id = ref('0')
watchEffect(() => { // 先输出 0 然后两秒后输出 1
console.log(id.value)
})
setTimeout(() => {
id.value = '1'
}, 2000)
}
}复制代码$watch의 첫 번째 매개변수는 함수일 수도 있습니다. function 반환 값이 변경된 후 콜백 함수가 트리거됩니다. 🎜const unwatch = this.$watch('name',() => {})// 两秒后停止监听setTimeout(()=> {
unwatch()
}, 2000)复制代码🎜위는 Vue2.0에서 <code>watch를 사용하는 몇 가지 일반적인 방법입니다. Vue2.0과 부분적으로 하위 호환되기 때문에 위의 사용법은 기본적으로 Vue3.0에서 사용할 수 있지만 큰 하이라이트 Vue3.0은 composition API이므로 Vue2.0의 작성 방법 외에 composition apiwatch🎜 /code>에 제공되는는 Vue3.0 >watch
🎜Vue3.0에는 Vue2.0의 작성 방법 외에 두 가지 api가 있습니다. 데이터 변경 사항을 모니터링할 수 있습니다. 첫 번째는 watch이고 두 번째는 watchEffect입니다. watch의 경우 사용법은 기본적으로 Vue2.0의 $watch와 동일하고 watchEffect는 Vue3.0새롭게 제공되는 api🎜watch 사용법
🎜다음 예는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)
}
}复制代码🎜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) } }复制代码-
清除副作用
想象一下这样的一个场景，界面上面有两个下拉框，第二个下拉框的数据是根据第一个下拉框的数据联动的，当第一个下拉框数据发生变化后，第二个下拉框的数据会通过发送一个网络请求进行获取。这时候我们可以通过
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-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的开发环境，仓库地址为 gitee.com/f_zijun/vue…，内部集成了typescript,eslint,vue-router,vuex,ant desigin vue等，希望可以帮到正在学习Vue3.0的你，同时关注公众号【前端有的玩】，带给你不一样的惊喜。喜欢本文，可以给小编一个赞哦。
结语
不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高
위 내용은 Vue3.0을 사용하여 얻은 지식 포인트 (2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!