Vue3新特性

一、组合式api

ps:今天用的是.vue文件，前两篇用的是html文件，所以代码基本结构不同，使用的工具为vsCode

        1.setup程序入口

        类似于C和Java的main函数，都是程序的入口函数，在vue2中需要声明setup函数

export default{
 setup(){
    console.log('调用了setup')
    
    }
 }

export default代表向外暴露端口,setup函数内的内容在加载时就会被调用，所以进入页面控制台内就会输出一句：调用了setup

而vue3摒弃了这种复杂的写法，而是在script标签中直接写入setup即可：

<script setup>
//定义常量语句
const count=0
//也可以定义函数.....
</script>

---

        2.reactive和ref存放数据的函数

                使用这两种函数的优点在于，存放数据即可实现数据与元素绑定，不需要手动绑定

                （1）reactive函数

                        只能存放对象，返回值也是对象（响应式对象）,在script部分代码案例如下：

//导入该函数
 import {reactive} from 'vue'
 //使用reactive
const state=reactive({count:0})
 //创建事件函数对reactive内的值自加
 const setCount=()=>{
  state.count++ 
}

说明：import代码为导入reactive工具包，第二句代码实现了在reactive中存放了一个对象，对象中有一组key:value即count:0，返回一个对象给state

template部分(元素部分)代码如下

<template>
 <button @click="setCount">{{state.count }}</button>

</template>

在上述代码中实现了在页面中设置一个按钮，绑定了一个单击事件，事件触发函数setCount。结合script中的代码我们得知setCount函数实现了对count键对应值的自加，注意：对象值的调用需要打点调用

                （2）ref函数

                        既可以存放简单数据，也可以存放复杂的对象数据，他也返回一个对象。在script部分代码案例：

import {ref} from 'vue'
const count=ref(0)
const setCount=()=>{
 count.value++
 }

说明：import代码为导入ref工具包，第二句代码实现了在ref中存放了一个数据0，返回一个对象给count。注意：ref中存放简单数据时，要对值操作，引用时要调用value属性，如setCount函数中的语法

template部分(元素部分)代码如下

<template>
  <button @click="setCount">{{count }}</button>

</template>

说明：实现的功能与reactive案例相同，但在元素内引用时只需要写名字即可

---

                （3）computed计算函数

                        computed 属性是一种特殊类型的依赖项，它根据响应式数据的变化自动重新计算值。computed 属性非常适合用于当你需要根据现有数据派生出一些状态时。computed 属性具有缓存特性，只有当依赖项发生变化时，计算属性才会重新计算。这使得 computed 属性非常适合用于性能优化。

案例写法如下：

import {computed,ref} from 'vue'
const list =ref([1,2,3,4,5,6,7,8,9])
//通过计算函数对象数组中的数据进行计算
const computedList=computed(()=>{
  return list.value.filter(item=>item>2)
})

说明：filter为过滤器，会迭代list中的value值，第一次取出1，第二次取出2等，item=>item>2是一个简易函数写法，item为每次迭代取出的值=>代表是一个函数，因为函数体只有一句话所以不用写花括号{}，如果item>2则会给到computedList，所以最后computed List中的值为[3,4,5,6,7,8,9]