1、setup选项的写法和执行时机
代码语言：javascript复制<script>
export default{
setup(){
},
beforeCreate(){
}
}
</script>执行时机:
代码语言：javascript复制1.Renderer(encounters component)
2.setup(Composition API)
3.beforeCreate
4.init Options APIsetup特点
1.执行时机比beforeCreate还要早
2.函数中是获取不到this
3.数据和函数需要在setup最后return才能在模板中应用
4.可以通过setup语法糖简化
举例说明：
代码语言：javascript复制<script setup>
//数据
const message = '你好vue3'
//函数
const logMessage = () => {
console.log(message)
}
</script>
// <script>
// export default {
// setup() {
// //数据
// const message = '你好vue3'
// //函数
// const logMessage = () => {
// console.log(message)
// }
// return {
// message,
// logMessage
// }
// },
// beforeCreate() {
// console.log("beforeCreate函数")
// }
// }
// </script>
<template>
<div>{{ message }}</div>
<button @click="logMessage">按钮</button>
</template>2、reactive()
接受对象类型数据的参数传入并返回一个响应式的对象
代码语言：javascript复制<script setup>
import { reactive } from 'vue';
const state = reactive({ count: 100 })
const setCount = () => {
state.count
}
</script>
<template>
<div>reactive:{{ state.count }}</div>
<button @click="setCount"> 1</button>
</template>3、ref()
接收简单类型或者对象类型的数据传入并返回一个响应式的对象
本质: 简单类型传入实际是外层包了一层对象
注意: 在template中执行使用数据,在脚本中需要访问 不管是简单类型还是对象都用数据.value就行调用
代码语言：javascript复制<script setup>
import { ref } from 'vue';
const count = ref(0)
const setCount2 = () => {
count.value
}
</script>
<template>
<div>ref:{{ count }}</div>
<button @click="setCount2"> 1</button>
</template>推荐:以后申明数据,统一使用ref就行
4、computed()
计算属性函数和vue2完全一致,组合式api下计算属性只是修改了写法
代码语言：javascript复制<script setup>
import { ref, computed } from 'vue';
const list = ref([1, 2, 3, 4, 5, 6, 7, 8])
const computedList = computed(() => {
return list.value.filter(t => t > 2)
})
const addFn = () => {
list.value.push(666)
}
</script>
<template>
<div>原始数据:{{ list }}</div>
<div>计算后的数据:{{ computedList }}</div>
<button @click="addFn">修改</button>
</template>注意:计算属性中不应该有"副作用"
1.异步请求,修改dom
2.避免直接修改计算属性的值
5、watch函数
侦听一个或多个数据的变化,数据变化时执行回调函数
两个额外参数:
1.immediate(立即执行-进入页面立即触发)
2.deep(深度侦听-默认简单,开启后才能监听复杂类型数据)
代码语言：javascript复制<script setup>
import { ref, watch } from 'vue';
const count = ref(0)
const name = ref("张三")
const changeCount = () => {
count.value
}
const changeName = () => {
name.value = "李四"
}
// 单个数据监听
// watch(count, (newValue, oldValue) => {
// console.info("newValue", newValue)
// console.info("oldValue", oldValue)
// })
// 多个数据监听
// watch([count, name], (newArr, oldArr) => {
// console.info("newArr", newArr)
// console.info("oldArr", oldArr)
// })
const info = ref({ name: '李四', age: 18 })
const changeAge = () => {
info.value.age
}
//immediate作用
// watch(info, (newValue, oldValue) => {
// console.info("newValue", newValue)
// console.info("oldValue", oldValue)
// }, { immediate: true })
//deep作用
// watch(info, (newValue, oldValue) => {
// console.info("newValue", newValue)
// console.info("oldValue", oldValue)
// }, { deep: true })
//精确监听某个对象的属性
watch(() => info.value.age, (newValue, oldValue) => {
console.info("newValue", newValue)
console.info("oldValue", oldValue)
})
</script>
<template>
<div>{{ count }}</div>
<button @click="changeCount">改数字</button>
<div>{{ name }}</div>
<button @click="changeName">改名称</button>
<div>{{ info }}</div>
<button @click="changeAge">改年龄</button>
</template>6、生命周期
代码语言：javascript复制选项式api 组合式api
beforeCreate/created setup
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmountedonMounted生命周期
代码语言：javascript复制
<script setup>
import { onMounted } from 'vue';
// 以前是beforeCreate/created 现在直接写在setup中既可
const getList = ()=>{
setTimeout(()=>{
console.log("发送请求,获取数据")
},2000)
}
//一进入页面的请求
getList()
//如果要在mounted中执行的
onMounted(() => {
console.log("onMounted生命周期")
})
onMounted(() => {
console.log("onMounted生命周期2")
})
</script>
<template>
</template>
