【BlogAdmin升级2】VUE3重点函数API说明
1、setup选项的写法和执行时机
<script>export default{setup(){},beforeCreate(){}}</script>
执行时机:
1.Renderer(encounters component)2.setup(Composition API)3.beforeCreate4.init Options API
setup特点
1.执行时机比beforeCreate还要早
2.函数中是获取不到this
3.数据和函数需要在setup最后return才能在模板中应用
4.可以通过setup语法糖简化
举例说明：
<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()
接受对象类型数据的参数传入并返回一个响应式的对象
<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就行调用
<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下计算属性只是修改了写法
<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(深度侦听-默认简单,开启后才能监听复杂类型数据)
<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、生命周期
组合式apisetupbeforeMount onBeforeMountmounted onMountedbeforeUpdate onBeforeUpdateupdated onUpdatedbeforeUnmount onBeforeUnmountunmounted onUnmounted
onMounted生命周期
<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>