【Vue3】学习笔记

1. 组合式API入口 setup

<script setup>
import { ref } from 'vue';

const count = ref(100)

const setCount=()=>{
  count.value++
}

</script>

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

2. 组合式API reactive 和 ref
   区别 ：
   reactive ：不适合基础数据类型
   ref: 适合所有数据类型包含 基础数据类型
   项目中更推荐使用 ref

3. 组合式API computed

原始数组中的数据发生变化时，计算属性中的数组也会发生变化

<script setup>
import { computed, ref } from 'vue';

//定义一个数组
const list = ref([1,2,3,4,5])

//计算属性 获取数值大于2的数组
const computedList = computed(()=>{
  return list.value.filter(item=>item > 2)
})
</script>

<template>
  <div>
    原始响应式数组 {{ list }}
  </div>
  <div>
    计算属性数组 {{ computedList }}
  </div>
</template>

4. 组合式API watch

作用：监听一个或者多个的数据变化，数据变化时执行回调函数
watch参数 ：1. 需要监听的数据 2：回调函数 3：执行时机（immediate:true）

监听单个数据：

<script setup>
import { computed, ref, watch } from 'vue';

//定义一个响应式数值
const count = ref(0)
//数据自增方法
const setCount = ()=>{
     count.value++
}

//监听单个数据发生变化
watch(count,(newVal,oldVal)=>{
console.log(`数据发生变化,新数值${newVal},老数值：${oldVal}`);
},{
    //监听器创建时立即执行回调 (选填参数)
    immediate:true
})
</script>

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

监听多个数值

任何一个数据发生变化，都会执行回调函数

<script setup>
import { computed, ref, watch } from 'vue';

//定义一个响应式数值
const count = ref(0)
const name = ref('jerry')

const setCount = ()=>{
  count.value++
}

const setName=()=>{
  name.value = "tom"
}

//监听多个数据发生变化
watch(
  [count,name],
  ([newCount,newName],[oldCount,oldName])=>{
    console.log(`数据发生变化,新数值${newCount},老数值：${oldCount}`);
    console.log(`数据发生变化,新数值${newName},老数值：${oldName}`);
  },{
    //监听器创建时立即执行回调
    immediate:true
  }
)
</script>

<template>
<button @click="setCount">{{ count }}</button>
<button @click="setName">{{ name }}</button>
</template>

深度监听数据

当数据为对象格式的时候，需要增加 watch 第三个 对象参数 deep:true 才会执行回调函数
deep 开启时会有性能损耗，尽量避免开启deep

<script setup>
import { computed, ref, watch } from 'vue';

//定义一个响应式数值
const state = ref({count:0})

const changeState = ()=>{
  state.value.count++
}

//watch 深度监听数据变化 deep参数 为true
watch(state,()=>{
  console.log('count 变化了');
},{
  //增加此参数 才会执行回调函数
  deep:true
})
</script>

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

精确监听对象的某个属性

<script setup>
import { computed, ref, watch } from 'vue';

//定义一个响应式数值
const state = ref({
  name:'tom',
  age:20
})

const changeName = ()=>{
  state.value.name = 'jerry'
}

const changeAge = ()=>{
  state.value.age++
}

//watch 精确监听对象的某个属性
watch(
  ()=>state.value.age,
  ()=>{
    console.log("年龄变化了");
  }
)
</script>

<template>
  <div>
    姓名: {{ state.name }}
    <br>
    年龄: {{ state.age }}
  </div>
<button @click="changeName">{{ state.name }}</button>
<button @click="changeAge">{{ state.age }}</button>
</template>

5. 组合式API 父子通讯 【父传子】

父组件

<script setup>
//父组件
import { ref } from "vue";
import SonVue from "./components/SonVue.vue"
const age  = ref(23)
</script>

<template>
  <!-- 1. 绑定 message 和 age 属性 -->
    <SonVue :age="age" message="this is parent message" />
</template>

子组件

<script setup>
//子组件
// 2. 通过defineProps 接收子组件传递的数据
const props = defineProps({
    message:String,
    age:Number
})

</script>

<template>
    {{ message }}
    {{ age }}
</template>

6. 组合式API 父子通讯 【子传父】

父组件

<script setup>
//父组件
import SonVue from "./components/SonVue.vue"

const getMsg = (msg)=>{
  console.log(msg);
}
</script>

<template>
  <!-- 1. 绑定 自定义事件  -->
    <SonVue @get-message="getMsg"/>
</template>

子组件

<script setup>
//子组件
// 2. 通过 defineEmits 生成 emmit 方法
const emmit = defineEmits(['get-message'])

const sendMsg=()=>{
    // 3. 触发自定义事件 并传递参数
    emmit('get-message','这是子组件数据')
}

</script>

<template>
    <button @click="sendMsg">sendMsg</button>
</template>

7.组合式API ref模版引用

defineExpose 暴漏 属性或者方法

父组件

<script setup>
//父组件
import { onMounted, ref } from "vue";
import SonVue from "./components/SonVue.vue"

const sonRef = ref(null)

onMounted(()=>{
  console.log(sonRef);
})
</script>

<template>
    <SonVue ref="sonRef"/>
</template>

子组件

<script setup>
import { ref } from 'vue';

//子组件
const name = ref('test name')

const setName = ()=>{
    name.value = "this is tom"
}

defineExpose({
    name,
    setName
})

</script>

<template>
    <span>{{ name }}</span>
</template>

8.组合式API provide 和 inject

顶层组件向任意底层组件传递数据和方法，实现跨层组件通讯
顶层组件

<script setup>
//顶层组件
import { onMounted, provide, ref } from "vue";
import SonVue from "./components/SonVue.vue"

//提供数据
provide('data-key','this is top data')
</script>

<template>
    <SonVue ref="sonRef"/>
</template>

底层组件

<script setup>
//底层组件
import { inject, ref } from 'vue';

//提取数据
const data = inject('data-key')
</script>

<template>
    <span>{{ data }}</span>
</template>