vue3.0(及vue-router,vuex)基础操作(附开源项目)

vue3.0(附开源项目)

欢迎点击: 个人官网博客.

github源码： 多功能记账本

看完你就可以掌握最新的vue3.0了！

vue3.0(及vue-router,vuex)基础操作

你可以用最新的vue-cli(4.5已上)安装vue3.0

vue3.0是按需引入，那么都有哪些改变呢？

<template>
  <div class="home">
    <button @click='sendTo'>触发事件</button>
  </div>
</template>

<script>
import {
    
    
  provide,
  reactive,
  toRefs,
  ref,
  computed,
  watch,
  onMounted,
  onUnmounted,
  onUpdated,
  nextTick,
} from "vue";
export default {
    
    
  name: "Home",
  setup(props, ctx) {
    
    //steup函数在bedorecreate和created之间

    //创建数据有ref和reactive两种方式,ref适合单个操作
    
    //ref:---------------------------vue3.0
    let name= ref(6);
    console.log(name.value);//获取name的值要使用  .value
   //reactive:---------------------------vue3.0
    let state = reactive({
    
    
      //创建响应式数据
      a: 3,
      c: 1,
      //计算属性---------------------------vue3.0
      b: computed(() => {
    
    
        return state.a + Number(state.c);
      }),
    });
    //监听reactive创造出来的数据-------------------vue3.0
    watch([() => state.c, () => state.a,], (newVal, oldVal) => {
    
    
      console.log(newVal, oldVal);
    });
    //生命周期---------------------------------vue3.0
    onMounted(() => {
    
    
      nextTick(() => {
    
    
        console.log("mounted!");
      });
    });
    onUpdated(() => {
    
    
      console.log("updated!");
    });
    onUnmounted(() => {
    
    
      console.log("unmounted!");
    });
    // 触发事件------------------------vue3.0
    const sendTo = () => {
    
    
      console.log(state.text);//以前是this.text,现在是响应reavtive的数据state
    };
    
    provide("msg", state.b); //组件传参,不能响应
    
    return {
    
    //return出去，响应页面数据及事件
      ...toRefs(state), //torefs函数可以将reavtive创建出来的数据转化为响应式数据
      sendTo,//事件
      name,//ref的值
    };
  },
};

vue3.0中vue-router,vuex写法

import {
    
     useRouter, useRoute } from "vue-router";
import {
    
     useStore } from "vuex";
export default {
    
    
  name: "Home",
  setup(props, ctx) {
    
    //steup函数在bedorecreate和created之间
    
     //vue3.0中路由用法
    let router = useRouter(); //先实例化
     router.push({
    
    
        path: "/about",
        query: {
    
    
          id: 2,
        },
      });
      
     //vuex在3.0当中也要实例化
    let store = useStore();
    console.log(store.state.num);
  },
};
</script>