vue3.0项目搭建，vue-router以及vueX的简单使用
vue3.0正式版本还未发布，不过vue3.0的新特性可以抢先体验
接下来我就说说我的体验方式吧
- 首先通过vue-cli搭建vue2.0项目
vue create [项目名称]
- vue2.0项目生成后,进入到项目文件中，然后通过以下命令将项目升级到vue3.0
vue add vue-next
通过以上步骤后项目便升级到了vue3.0在项目中便可以体验vue3.0的新特性了
vue3.0的setup函数
-
setup 函数执行时期在beforeCreate 之后、created 之前执行
-
需要非常注意的是在vue3.0的setup 函数中是无法访问到this的
-
页面渲染数据，以及页面的一些函数事件都需要通过return出去,基本结构如下
<script>
import { reactive, toRefs } from "vue";
export default {
setup() {
// 响应式数据
const state = reactive({
name: "boyyang"
});
// 页面事件函数
const test = () =>{
state.name = "杨男孩"
}
// 将数据以及函数return 出去
return {
...toRefs(state),
test
};
}
};
</script>
vue3.0路由使用
- 在vue3.0中的路由使用，模板中还是可以使用
router-link，但是在setup函数中使用有所不同
<script>
//首先的从vue-router中导入useRouter
import { useRouter } from "vue-router";
export default {
setup() {
//实例化路由
const router = useRouter();
router.push("/");
}
};
</script>
vue3.0中vuex的使用
- vue3.0中vuex的使用同vue-router类似
import { toRefs, reactive } from "vue";
import { useStore } from "vuex";
export default {
setup() {
const state = reactive({
name: ''
})
const store = useStore()
state.name = store.state.Name
return {
...toRefs(state)
}
}
};
