Vue的Api组合式

steup

执行时机，比beforeCreate还要早执行

steup函数中，获取不到this（this是undefined）

数据和函数需要在steup最后return才能在模板中使用

原始复杂写法

<script>
export default {
  setup () {
    // console.log(1, this)  //1 undefiend
    // 数据
    const message = 'Vue3'
    const loginMessage = () => {
      console.log(message)
    }
    return {  //需要return添加才能使用
      message,
      loginMessage
    }
  },
  beforeCreate () {
    console.log(2)
  }
}
</script>

<template>
  <div>{{ message }}</div>  <!-- 没有任何效果 -->
  <button @click="loginMessage">按钮</button>
</template>

语法糖写法

<script setup>
    const message = 'Vue3'
    const loginMessage = () => {
      console.log(message)
    }
</script>

<template>
  <div>{{ message }}</div>
  <button @click="loginMessage">按钮</button>
</template>

reactive

作用：接受对象类型数据的参数传入并返回一个响应式对象

<script setup>
  // 导入reactive
  import { reactive } from 'vue'
  const state = reactive({
    count: 100
  })
  const setCount = () => {
    state.count++
  }
</script>

<template>
  <div>{{ state.count }}</div>
  <button @click="setCount">+1</button>
</template>

ref

作用：接受简单类型或复杂类型数据的参数传入并返回一个响应式对象，推荐使用

<script setup>
  // 导入ref
  import { ref } from 'vue';
  const state = ref(0)
  const setCount = () => {
    state.value++
  }
</script>

<template>
  <div>{{ state }}</div>
  <button @click="setCount">+1</button>
</template>

computed

<script setup>
  // 导入computed
  import { ref, computed } from 'vue';
  // 声明数据
  let list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
  const sumCount = computed(() => {
    return list.value.reduce((item,sum) => {return item += sum}, 0)
  })
  const addFn = () => {
    list.value.push(666)
  }
</script>

<template>
  <div>原始数据{{ list }}</div>
  <div>求和数据{{ sumCount }}</div>
  <button @click="addFn">点击追加666</button>
</template>

watch

作用：监听一个或者多个数据的变化，数据变化时执行回调函数

immediate(立即执行)        deep(深度侦听)

基本语法

<script setup>
  // 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('itwk')
  const addCount = () => {
    count.value++
  }
  const xiuName = () => {
    name.value = 'IT'
  }
  // 监视单个数据的变化
  // watch(count, (newValue, oldValue) => {
  //   console.log(newValue, oldValue)
  // })

  // 监视多个数据的变化
  watch([count, name], (newArr, oldArr) => {
    console.log(newArr, oldArr)
  })
</script>

<template>
<div>{{ count }}</div>
<button @click="addCount">改数字</button>
<div>{{ name }}</div>
<button @click="xiuName">改名称</button>
</template>

immediate

<script setup>
  // 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('itwk')
  const addCount = () => {
    count.value++
  }
  const xiuName = () => {
    name.value = 'IT'
  }
  // 监视单个数据的变化
  watch(count, (newValue, oldValue) => {
    console.log(newValue, oldValue)
  }, {
    // 立即执行
    immediate:true
  })

</script>

<template>
<div>{{ count }}</div>
<button @click="addCount">改数字</button>
<div>{{ name }}</div>
<button @click="xiuName">改名称</button>
</template>

deep

<script setup>
  // 导入watch
  import { ref, watch } from 'vue'
  // 简答类型
  const count = ref(0)
  const name = ref('itwk')
  const addCount = () => {
    count.value++
  }
  const xiuName = () => {
    name.value = 'IT'
  }
  // 复杂类型
  const user = ref({
    name: 'wkIT',
    age: 16
  })
  const xiuage = () => {
    user.value.age++
  }
  watch(user, (newValue) => {
    console.log(newValue)
  }, {
    deep:true //deep深度监视
  })
</script>

<template>
<div>{{ count }}</div>
<button @click="addCount">改数字</button>
<div>{{ name }}</div>
<button @click="xiuName">改名称</button>
<div>{{ user }}</div>
<button @click="xiuage">改user</button>
</template>

生命周期函数

选项式API	组合式API
beforeCreate/created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdata
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted

演示代码：

<script setup>
import { onMounted } from 'vue'

const getList = () => {
  setTimeout(() => {
    console.log('两秒后发送请求')
  },2000)
}
getList()
onMounted(() => {
  console.log('mounted生命周期函数1')
  getList()
})
onMounted(() => {
  console.log('mounted生命周期函数2')
  getList(0)
})
</script>

<template>
  <div></div>
</template>

父子通信

父传子

1.父组件中给子组件绑定属性

2.子组件内部通过props选项接收

父组件代码：

<script setup>
  import son from '@/components/son.vue'
  import { ref } from 'vue'
  const age = ref(16)
  const Count = (n) => {
    age.value += n
  }
</script>

<template>
  <div>
    <h1>父组件 - {{ age }}</h1>
    <button @click="Count(+1)">+1</button>
    <button @click="Count(-1)">-1</button>
    <son car="幻影" :age="age"></son>
  </div>
</template>

子组件代码：

<script setup>
// 通过defineProps编辑器宏生成props方法
  const props = defineProps({
    car: String,
    age:Number
  })
</script>

<template>
  <div class="son">我是子组件 - {{ car }} -- {{ age }}</div>
</template>

子传父

1.父组件中给予子组件标签通过@绑定事件

2.子组件内部通过emit方法触发事件

 父组件代码：

<script setup>
  import son from '@/components/son.vue'
  import { ref } from 'vue'
  const age = ref(16)
  const Count = (n) => {
    age.value += n
  }
  const addcount = (n) => {
    age.value += n
  }
</script>

<template>
  <div>
    <h1>父组件 - {{ age }}</h1>
    <button @click="Count(+1)">+1</button>
    <button @click="Count(-1)">-1</button>
    <son car="幻影" :age="age" @changeCount="addcount"></son>
  </div>
</template>

子组件代码：

<script setup>
// 通过defineProps编辑器宏生成props方法
  const props = defineProps({
    car: String,
    age:Number
  })
  // 通过defineEmits编辑器宏生成emit方法
  const emit = defineEmits(['changeCount'])
  const buy = (n) => {
    emit('changeCount', n)
  }
</script>

<template>
  <div class="son">我是子组件 - {{ car }} -- {{ age }}</div>
  <button @click="buy(+1)">+1</button>
  <button @click="buy(-1)">-1</button>
</template>

模板引用

通过ref标识获取真实的dom对象或者组件实例对象

 父组件代码：

<script setup>
import son from '@/components/son.vue'
import { onMounted, ref } from 'vue'
  const inp = ref(null)
  onMounted(() => {
    console.log(inp.value)
  })
  const clickFn = () => {
    inp.value.focus()
  }
  const testRef = ref(null)
  const clickGn = () => {
    console.log(testRef.value)
    testRef.value.hello()
  }
</script>

<template>
  <div>
    <input ref="inp" type="text">
    <button @click="clickFn">点击让输入框聚焦</button>
  </div>
  <son ref="testRef"></son>
  <button @click="clickGn">获取组件</button>
</template>

子组件代码：

<script setup>
const hello = () => {
  console.log('你好啊')
}
defineExpose({
  hello
})
</script>

<template>
  <div>测试的组件：</div>
</template>

provide和inject

顶层组件像任意的底层组件传递数据和方法，实现跨层组件通信

1.顶层组件通过provide函数提供数据

2.底层组件通过inject函数获取数据

顶层组件：

<script setup>
import { provide, ref } from 'vue';
import Tcenter from './components/Tcenter.vue'
provide('theColor', 'red')
const count = ref(100)
provide('changeBtn', (n)=>{
  count.value += n
})
</script>

<template>
  <div>
    <h1>顶层组件--{{ count }}</h1>
    <Tcenter></Tcenter>
  </div>
</template>

中间组件：

<script setup>
import Tbottom from './Tbottom.vue'
</script>

<template>
  <div>
    <h2>中间组件</h2>
    <Tbottom></Tbottom>
  </div>
</template>

底层组件：

<script setup>
import { inject } from 'vue'
const theColor = inject('theColor')
const changeBtn = inject('changeBtn')
const changeFn = (n) => {
  changeBtn(n)
}
</script>

<template>
  <div>
    <h3>底层组件--{{ theColor }}</h3>
    <button @click="changeFn(+1)">+1</button>
    <button @click="changeFn(-1)">-1</button>
  </div>
</template>