vue3.0
环境安装
-
安装最新vue脚手架
npm i @vue/cli -g
-
通过脚手架创建项目,并选择3.0
vue create vue-next
-
运行项目
npm run serve
vue3.0 组合式api
vue2.0采用的叫做选项式api:
例如我们想实现某一个功能,关于这个功能的数据我们会定义在data中,事件函数定义在methods中,计算属性定义在computed中…,
实际上我们想实现一个功能会把我们代码拆分写到不同的模块中,这样我们很难区分,哪个数据和哪个逻辑是一一对应的,而且想实现这个功能也要在data、methods、computed中跳来跳去。
Vue3.0的组合式(composition-api)api:
我们会把同一功能的逻辑写在一起,写到一个函数中
setup
-
setup是composition-api的入口函数
-
在声明周期beforeCreate事件之前被调用;
-
可以返回一个对象,这个对象的属性被合并到渲染上下文,并可以在模板中直接使用;
直接返回的不是一个响应式数据
setup () { return { msg: 1 } }
<template> <div> {{ msg }} <button @click="msg++">修改数据</button> </div> </template>
-
接收props对象作为第一个参数,接收来的props对象,可以通过watchEffect监视其变化。
-
接受context对象作为第二个参数,这个对象包含attrs,slots,emit三个属性。
定义响应式数据
reactive
- 引入reactive
import { reactive } from 'vue'
- 通过reactive定义响应式数据
setup () {
const state = reactive({
msg: 123
})
return state
}
ref
- 引入ref
import { ref } from 'vue'
- 通过ref定义响应式数据
setup () {
const msg = ref(123)
return {
msg
}
}
ref&reactive共用
setup () {
const state = reactive({
num: 123
})
const msg = ref('hello vue3.0')
return {
msg,
...state
}
}
定义方法
定义方法修改reactive数据
- 定义方法
setup () {
const state = reactive({
num: 123
})
const msg = ref('hello vue3.0')
// 定义addNum
const addNum = () => {
state.num++
}
return {
msg,
...state,
addNum
}
}
- 通过…展开的reactive定义的数据不能响应,需要转换为ref方式
import { reactive, ref, toRefs } from 'vue'
setup () {
const state = reactive({
num: 123
})
const msg = ref('hello vue3.0')
const addNum = () => {
state.num++
}
return {
msg,
...toRefs(state),
addNum
}
}
定义方法修改ref数据
const addNum = () => {
msg.value = 'hello'
}
computed
引入computed
- 直接在setup内部定义
setup () {
const doubleNum = computed(() => {
return state.num * 2
})
return {
doubleNum
}
}
- 在state中定义
const state = reactive({
num: 123,
doubleNum: computed(() => {
return state.num * 2
})
})
watch
watch(() => state.num, (newValue, oldValue) => {
console.log('num变化了', newValue, oldValue)
})
生命周期函数
可以直接导入 onXXX
一族的函数来注册生命周期钩子:
import { onUpdated, onUnmounted } from 'vue'
setup () {
onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
}
与 2.x 版本生命周期相对应的组合式 API
beforeCreate
-> 使用setup()
created
-> 使用setup()
beforeMount
->onBeforeMount
mounted
->onMounted
beforeUpdate
->onBeforeUpdate
updated
->onUpdated
beforeDestroy
->onBeforeUnmount
destroyed
->onUnmounted
errorCaptured
->onErrorCaptured
依赖注入
依赖注入并不是vue3.0新增的特性,2.0就开始支持,只不过使用方式有所区别
- 引入provide进行提供数据
import { provide } from 'vue'
setup () {
const state = reactive({
msg: 'hello'
})
provide('num', state.msg)
}
- 子组建通过inject进行接收
import { inject } from 'vue'
export default {
setup () {
const num = inject('num')
console.log(num)
}
}
路由
vue3中的路由使用方式变成了导入方法,进行路由的使用
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
createRouter: 用来创建路由对象
createWebHistory:用来使用history模式的路由
createWebHashHistory:用来使用hash模式的路由
useRouter
使用useRouter进行编程式导航
import { useRouter } from 'vue-router'
setup () {
const router = useRouter()
const goHome = () => {
router.push('/home')
}
}
useRoute
通过useRoute获取当前路由信息,path、query、params
import { useRoute } from 'vue-router'
setup () {
const route = useRoute()
console.log(route.path)
}