vue3.0模板已上传至github/ gitee,如有需要可以下载
vue3.0 + vite + scss(github)
vue3.0 + vite + scss(gitee)
更新内容
setup 代替之前的 data ,生命周期 methods computed watch 合并在一起,全部放在setup函数中
ref 定义基本类型,使得数据具有响应式
reactive 定义引用类型,通用使数据具有响应式
toRefs 将对象结构解析出来
toRef 将对象结构解析出来的值在具有响应式的基础上,如果未找到key,就默认给个值
readonly 是将通过ref 或reactive定义好的数据进行拷贝后变为仅可读的数据,不可进行修改,即无响应
provide 与 inject 跨组件传递
生命周期
computed 计算属性
watch 侦听器
vuex
|
生命周期
setup() 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method
onBeforeMount() 组件挂载到节点上之前执行的函数;
onMounted() 组件挂载完成后执行的函数;
onBeforeUpdate() 组件更新之前执行的函数;
onUpdated() 组件更新完成之后执行的函数;
onBeforeUnmount() 组件卸载之前执行的函数;
onUnmounted() 组件卸载完成后执行的函数;
onActivated() 被包含在 <keep-alive> 中的组件,会多出两个生命周期钩子函数,被激活时执行;
onDeactivated() 比如从 A 组件,切换到 B 组件,A 组件消失时执行;
onErrorCaptured() 当捕获一个来自子孙组件的异常时激活钩子函数。
|
reactive 和 toRefs 的使用
import { reactive, toRefs } from "vue";
export default {
name: "Home",
setup() {
const data = reactive({
name: "trist",
age: 22,
sex: "boy",
});
console.log(data.age); // 22
return {
...toRefs(data), // 这样抛出后就可以直接使用data中的值了 {{ name }}
};
},
};
|
methods 的写法
<template>
<div @click="handler">{{ num }}</div>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
export default {
setup() {
const data = reactive({
num: 1,
});
const methodName = {
handler(a) {
data.num++;
console.log(data.num);
},
};
return {
...toRefs(data),
...methodName, // 展开返回,这样就可以写多个方法了
};
},
};
</script>
|
生命周期的位置
<template>
<div @click="handler">{{ num }}</div>
</template>
<script>
import { ref, reactive, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from "vue";
export default {
setup() {
const data = reactive({
num: 1,
});
const methodName = {
handler(a) {
data.num++;
console.log(data.num);
},
};
onBeforeMount(() => {
console.log("onBeforeMount");
});
onMounted(() => {
console.log("onMounted");
});
onBeforeUpdate(() => {
console.log("onBeforeUpdate");
});
onUpdated(() => {
console.log("onUpdated");
});
return {
...toRefs(data),
...methodName, // 展开返回,这样就可以写多个方法了
};
},
};
</script>
|
计算属性
<template>
<div @click="handler">{{ num }}</div>
<div>{{ comput }}</div>
</template>
<script>
import { ref, reactive, toRefs, computed } from "vue"; // 引入计算属性
export default {
setup() {
const data = reactive({
num: 1,
});
const methodName = {
handler() {
data.num++;
console.log(data.num);
},
};
const comput = computed(() => { // 定义计算属性
return data.num * 10;
});
return {
...toRefs(data),
...methodName, // 展开返回,这样就可以写多个方法了
comput, // 返回定义的计算属性
};
},
};
</script>
|
多个计算属性
<template>
<div @click="handler">{{ num }}</div>
<div>{{ cp1 }}</div>
<div>{{ cp2 }}</div>
</template>
<script>
import { ref, reactive, toRefs, computed } from "vue";
export default {
setup() {
const data = reactive({
num: 1,
num2: 2,
});
const methodName = {
handler() {
data.num++;
data.num2++;
},
};
const comput = { // 多个值采取对象写法
cp1: computed(() => {
return data.num * 10;
}),
cp2: computed(() => {
return data.num2 * 50;
}),
};
return {
...toRefs(data),
...methodName, // 展开返回,这样就可以写多个方法了
...comput, // 将所有计算属性全部返回
};
},
};
</script>
|
watch 侦听器(单个)
<template>
<div @click="handler">{{ num }}</div>
<div>{{ num }}</div>
</template>
<script>
import { ref, reactive, toRefs, watch } from "vue";
export default {
setup() {
const data = reactive({
num: 1,
});
const methodName = {
handler() {
data.num++;
data.num2++;
},
};
watch(
() => data.num,
(newV, oldV) => {
console.log(newV, oldV);
}
);
return {
...toRefs(data),
...methodName, // 展开返回,这样就可以写多个方法了
};
},
};
</script>
|
watch 侦听器(多个)
<template>
<div @click="handler">{{ num }}</div>
<div>{{ num }}</div>
<div>{{ num2 }}</div>
</template>
<script>
import { ref, reactive, toRefs, watch } from "vue";
export default {
setup() {
const data = reactive({
num: 1,
num2: 2,
});
const methodName = {
handler() {
data.num++;
data.num2++;
},
};
watch(
() => [data.num, data.num2],
([newV1, newV2], [oldV1, oldV2]) => {
console.log(oldV1, oldV2); ------------// 原来的值
console.log(newV1, newV2); ------------// 变化后的值
}
);
return {
...toRefs(data),
...methodName, // 展开返回,这样就可以写多个方法了
};
},
};
</script>