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}`);
- 在 vue 2.x 中，在一个元素上同时使用 v-if 和 v-for 时， v-for 会优先作用。
- 在 vue 3.x 中， v-if 总是优先于 v-for 生效。
- 在 vue3.x 中 ，filters删除了
