vue3常用的api

1.ref

在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新

<template>
  <div>
    <div>{{  sum }}</div>
        <div>
        <el-button @click="addClick">+1</el-button>
        </div>
  </div>
</template>


<script setup lang="ts">
import { ref } from 'vue'
const sum = ref<number>(0)
const addClick = ()=> {
//注意 调用ref的值时一定要加'.value'不然会报错 
  sum.value += 1
}
</script>

<style lang="scss" scoped>

</style>

注意 ref函数仅能监听基本类型（number, string等）的变化，不能监听复杂类型的变化（比如对象、数组）

2.reactive

reactive的用法与ref的用法相似，也是将数据变成响应式数据
reactive适用于复杂数据类型，比如对象和数组

<template>
  <div>
   {{  form.num }}
        <div>
        <el-button @click="addClick">+1</el-button>
        </div>
  </div>
</template>


<script setup lang="ts">
import { reactive } from 'vue'
interface RuleForm {
  num: number
}
const form = reactive<RuleForm>(
  {
    num: 0
  }
)
const addClick = ()=> {
  form.num += 1
}


</script>

<style lang="scss" scoped>

</style>

​​​​

3.vue3.2 组件中引入其他组件

在vue2.x中，引入的组件是需要在components中声明的，但是在vue3.2中，你可以直接使用。

<script setup>
import CustomComponent from './CustomComponent/main.vue'
</script>

<template>
  <CustomComponent></CustomComponent> 
  //可直接使用，不用在使用components中声明
</template>

一.父组件向子组件传值

父组件向子组件传值的时候，子组件是通过props来接收的，然后以变量的形式将props传递到setup语法糖果中使用（defineEmits的到来！）。如下图所示：
父组件传值

<template>
  <div class="hello">
  我是父组件
  <!-- 父组件通过:变量(这里是info)绑定值 -->
   <Child :info="parentMsg"></Child>
  </div>
</template>
 
<script setup>
import Child from './Child'
import {ref} from 'vue'
const parentMsg=ref('父组件传递值是a')
 
</script>
 
<style scoped>
 
</style>

子组件接收值

<template>
<!-- info是父组件传递过了的值 -->
  <div>我是子组件拿到了父组件的值是{{props.info}}</div>
</template>
 
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  //子组件接收父组件传递过来的值
  info: String,
  default:'当前默认值'//如果没有传递参数,默认值是这个
})
 
</script>
<style>
</style>

二.子组件像父组件传值：

vue3中子组件向父组件传递值和vue2.x的区别是vue2.x使用的是 $emit而vue3使用的是emit，它们的传值一样都是方法加值，即vue2.x的是this.$emit(‘方法名’,‘传递的值(根据需要传或者不传)’)，vue3的setup语法糖的是defineEmits。vue3的子传父方式如下所示

子组件

 
<script lang="ts" setup>
import { ref,reactive，defineEmits } from 'vue'
 
//子组件调用父组件的方法，
//父组件的调用子组件的地方写上@onMySonFunc="fatherFunc"
const myEmit = defineEmits(["onMySonFunc"])//这样就调用到父组件的fatherFunc方法了
 
//传递参数： "调用父组件的方法"和666666
myEmit("onMySonFunc","调用父组件的方法",666666)
</script>

父组件
父组件@onMySonFunc=“funcToSon”，这样上面的子组件就能调用到父组件的funcToSon()方法了

<template>
<!--子组件调用父组件的funcToSon()方法-->
<Child @onMySonFunc="funcToSon"></Child>
</template>
 
<script lang="ts" setup>
import { ref,reactive} from 'vue'
import Son from "./son.vue"//引入子组件
 
const funcToSon = (name:any,id:number)=>{
	console.log("子组件调用了父组件的funcToSon()方法",id)
	return {message:name}
}
</script>

三.组件用provide()向儿子组件和孙子，孙孙子传递参数的方法

1.父组件provide传递参数到其他子孙组件

<script lang="ts" setup>
import { provide } from 'vue'
provide('test001', "987654321")
//provide传递test001的参数，值是987654321到子孙节点
</script>

2.儿子，孙组件用inject接收父组件传递过来的参数

<script lang="ts" setup>
import {inject} from "vue"
 
//儿。孙子组件用inject接收它爷爷组件传递过来的参数
const provideFatherStr = inject('thisFromGrandFather')
</script>

watch监听的不同情况

1 监听单个refimpl数据

import { ref, watch, reactive } from "vue";
let name = ref("moxun");
let age = ref(18);
let person = reactive({
  Hobby: "photo",
  city: {
    jiangsu: {
      nanjing: "张三",
    },
  },
});
watch(name, (newName, oldName) => {
  console.log("newName", newName);
});

2 监听多个refimpl数据

方式一：vue3允许多个watch监听器存在

watch(name, (newValue, oldValue) => {
  console.log("new", newValue, "old", oldValue);
});
watch(age, (newValue, oldValue) => {
  console.log("new", newValue, "old", oldValue);
});

方式二：将需要监听的数据添加到数组

watch([name, age], (newValue, oldValue) => {
  // 返回的数据是数组
  console.log("new", newValue, "old", oldValue);
});

3 监听proxy数据

---

1.此时vue3将强制开启deep深度监听
2.当监听值为proxy对象时，oldValue值将出现异常，此时与newValue相同

---

// 监听proxy对象
watch(person, (newValue, oldValue) => {
  console.log("newValue", newValue, "oldValue", oldValue);
});

4 监听proxy数据的某个属性

需要将监听值写成函数返回形式,vue3无法直接监听对象的某个属性变化

watch(
  () => person.Hobby,
  (newValue, oldValue) => {
    console.log("newValue",newValue, "oldvalue", oldValue);
  }
);

注意
当监听proxy对象的属性为复杂数据类型时，需要开启deep深度监听

watch(
  () => person.city,
  (newvalue, oldvalue) => {
    console.log("person.city newvalue", newvalue, "oldvalue", oldvalue);
  },{
    deep: true
  }
);

5 监听proxy数据的某些属性

watch([() => person.age, () => person.name], (newValue, oldValue) => {
  // 此时newValue为数组
  console.log("person.age", newValue, oldValue);
});