vue3.2基本操作，复习指南

1、ref： 单个数据使用ref

2、reactive： 对象使用

3、计算属性computed：

import {computed,ref} from 'vue'
let count=ref(1)
let double=computed(()=>{
  return count.value*2
})

4、toRefs：

把reactive数据转成ref

let state=reactive({
  count:1
})
let {count}=toRefs(state)

5、生命周期

生命周期	vue3.2
组件即将挂载	onBeforeMount
组件挂载完成	onMounted
组件即将更新	onbeforeUpdate
组件更新完成	onUpdated
组件即将卸载	onBeforeUnmount
组件已经卸载	onUnmount

生命周期函数可以写多个可以同时触发

6、侦听器：watch、watchEffect：

watchEffect是watch的加强版。 刚开始会触发一次，所依赖的数据发生改变的时候,才会再次触发 触发的时机是数据响应后，DOM更新前,通过调用flush：'post'修改成dom更新后触发

let state=reactive({
  count:1
})
let {count}=toRefs(state)

watchEffect(()=>{
  console.log(count.value)
},{
flush:'post'
})
let chang=()=>{
  count.value+=1
}

watchEffect会返回一个方法，调用方法会停止监听

let stop= watchEffect(()=>{
  console.log(count.value)
})
stop()

watchEffect会携带一个函数 更新前触发和卸载前触发 目的：清除上一次的行为

watchEffect((cb)=>{
  console.log(count.value)
  //更新前触发和卸载前触发
  cb(()=>{
  console.log(before updatae)
  })
})

watch基本使用

watch(count,(newval,oldval)=>{
//newval新值，oldval旧值
  console.log(newval,oldval)
})

7、跨组件通信provide_inject

//App.vue
import HelloWord from './components/HelloWorld.vue'
import {provide,ref} from 'vue'
//传递普通数据
provide('count',1)
//传递响应式数据
let count=ref(0)
provide('count',count)

//HelloWord.vue
import {inject} from 'vue'

let count =inject('count')

8、复用组件功能之use函数

函数命名尽量使用use开头

//compotables/useCounter.js
import {ref} from 'vue'
export function useCounter() {
  const count = ref(0)
  const increment = () => {
    count.value++
  }
  return { count, increment }
}

//App.vue
import {useCounter} from './compotables/useCounter'
let {increment,count}=useCounter()

9、defineProps与defineEmits、defineExpose、defineOptions

defineProps基本使用

//父组件
<template>
 <div>
  <div>父组件</div>
  <HelloWord :count="count" mess="hello"></HelloWord>

 </div>
</template>
<script setup>
import HelloWord from './components/HelloWorld.vue'
import {ref} from 'vue'

let count =ref(1)
</script>

//子组件

<template>
  <div>子组件</div>
  <div>{{ count }}</div>
  <div>{{ mess }}</div>

</template>
<script setup>
import {defineProps} from 'vue'

const props= defineProps({
  count:{
    type:Number,
    required:true,//必传
  },
  mess:{
    type:String,
    default:"" //默认值
  }
})
//读取传递过来的count
console.log(props.count)

</script>

defineEmits基本使用

//子组件
<template>
  <div>子组件</div>
  <div>{{ count }}</div>
  <div>{{ mess }}</div>
  <button @click="click">子组件按钮</button>

</template>
<script setup>
import {defineEmits} from 'vue'

const emit=defineEmits(['custom'])

const click=()=>{
  emit('custom','子组件数据')
}

</script>

//父组件
<template>
  <div>
    <div>父组件</div>
    <HelloWord  @custom="handle"></HelloWord>

  </div>
</template>
<script setup>
import HelloWord from './components/HelloWorld.vue'

let handle = (data) => {
  console.log('父组件方法')
  console.log('子组件传递的值：', data)
}
</script>

defineExpose基本使用

//子组件
<template>
  <div>子组件</div>


</template>
<script setup>
import {defineProps,defineEmits,defineExpose} from 'vue'

const show=()=>{
  console.log('显示 ')
}
defineExpose({
  show,
  count: 1 
})

</script>

//父组件
<template>
  <div>
    <div>父组件</div>
    <HelloWord ref="RefChildExpose"></HelloWord>
    <button @click="touchButton">点击使用子组件方法</button>

  </div>
</template>
<script setup>
import {ref} from 'vue'
import HelloWord from './components/HelloWorld.vue'
const RefChildExpose=ref(null)

const touchButton=()=>{
   // 使用子组件方法
   RefChildExpose.value.show()
  // 输出子组件属性
  console.log(RefChildExpose.value.count)
}

</script>

defineOptions使用

<input v-bind="$attrs"  />

defineOptions({ inheritAttrs: false })