升级到Vue3
升级VueCLI
VueCLI需要在4.3.1以上才可以支持Vue3
npm update -g @vue/cli
vue -V
@vue/cli 4.4.6
创建项目
vue create vue3-learning
vue add vue-next # 添加 vue3 插件升级为 vue3
在创建项目时选择手动添加配置,选择vue-router和Vuex,这样创建完的项目各个插件也都会升级为支持Vue3的版本
{
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0-beta.1",
"vue-router": "^4.0.0-alpha.6",
"vuex": "^4.0.0-alpha.1"
}
}
创建Vue实例
import {createApp} from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
createApp(App)
.use(router)
.use(store)
.mount('#app');
创建Router
import {createRouter, createWebHistory} from 'vue-router';
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
export default router;
创建路由的方式与以前有所变化,路由模式除了Hash模式(createWebHashHistory
)和History模式(createWebHistory
),还多了带缓存的History路由(createMemoryHistory
)
使用路由跳转的API也有所变化:
import {useRouter} from 'vue-router';
export default {
setup() {
const router = useRouter();
const goHome = () => router.push('/');
return {goHome}
}
}
关于router的具体变化,后面再单独学习
创建Store
import {createStore} from 'vuex';
export default createStore({
state: {
count: 0
},
mutations: {
changeCount(state, isAdd) {
state.count = isAdd ? state.count + 1 : state.count - 1;
}
},
actions: {},
modules: {}
});
使用:
import {useStore} from 'vuex';
export default {
setup() {
const store = useStore();
const storeState = store.state;
return {storeState}
}
}
可以看出来,Vuex和vue-router,API都有了一些变化,与React Hooks的API很类似,但是基本原理没有太大变化
setup
setup
函数是新的Composition API的入口点
调用时机
Props初始化后就会调用setup
函数,在beforeCreate
钩子前被调用
返回值
setup
返回的对象的属性将被合并到组件模板的渲染上下文,也可以返回一个渲染函数
参数
接受props
作为第一个参数,使用的时候,需要首先声明props
:
export default {
props: {
name: String,
},
setup(props) {
console.log(props.name)
},
}
props
是响应式的,前提是不对props
进行解构,解构后会失去响应性
setup
第二个参数是上下文对象,从2.x中的this
选择性地暴露出一些属性,例如attrs
/slots
/emit
等,可以解构取值不会失去响应性
this
的用法
this
在setup
中不可用
响应式系统API
reactive
const obj = reactive({ count: 0 })
返回一个普通对象的响应式代理,响应式转换是深层的,会影响对象内部嵌套的属性,基于ES2015的Proxy实现,返回的代理对象不等于原始对象,避免使用原始对象
经过试验,Vue3中可以通过修改数组下标来响应式的更改数组成员的值了
ref
ref
的引入是为了以变量形式传递响应式的值而不再依赖访问this
:
const count = ref(0)
接受一个参数,返回一个响应式可改变的ref
对象,ref
对象拥有一个指向内部值的单一属性.value
ref
主要目的是保证基本类型值的响应式,如果传入的参数不是基本类型,会调用reative
方法进行深层响应式转换
ref
使用时:
ref
的返回值setup
中返回应用在模板中时,会自动解构,不需要书写.value
ref
作为reactive
对象的属性被