vue3.0|vue2.0到vue3.0有这一篇就够了 vue3.0|vue.js

vue2.0到vue3.0有这一篇就够了基本框架

vue3.2版本推出了setup语法糖，不用向之前vue3.0，写完函数还要return出去。vue3.0推出了组合式api，下面演示如何定义变量。

注意，在js里面使用ref定义的值需要.value,但是在html中显示变量不用写.value。 vue3.0使用生命周期函数。

需要注意，vue3.0使用生命周期需要在vue中进行引入，生命周期均是在vue2.0的基础上面加了on，另外3.0版本没有生命周期onBeforeCreate和onCreated,setup代替了这两个生命周期，另外在setup中无法使用this。 vue3.0使用侦听器和计算属性

vue3.0父子组件传值

需要注意，由于没有了this，所有子组件向父组件传值时需要引入defineEmits来定义事件的名称，另外provide，inject这种传值比普通的props传值更方便，父组件传的值可以在后代组件中取到(据说provide inject可以取代vuex)。 vue3.0中路由跳转的使用

vue3.0中vuex的使用

【vue3.0|vue2.0到vue3.0有这一篇就够了】vuex user文件

const user = { namespaced: true, state: { username: "管理员", password: "" },mutations: { SET_USERINFO: (state, userInfo) => { state.username = userInfo.username ? userInfo.username : ""; state.password = userInfo.password ? userInfo.password : ""; } },actions: { // 登录 Login({ commit }, userInfo) { commit("SET_USERINFO", userInfo) } } }; export default user;

vue3.0模板引用refs