相信大家都已经入坑Vue3了，但是在使用时总有些不爽的地方，比如定义的ref变量需要return出去才能使用；组件需要注册后才能使用，Vue3.2语法糖就可以解决这些问题，让你开发更加轻松，无需在写多余的代码。
1.setup
setup写在script 标签里，无需写单独的函数，引入的ref等无需return
<template>
<div>{{ name }}</div>
</template>
<script setup>
import { ref } from "vue";
const name = ref("foo");
</script>
2.引入组件
引入组件无需注册就可以直接使用
<template>
<div><HelloWorld /></div>
</template>
<script setup>
import HelloWorld from "@/components/HelloWorld.vue";
</script>
3.Props
Props只需defineProps引用即可，在template或js中直接使用props[attribute]
<template>
<div>{{ props.name }}</div>
</template>
<script setup>
import { defineProps } from "vue";
const props = defineProps({
name: {
type: String,
default: "",
},
});
console.log(props.name);
4.计算属性
计算属性的值依赖于其他响应式属性的值，依赖的属性发生变化，那么这个计算属性的值就会进行重新计算
只读，使用箭头函数就可以操作computed(() => {});
<template>
<div>{{ getAge }}</div>
</template>
<script setup>
import { ref } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";
const age = ref(18);
const getAge = computed(() => {
return age.value + 2;
});
</script>
可读可操作性，使用set来设置
<template>
<div>{{ getAge }}</div>
</template>
<script setup>
import { ref } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";
const age = ref(18);
const getAge = computed({
get() {
return age.value + 2;
},
set(val) {
console.log("val", val);
},
});
getAge.value = 2; //需要赋值才能调用set方法，然后做一些业务逻辑
当有个多个属性需要计算时，可以写多个computed
<template>
<div>{{ geAge }}</div>
<div>{{ getName }}</div>
</template>
<script setup>
import { ref } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";
const age = ref(18);
const name = ref("foo");
const geAge = computed(() => {
return age.value + 2;
});
const getName = computed(() => {
return (name.value = "bar");
});
</script>
5.监听属性
当响应式的数据发生变化是可以用watch函数来监听
1.第一个参数为监听的对象，第二个参数为回调函数，也可以有第三个参数进行深度监听 {deep:true}
<template>
<div>{{ props.name }}</div>
</template>
<script setup>
import { defineProps, watch } from "vue";
const props = defineProps({
name: {
type: String,
default: "",
},
});
watch(
() => props.name,
(newValue, oldValue) => {
console.log("newValue", newValue);
console.log("oldValue", oldValue);
},{ deep: true }
);
</script>
当有个多个属性需要计算时，可以写多个watch,这里和computed用法一样，不做示例
6.组件的事件调用
6.1子组件调用父组件的方法
通过defineEmits方法将事件通知出去
子组件
submit是自己定的事件，可以有多个，即数组的形式const emit = defineEmits(["submit","submit2","submit3"]);
<template>
<button @click="handel">通知父组件</button>
</template>
<script setup>
import { defineEmits } from "vue";
const emit = defineEmits("submit");
const handel = () => {
emit("submit", "foo");
};
</script>
父组件
通过子组件自定的submit事件接收，可以携带参数
<template>
<div><HelloWorld @submit="handelSubmit" /></div>
</template>
<script setup>
import HelloWorld from "@/components/HelloWorld.vue";
const handelSubmit = (val) => {
console.log("val", val);
};
</script>
6.2 父组件调用子组件的属性、方法
通过defineExpose()将自身的属性和方法暴露出去
父组件
<template>
<div><HelloWorld ref="hello" /></div>
<button @click="handelSubmit">调用子组件</button>
</template>
<script setup>
import HelloWorld from "@/components/HelloWorld.vue";
import { ref } from "@vue/reactivity";
const hello = ref(null);
const handelSubmit = () => {
hello.value.getName();
console.log(hello.value.name); //foo
};
子组件
<template>
<div></div>
</template>
<script setup>
import { defineExpose, ref } from "vue";
const getName = () => {
console.log("我被父组件调用了");
};
const name = ref("foo");
//注意：defineExpose放到属性和方法后面写，不然找不到getName和name
defineExpose({ getName, name });
</script>