【BlogAdmin升级2】VUE3重点函数API说明

老张的哲学

发布于 2024-02-22 15:45:54

940

发布于 2024-02-22 15:45:54

1、setup选项的写法和执行时机

<script>
export default{
    setup(){

    },
    beforeCreate(){

    }
}
</script>

执行时机:

1.Renderer(encounters component)
2.setup(Composition API)
3.beforeCreate
4.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、生命周期

选项式api                  组合式api
beforeCreate/created       setup
beforeMount                onBeforeMount
mounted                    onMounted
beforeUpdate               onBeforeUpdate
updated                    onUpdated
beforeUnmount              onBeforeUnmount
unmounted                  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>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-02-03，如有侵权请联系 cloudcommunity@tencent.com 删除

数据