vue3组合式api

组合api入口：

<script setup>   //vue3的语法糖，替代export default {setup(){...}}

</script>  

在setup中的this不再指向组件实例

reactive函数和ref()函数：

import {reactive ,ref} from "vue";

const a = reactive({      //reactive函数返回一个响应式对
  person:{
    name:"张三",
    age:"12"
  }
})

const Add = ()=>{
  a.person.age++
}


-----------------------------------

const b = ref(0)     //ref也返回一个响应式对象，不过在脚本区域更改对象的值要使用.value

const Add_b = ()=>{
  b.value++
}

reactive只能接收对象类型参数，ref可以接收简单数据类型参数和对象类型参数
ref内部依赖reactive实现

通过打印ref返回的对象可知，它内部存在value属性来存值，所以修改时需要调用value属性

computed：

import {computed, reactive, ref} from "vue";

const arr = ref([1,2,3,4,5,6,7,8])

const arr2 = computed(()=>{         //导入computed函数，使用computed函数
  return arr.value.filter(item => item>2)
})

注意不要在computed内做计算之外的事情，原则上不要直接修改计算属性的值

watch：

<template>
<button @click="Add">{{count}}</button>
</template>

<script setup>

import {computed, reactive, ref, watch} from "vue";

const count = ref(0)             //定义一个响应式数据

const Add = ()=>{
  count.value++
}
watch(count,(value, oldValue)=>{ 		//传入一个对象，拥有value，oldvalue两个参数
  console.log("count发生变化"+value+"   "+oldValue)
}，
 {
      immediate:true    				//可选参数：immediate监听器创建完成就执行一遍，之后监听变化继续执行
 })

</script>

watch的深度监听与精准监听：

<template>
<button @click="Add">{{state.count}}</button>
</template>

<script setup>

import {computed, reactive, ref, watch} from "vue";
const state = ref({count:0})
const Add = ()=>{
state.value.count++
}
watch(state,(value,oldValue)=>{
  console.log("count改变"+value+"   "+oldValue)
},{
  // immediate:true,
     deep:true         //watch对于传入的对象类型默认浅监听，不开启deep直接修改state的值watch不会触发
})
</script>


开启deep后watch默认监听对象所有的属性，造成性能损耗

watch(
    ()=>state.value.count,        //将第一个参数换为回调函数，实现对对象某一属性的精准监听
    (value,oldValue)=>{
  console.log("count改变"+value+"   "+oldValue)
},{
  // immediate:true,
 // deep:true
})

组件生命周期函数：

onMounted(()=>{
  console.log("组件挂载完成")
})


组合式api中setup()取代beforCreate和creted
					beforeMounte/mounted
					beforeUpdate/updated
					beforeunmounte/unmounted

父子组件传值:

//父组件

<template>
  
<button @click="Add">{{state.count}}</button>
  <son :message=message></son>    //绑定动态数据
  
</template>

<script setup>
import son from "./components/son.vue";  //导入子组件

const message = ref("父组件传入的值")   //定义动态数据
</script>


//子组件
<template>
  <h1>{{props.message}}</h1>   //展示数据
</template>

<script setup>

const props = defineProps({    //定义一个对象接收编译器宏函数返回的对象
  message:String
})

</script>

子传父:

//子组件

const emits = defineEmits(['getsonmsg'])		//接收父组件的自定义事件

const sent = ()=>{
  emits('getsonmsg','这是子传父的数据')			  //向父组件的自定义函数传递参数
}

<button @click="sent">传值事件</button>			 //触发传值事件



//父组件
 <son  @getsonmsg="getsonmsg"></son>            //向子组件传递自定义事件
------------
const getsonmsg = (msg)=>{                      //以事件的参数形式接收并处理子组件传入的数据
  console.log(msg)
}

ref获取dom对象和组件实例对象：

<template>
  <h1 ref="H1ref">dom实例</h1>   		//给组件实例对象和dom对象ref标识
  <son ref="Sonref"></son>
</template>

<script setup>
import son from "./components/son.vue"

import {onMounted, ref} from "vue";

const H1ref = ref(null)       //获取实例对象
const Sonref = ref(null)

onMounted(()=>{               //操作实例对象，只能在组件挂载完成后操作
  console.log("dom实例:")
  console.log(H1ref.value)
  console.log("组件实例")
  console.log(Sonref.value)
})
</script



//组件实例

<script setup>
const name = ""
defineExpose({       //setup语法糖下组件属性方法默认隐藏，通过defineExpose编译器宏函数暴露指定属性和方法
  name
})
</script>

provide和inject：

//父组件

const data = ref(0)
const Add = ()=>{
data.value++
}

provide('datakey',data)   //父组件提供属性和方法
provide('Addkey',Add)


//子组件

const data = inject('datakey')    //子组件注入
const Add = inject('Addkey')
</script>

provide和inject：

//父组件

const data = ref(0)
const Add = ()=>{
data.value++
}

provide('datakey',data)   //父组件提供属性和方法
provide('Addkey',Add)


//子组件

const data = inject('datakey')    //子组件注入
const Add = inject('Addkey')
</script>