Vue篇.03-组合式API [setup()]
单文件组件
(1)<script setup>
<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐
启用该语法，需要在 <script> 代码块上添加 setup attribute, 里面的代码会被编译成组件 setup() 函数的内容
普通的 <script> 只在组件被首次引入时执行一次
<script setup> 中的代码会在每次组件实例被创建的时候执行
<script setup>需要写在组件中的最前边
(2)入口
setup() 钩子是在组件中使用组合式 API 的入口
写法： setup(){ }
注意：在setup中避免使用this
(3)执行时机
执行时机：组件被创建之前执行
使用setup钩子替代beforeCreate和created函数。所有vue3中没有beforeCreate和created的钩子函数
2.使用
(1)顶层的绑定会被暴露给模板
当使用 <script setup> 时，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用
import 导入的内容也会以同样的方式暴露。可以在模板表达式中直接使用导入的函数，而不需要通过 methods 选项来暴露它
<script setup>import ToDoHeader from './SetupToDoHeader.vue'// 使用任<script setup> 其中声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用, 不需要再使用components, methods, data()等注册：
</script>
<template><ToDoHeader @add="addList" @deleteAll="delAll"> </ToDoHeader>
</template>
(2)props用法
// 用于接收父组件传的的值 props的用法// 方式1// const props = defineProps(['todoList'])// 方式2const props = defineProps({todoList:{type: Array, require: true,},title:{type: String,default: '待办事项'},flag: {type: Boolean,defalut: false}})(3)响应式ref()
响应式 ref()：接受一个内部值(number|string)，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value
//使用前引入import { ref,reactive } from 'vue' // 此处声明的是 非响应式的const msg = 'Hello!'// 使用ref ,使得变量成为 响应式的, 使用前先引入 数组在删除时, 有问题, 故改为对象的形式进行删除const todoVal = ref('')// 避免使用this 常量修改值时, 需要通过 .value来修改, 在显示时不需要.value(4)reactive响应式代理
const obj = reactive({ todoList : [] })// reactive(引用类型) 响应式代理// const obj = reactive({})基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然
toRef()
const state = reactive({foo: 1,bar: 2
})
const fooRef = toRef(state, 'foo')
// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2
// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3请注意，这不同于：
const fooRef = ref(state.foo)
上面这个 ref 不会和 state.foo 保持同步，因为这个 ref() 接收到的是一个纯数值
toRefs()
将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。
const state = reactive({foo: 1,bar: 2
})const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型：{foo: Ref<number>,bar: Ref<number>
}
*/
// 这个 ref 和源属性已经“链接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2
stateAsRefs.foo.value++
console.log(state.foo) // 3
//当从组合式函数中返回响应式对象时，toRefs 相当有用。使用它，消费者组件可以解构/展开返回的对象而不会失去响应性：
function useFeatureX() {const state = reactive({foo: 1,bar: 2})// ...基于状态的操作逻辑// 在返回时都转为 refreturn toRefs(state)
}
// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()(5)computed()
//创建一个可写的计算属性 ref：
const count = ref(1)
const plusOne = computed({get: () => count.value + 1,set: (val) => {count.value = val - 1}
})(6)watch()/watchEffect()
watch() 侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数
import { ref , watch, watchEffect} from 'vue'const before = ref(0)const after = ref(0)// watch() 默认是懒侦听的(深度侦听)，即仅在侦听源发生变化时才执行回调函数watch(props.todoList, (newList, preList)=>{after.value = newList.filter(item=>item.done).lengthbefore.value = newList.length - after.value})// 立即执行 一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行// watchEffect(()=>console.log(before.value++)) // 停止侦听器// const stop = watchEffect(()=>{})// stop()(7)provide和inject
import { provide } from 'vue' // 向后代传参 provide(键,值)// 提供静态值 provide('msg','hahahaah')// 提供响应式的值const count = ref(0)provide('count',count) // 接收发送方传递的值const message = inject('msg')(8)向父组件传值
//子组件 // 向父组件传值
<script setup>// 向父组件传值const emit = defineEmits(['add'])const addList = ()=>{emit('add', todoVal.value) //传值时需要使用 .valuetodoVal.value = ''}const delAll = () => {emit('deleteAll')}</script><template><header><span class="submit" @click="addList">提交</span><span class="clear" @click="delAll">清空</span></header>
</template>//父组件
<script setup>// 避免使用this 常量修改值时, 需要通过 .value来修改, 在显示时不需要.valueconst addList = (todoVal)=> {if (todoVal=== '') return alert('输入内容不能为空!!!') obj.todoList.unshift({// id : `${new Date().getTime()}`,todoName: todoVal,done: false});}// 删除单个const delOne = index =>{obj.todoList.splice(index,1)}//删除全部const delAll = ()=>{// 从索引为0的开始全删掉 如果使用直接让数组=[]的方式,只是清空了数组, 地址没有变, 无法触发watch监听 使用todoList.value.splice(0) 或 todoList.value.length=0的方式清空 todoList如果是数组需要 .value, 对象不需要写obj.todoList.splice(0)}
</script>
<template><ToDoHeader @add="addList" @deleteAll="delAll"> </ToDoHeader>
</template>