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

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的使用

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