setup 语法糖

变量、方法不需要 return 出来

<script lang="ts" setup>
  import { ref } from 'vue';
  <!-- flag变量不需要在 return出去了 -->
  let flag=ref("开端-第一次循环")
  <!-- 函数也可以直接引用,不用在return中返回 -->
  let changeHander=():void=>{
    flag.value='开端-第二次循环'
  }
</script>

组件不需要在注册

<template>
  <div class="home">
    <test-com></test-com>
  </div>
</template>
<script lang="ts" setup>
  // 组件命名采用的是大驼峰，引入后不需要在注册，是不是爽歪歪呀!
  //在使用的使用直接是小写和横杠的方式连接 test-com
  import TestCom from "../components/TestCom.vue"
</script>

语法题之前需要使用defineComponent暴露组件

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'TestCom',
});
</script>

defineProps 接受父组件数据

不需要使用setup函数 props，emit怎么获取呢?

<template>
    <div>
        <h2> 你好-我是肖鹤云</h2>
        <p>信息:{{ info}}</p>
        <p>{{ time }}</p>
    </div>
</template>

<script lang="ts" setup>
  import {defineProps} from 'vue'
  defineProps({
      info:{
          type:String,
          default:'----'
      },
      time:{
          type:String,
          default:'0分钟'
      },
  })
</script>

defineEmits 向父组件抛出事件

<script lang="ts" setup>
 import {defineEmits} from 'vue'
  //  使用defineEmits创建名称，接受一个数组
  let $myemit=defineEmits(['myAdd','myDel'])
  //触发父组件事件
  let hander1Click=():void=>{
    $myemit('myAdd','新增的数据')
  }

  let hander2Click=():void=>{
    $myemit('myDel','删除的数据')
  }
</script>

(代替$ref) defineExpose 获取子组件中的属性值

<script lang="ts" setup>
import { reactive, ref ,defineExpose } from "vue";
let sex=ref('男')
let info=reactive({
    like:'喜欢李诗晴',
    age:27
})
// 将组件中的属性暴露出去，这样父组件可以获取
defineExpose({
    sex,
    info
})
</script>

<template>
<div class="home">
  <HelloWorld ref="testRef"></HelloWorld>
  <button @click="getSonHander">获取子组件中的数据</button>
  </div>
</template>

<script lang="ts" setup>
  import test from '@/components/test.vue';
  import {ref} from 'vue'
  //类似$ref获取组件节点
  const testRef = ref()

  const getSonHander=()=>{
    console.log('获取子组件中的性别', testRef.value.sex );
    console.log('获取子组件中的其他信息', testRef.value.info );
  }
</script>

v-memo

v-memod会记住一个模板的子树,元素和组件上都可以使用。
该指令接收一个固定长度的数组作为依赖值进行[记忆比对]。
如果数组中的每个值都和上次渲染的时候相同，则整个子树的更新会被跳过。
即使是虚拟 DOM 的 VNode 创建也将被跳过，因为子树的记忆副本可以被重用。
因此渲染的速度会非常的快。
需要注意得是:正确地声明记忆数组是很重要。
开发者有责任指定正确的依赖数组，以避免必要的更新被跳过。
<li v-for="item in listArr"  :key="item.id"  v-memo="['valueA'，'valueB']">
    {{ item.name   }}
</li>
v-memod的指令使用较少，它的作用是:缓存模板中的一部分数据。
只创建一次，以后就不会再更新了。也就是说用内存换取时间。

style v-bind

<template>
  <span> 有开始循环了-开端 </span>  
</template>
<script setup>
  import { reactive } from 'vue'
  const state = reactive({
    color: 'red'
  })
</script>
<style scoped>
  span {
    /* 使用v-bind绑定state中的变量 */
    color: v-bind('state.color');
  }  
</style>