1、vue3中setup函数的使用：

<script setup>
const message = 'this is a demo'
const alertMessage = () => {
  alert(message)
}
</script>
<template>
  <div>{{ message }}</div>
  <button @click="alertMessage">点击</button>
</template>

2、vue3中ref的使用：

<script setup>
import {ref} from 'vue'
const message = ref('this is a demo')
const changeMessage = () => {
   message.value = "this is an new demo";
}
</script>
<template>
  <div>{{ message }}</div>
  <button @click="changeMessage">改变值</button>
</template>

如果是对象：

<script setup>
import {ref} from 'vue'
const obj = {id:1,name:'Florent'}
const message = ref(obj)
const changeMessage = () => {
   message.value.name = "TestName";
}
</script>
<template>
  <div>{{ message.name }}</div>
  <button @click="changeMessage">改变值</button>
</template>

3、vue3中计算属性computed的使用：

<script setup>
import {ref,computed} from 'vue'
const list = ref([1,2,3,4,5,6])
const computedList = computed(() => {
  return list.value.filter(item => item > 2);
})
</script>
<template>
  <div>原始数组：{{ list }}</div>
  <div>计算后的数组：{{ computedList }}</div>
</template>

computed赋值demo:

<script setup>
import {ref,computed} from 'vue'
const count = ref(100)
const calCount = computed({
   get: () => count,
   set: (val) => {
      count.value = val
   }
})
</script>
<template>
  <div>count:{{ calCount }}</div>
  <button @click="calCount.value = 999">改变值</button>
</template>

计算属性应该是只读的，特殊情况才需要get和set。
4、vue3中watch的简单demo：

<script setup>
import {ref,watch} from 'vue'
const count = ref(100)
const count2 = ref(1)
watch(
  count,(newVal,oldVal) => {
    alert(`newVal:${newVal},oldVal:${oldVal}`);
  },{
    immediate:true, //一进入页面就马上执行
    deep:false //如果watch对象是复杂类型，比如是一个对象一个list则需要deep=true
})
watch(count2,(newVal,oldVal) => {
  alert(`newVal:${newVal},oldVal:${oldVal}`);
})
</script>

<template>
  <div>count:{{ count }}</div>
  <div>count2:{{ count2 }}</div>
  <button @click="count ++">改变count</button>
  <button @click="count2 ++">改变count2</button>
</template>

只watch对象中的某一个属性：

<script setup>
import {ref,watch} from 'vue'
const student = ref({name:'florent',age:56})
watch(
  () => student.value.age,
  (newVal,oldVal) => {
    alert(`newVal:${newVal},oldVal:${oldVal}`);
})
</script>
<template>
  <div>student:{{ student }}</div>
  <button @click="student.name='demo'">改变name</button>
  <button @click="student.age=18">改变age</button>
</template>

5、vue3中的生命周期函数使用：

<script setup>
import { onMounted } from 'vue';
//beforeCreate 和 created 的相关代码，一律放在setup中执行
//如果有些代码需要在mounted生命周期中执行，可以写多个，而且按顺序执行
onMounted(() => {
  console.log("mounted");
})
</script>

6、VUE3中的父传子，和子传父，父：

<script setup>
import {ref} from 'vue'
import SonCom from '@/components/son-com.vue'
const fontSize = ref(12)
const changeColor = (val) => {
    alert(val);
}
</script>
<template>
  <SonCom color="黑色" :fontSize="fontSize" @changeColor="changeColor"></SonCom>
</template>

子：

<script setup>
//由于写了setup，所以无法直接配置props选项，因此需要借助defineProp函数接收子组件传递过来的数据
const props = defineProps({
    color:String,
    fontSize:Number
})
console.log(props.color);
const emit = defineEmits(['changeColor'])
const changeColor = () => {
    emit('changeColor',"白色")
}
</script>
<template>
    <!--对于props传递过来的数据，模板中可以直接使用-->
    <div>this is a child component,color:{{ color }},fontSize:{{ fontSize }}</div>
    <button @click="changeColor">改变颜色</button>
</template>