Vue3 教程

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

ref 需要用.value 支持任意格式
reactive 只能绑定数组对象而且不需要.value

import {  ref ,reactive} from "vue";
setup() {
   const visable = ref(false);
   const C = ref(0);
   const obj = reactive([]);
    return {
         visable,
         C,
         obj 
    };
},

Vue3 使用生命周期

Vue3 setup 没有BeforeCreated 和 created 了

import { onMounted,onUnmounted} from "vue";
setup () {
      onMounted(() => {
       console.log("进入");
      });

     onUnmounted(() => {
      console.log("离开");
     });
}

Vue 3 父子传参

props 子接受父的值在setup第一个参数里面

emit 子给父传递事件在setup第二个参数 context emit

export default {
    props: {
        modelValue: {},
    },
    setup(props, context) {
        // console.log(props.current);
        const submit = () => {
            context.emit("change", 123, 123, 21, 321, 3, 21);
        };
        const close = () => {
            context.emit("update:modelValue", '123');
        };
        return {
            submit,
            close
        };
    },
};

vue3 可以同时写多个根组件

<template>
    <div>123</div>
    <div>456</div>
</template>

Vue router 使用方法

import { useRouter } from "vue-router";
setup () {
const router = useRouter();
  router.push({
        name: "About",
        params: {
           aaa: 1,
        },
  });
}

Vue route 接受参数

import { useRoute } from "vue-router";
export default {
    setup() { 
        //query 或者 params
        const route = useRoute();
        console.log(route,'route')
    },
};

Vuex 使用方法

import {useStore} from 'vuex'

const store = useStore();
store.commit("CHANGE_CURRENT", 11111111111);


//不然不是响应式的
return {
 ...toRefs(store.state),
}

Vue main js定义全局属性

const app  = createApp(App)
app.use(store).use(router).mount('#app')
app.config.globalProperties.$http = 'axios'

Vue 接受定义的全局属性

import { getCurrentInstance} from "vue";
const GET = getCurrentInstance()
console.log(GET.appContext.config.globalProperties)

Vue3 watch 和 watchEffect 和 computed 用法

import { watch , watchEffect ,computed} from "vue";

watch(num, (newVal, oldVal) => {
    console.log(newVal, oldVal, "------------watch");
});

 watchEffect(() => {
   console.log(num.value, "----------watchEffect");
    console.log(str.value, "----------watchEffect");
 });


const a = computed(() => `$${num.value}`);