Vue3
组合式api
<template>
<div>
<div>简单属性</div>
<div>{{ msg }}</div>
<div><button @click="updateMsg">修改msg</button></div>
<div>对象属性</div>
<div>{{ objMsg.msg }}</div>
<div><button @click="updateObjMsg">修改对象msg</button></div>
</div>
</template>
<script setup>
import { reactive, ref } from "vue";
const msg = ref("11111");
const updateMsg = () => {
msg.value = "我是msg修改后的内容";
};
const objMsg = reactive({
msg: "222222"
})
const updateObjMsg = () => {
objMsg.msg = '我是msg222222'
}
</script>
<style></style>
路由 + nextTick
<template>
<div>vue3路由</div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { nextTick } from "vue";
const route = useRoute();
const router = useRouter();
const init = () => {
console.log("当前路由", route.path);
console.log("五秒以后跳转到home");
setTimeout(() => {
router.push("/");
}, 5000);
};
init();
nextTick(() => {
console.log("我是nextTick");
});
</script>
<style></style>
全局变量使用
const Utils = {
isEmpty: (value) => {
if (value === null || value === undefined || value.trim() === "") {
return true
}
return false
}
}
const app = createApp(App);
app.config.globalProperties.Utils = Utils;
app.use(store).use(router).mount("#app");
<template>
<div></div>
</template>
<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const init = () => {
let test = "test";
console.log(`output-proxy.Utils.isEmpty(test)`, proxy.Utils.isEmpty(test));
console.log(`output-proxy.Utils.isEmpty(test)`, proxy.Utils.isEmpty(''));
}
init()
</script>
<style></style>
生命周期
<template>
<div>
生命周期
<div>被修改的属性{{ msg }}</div>
<button @click="updateMsg"> 修改属性</button>
<button @click="goHome"> 离开页面</button>
</div>
</template>
<script setup>
import {
ref,
onBeforeUnmount,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onUnmounted,
} from "vue";
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();
function init() {
console.log("页面初始化");
}
init();
const msg = ref('111')
function updateMsg (){
msg.value = new Date().getTime()
}
function goHome (){
router.push('/')
}
onBeforeMount(() => {
console.log("onBeforeMount");
});
onMounted(() => {
console.log("onMounted");
});
onBeforeUpdate(() => {
console.log("onBeforeUpdate");
});
onUpdated(() => {
console.log("onUpdated");
});
onBeforeUnmount(() => {
console.log("onBeforeUnmount");
});
onUnmounted(() => {
console.log("onUnmounted");
});
</script>
<style></style>
watch
<template>
<div>
<div>需要监听的值:{{ msg }}</div>
<button @click="changeMsg">修改值</button>
</div>
</template>
<script setup>
import { watch, ref } from "vue";
const msg = ref("123456");
const changeMsg = () => {
msg.value = new Date().getTime();
};
const msg2 = ref();
watch(
msg,
(newVal, oldVal) => {
console.log("watch:oldVal:", oldVal, ",newVal:", newVal);
},
{ immediate: true, deep: false }
);
</script>
<style></style>
父子组件调用
//父组件
<template>
<div style="border: 1px solid black">
<Son ref="sonRef" :msg="myMsg" @onFather="fatherMethod"></Son>
<button @click="toSon">我要调用子组件</button>
<div>
我是子组件调用父组件传入的参数{{ sonMsg }}
</div>
</div>
</template>
<script setup>
import Son from "./son.vue";
import { ref } from "vue";
const myMsg = ref("我是父组件的参数");
const sonRef = ref();
const toSon = () => {
sonRef.value.fatherSon(new Date().getTime());
};
const sonMsg = ref();
const fatherMethod = (val) => {
sonMsg.value = (val);
};
</script>
<style></style>
//子组件
<template>
<div style="border: 1px solid red">
<div>我是父组件传入的参数:{{ msg }}</div>
<div>这里是父组件调用子组件方法传入的参数:{{ msg2 }}</div>
<button @click="onFather">调用父组件方法</button>
</div>
</template>
<script setup>
import { ref, } from "vue";
const emit = defineEmits(['onFather'])
defineProps({
msg: {
type: String,
defualt: "",
},
});
const msg2 = ref("");
const fatherSon = (val) => {
msg2.value = val;
};
defineExpose({
fatherSon,
});
const onFather =()=>{
emit("onFather",new Date().getTime())
}
</script>
<style></style>
vuex 的使用
import { createStore } from "vuex";
export default createStore({
state: {
num: 0,
num2: 0,
},
getters: {
resetNum: (state) => {
return state.num * 5;
}
},
mutations: {
increment(state, val) {
state.num += val;
},
testAsync(state, val) {
new Promise((resolve, reject) => {
setTimeout(() => {
resolve(val)
}, 1000)
}).then((res) => {
state.num += res;
})
},
test(state,val) {
state.num2 += val;
}
},
actions: {
testAsync2(context,val) {
new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 1000)
}).then((res) => {
context.commit("test",val)
})
}
},
modules: {},
});
//页面中
<template>
<div>
vueX
<div>获取store中state的属性num:{{ useStore().state.num }}</div>
<div>获取store中getters的属性resetNum:{{ useStore().getters.resetNum }}</div>
<div><button @click="numIncrement">num++</button></div>
<div>num2的值{{ useStore().state.num2 }}</div>
<div><button @click="doTestAsync">num2++</button></div>
<div><button @click="doActions">num2++(actions)</button></div>
</div>
</template>
<script setup>
import { useStore } from "vuex";
const store = useStore();
const numIncrement = () => {
store.commit("increment", 1);
};
const doTestAsync = () => {
store.commit("testAsync", 2);
};
const doActions = () => {
store.dispatch("testAsync2", 2);
};
</script>
<style></style>
