VUE 3
在vue2中， data、computed、methods、watch 在大多数的情况下都是没有问题的，但是当组件逻辑变得更加丰富，那么逻辑处理关注点就会越来越多，很容易导致组件阅读和维护成本提高，vue3 可以将相关功能的代码抽离分割在一起，方便开发者快速阅读，提高项目代码的可读性和可维护性。
setup
vue3 版本中，引入了一个新的函数 setup。通过 setup 函数能够将部分逻辑抽离成函数，让开发者不必在关心该部分的逻辑问题。
-
setup 函数是组合式 API ( Composition )的入口。
-
setup 函数是启动页面后自动执行的函数。
-
页面中所涉及的变量和方法等，都需要写在 setup 函数中。
-
在 setup 中定义的变量、方法需要通过 return 返回出去才可以使用，否则无法在视图中使用。
-
setup 函数位于 created 和 beforCreated 钩子之前，用来代替这两个钩子。
-
setup函数的两种返回值：
- 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点关注！）
- 若返回一个渲染函数：则可以自定义渲染内容。（了解）
-
setup 函数可以接受 props、context作为参数，其中， props 由于是响应式数据，不能直接解构赋值，context 不是响应式数据，可以通过解构赋值。
单文件组件中，通过 <script setup> 来使用组合式API。
reactive 和 ref
用来声明响应式( 对象 )数据的函数，基于proxy代理的功能，proxy只能代理对象，所以对于非对象属性（基本类型值），vue会创建一个空的对象，将属性挂载在空对象上，再对空对象进行响应式处理（ref ref也可以处理对象）
const myData = reactive([1, 2, 3]); //数组也是对象类型
//回车时,volar插件自动import { reactive } from "vue";
function clickHandler() {
myData.push(11);
}
shallowReactive浅表式响应式数据： 仅修改一级响应式数据 二级及以上不响应
computed
<template>
<div class="hello">
<h1>{{ getlen }}</h1>
<button @click="clickHandler">修改</button>
</div>
</template>
<script setup>
import { computed, ref } from "vue";
const content = ref("这是一段测试数据");
const getlen = computed(() => {
console.log("computed执行了", content.value);
return content.value.toString().length;
});
function clickHandler() {
content.value += "!";
}
</script>
watch
//对ref、reactive、函数或数组 直接使用
watch(count, (newCount, oldCount) => {
console.log("watch执行了", newCount, oldCount);
});
//由于watch的参数只支持ref、reactive等对象本身，对属性无法直接监听，需要对属性包裹空的函数
const myData = reactive({
Name: "张三",
Age: 18,
Sex: "男",
Address: "北京",
});
watch(()=>myData.age, (newCount, oldCount) => {
console.log("watch执行了", newCount, oldCount);
});
watchEffect监听函数内部的所有响应式函数
主动帮我们创造一个副作用函数然后进行具体操作
Readonly + shallowReadonly 只读数据和浅表式只读数据
Pinia
pinia 会自动将我们在模块中所使用的组合式函数识别为状态管理的相应内容 不同模块创建不同文件
//store/counter.js 文件中
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})
//view.vue 文件中
<script setup>
import { useCounterStore } from "../stores/counter"; //引入counter
const countStore = useCounterStore(); //赋值
</script>
//应用
<template>
<h1>{{ countStore.count }}count</h1>
<h1>{{ countStore.doubleCount }} count*2</h1>
<button @click="countStore.increment()">count+1</button>
</template>
