[TOC]

setup 基本语法
起初 Vue3.0 暴露变量必须return出来，template中才能使用；
这样会导致在页面上变量会出现很多次。
很不友好，vue3.2只需在script标签中添加setup。可以帮助我们解决这个问题。
组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default，甚至是自定义指令也可以在我们的template中自动获得。

变量、方法不需要 return 出来

<template>
  <div class="home">
    显示的值{{flag }}
    <button @click="changeHander">改变值</button>
  </div>
</template>
<!-- 只需要在script上添加setup -->
<script lang="ts" setup>
    import { ref , reactive} from 'vue';

    <!-- flag变量不需要在 return出去了 -->
    let flag=ref("开端-第一次循环")

     const data = reactive({
      patternVisible: false,
      debugVisible: false,
      aboutExeVisible: false,
    })
    <!-- 函数也可以直接引用,不用在return中返回 -->
    let changeHander=():void=>{
        flag.value='开端-第二次循环'
        data.aboutExeVisible = true
    }
      //使用toRefs解构
   const { patternVisible, debugVisible, aboutExeVisible } = toRefs(data)
</script>

组件不需要在注册

  • 子组件

    <!-- 这个是组件 -->
<template>
  <div>
      <h2>子组件</h2>
  </div>
</template>

  • 父组件

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

  • 在 script setup 中，引入的组件可以直接使用无需再通过components进行注册

    并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。

watchEffect的使用

<script setup>
import {
  ref,
  watchEffect,
} from 'vue'

let sum = ref(0)

watchEffect(()=>{
  const x1 = sum.value
  console.log('watchEffect所指定的回调执行了')
})
</script>

watch的使用


<script setup>
    import {
      reactive,
      watch,
    } from 'vue'
     //数据
     let sum = ref(0)
     let msg = ref('你好啊')
     let person = reactive({
                    name:'张三',
                    age:18,
                    job:{
                      j1:{
                        salary:20
                      }
                    }
                  })
    // 两种监听格式
    watch([sum,msg],(newValue,oldValue)=>{
            console.log('sum或msg变了',newValue,oldValue)
          },{immediate:true})

     watch(()=>person.job,(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
     },{deep:true}) 

</script>

computed计算属性的使用

  • computed 计算属性有两种写法(简写和考虑读写的完整写法)

    <script setup>
  import {
    reactive,
    computed,
  } from 'vue'

  //数据
  let person = reactive({
     firstName:'小',
     lastName:'叮当'
   })
  // 计算属性简写
  person.fullName = computed(()=>{
      return person.firstName + '-' + person.lastName
    }) 
  // 完整写法
  person.fullName = computed({
    get(){
      return person.firstName + '-' + person.lastName
    },
    set(value){
      const nameArr = value.split('-')
      person.firstName = nameArr[0]
      person.lastName = nameArr[1]
    }
  })
</script>

在 

```javascript
<template>
    <div>
        <h2>子组件触发父组件事件</h2>
        <button @click="hander1Click">新增</button>
        <button @click="hander2Click">删除</button>
    </div>
</template>

<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>

defineExpose 父组件获取子组件中的属性值

  • 获取子组件ref变量和defineExpose暴露

    使用 ``` - 当父组件通过模板 ref 的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包) ### 路由useRoute和useRouter的使用 ```javascript ``` ### provide 和 inject 祖孙传值 - 父组件 ```javascript ``` - 子组件 ```javascript 子组件代码如下（示例）： ``` ### 新增指令 v-memo - [https://v3.cn.vuejs.org/api/directives.html#v-memo](https://v3.cn.vuejs.org/api/directives.html#v-memo) - 记住一个模板的子树。元素和组件上都可以使用。该指令接收一个固定长度的数组作为依赖值进行记忆比对。如果数组中的每个值都和上次渲染的时候相同，则整个该子树的更新会被跳过 ```javascript

    ...
    ``` - 当组件重新渲染的时候，如果 valueA 与 valueB 都维持不变，那么对这个
    以及它的所有子节点的更新都将被跳过。事实上，即使是虚拟 DOM 的 VNode 创建也将被跳过，因为子树的记忆副本可以被重用。 - 正确地声明记忆数组是很重要的，否则某些事实上需要被应用的更新也可能会被跳过。带有空依赖数组的 v-memo (v-memo="[]") 在功能上等效于 v-once > v-memo 仅供性能敏感场景的针对性优化，会用到的场景应该很少。渲染 v-for 长列表 (长度大于 1000) 可能是它最有用的场景： ```javascript

    ID: {{ item.id }} - selected: {{ item.id === selected }}

    ...more child nodes

    ``` ### style v-bind 状态驱动的动态 CSS - 文件组件的