组件中的使用：常用属性、方法等的对比
(1) 生命周期 (2) 变量的定义与使用 (3) 方法的定义与使用 (4) 父子组件间的数据交互 (5) computed计算属性和watch的使用
其中(1)(2)(3)已在上篇文章中介绍，本篇文章将介绍(4)、(5)
(4) 父子组件间的数据交互
写法基本没变，只是子组件接收的方式有小变化，所以vue2的写法就不具体描述了
1) 父传子 props用法
vue2在子组件的写法，是声明了传值的属性名后在方法中用 this.传值的属性名 就可以使用了，
只有这点与vue3有区别其它的都一样，下面为vue3写法。
父组件中：<子组件名称
传值的属性名="传值的值"
传值的属性名2="传值的值2"
/>
在子组件中：
<template>
{{传值的属性名}}
</template>
1.普通写法
<script>
export default defineComponent({
// 对传的值不限制
props：[传值的属性名,传值的属性名2]
// 对传的值进行限制
props：{
传值的属性名：{
type：number, // 值的类型
default：100, // 默认值
}，
传值的属性名2：{
type：number，
required:true, // 是否必传
}
}
// 注意props不能结构，不然会破坏其响应性
// 从这个里开始vue2和vue3有区别,其他的都一样
set(props){
props.传值的属性名
props.传值的属性名2 // 使用
}
}
</script>
2.使用setup语法糖
<script setup>
defineProps([传值的属性名])
defineProps({
传值的属性名:{
type:number,
required:true
}
})
调用直接写传值的属性名就行。如传的是list ，就直接写list就是使用了
</script>
2) 子传父 emit用法；
在vue2中是直接在子组件中用 this.$emit(传值的方法名,参数) 就调用了，
不用声明什么，这点和vue3有点区别，下面为vue3写法。
父组件中：<子组件名称
@传值的方法名="父组件中的函数"
@传值的方法名2="父组件的函数2"
/>
在子组件中：
1.普通方式
<script>
export default defineComponent({
emit：[传值的方法名,传值的方法名2]
// content可以解构
// 这个为content不解构写法
set(props,content){
content.emit(传值的方法名)
content.emit(传值的方法名2,参数) // 调用
}
// content解构写法
set(props,{emit}){
emit(传值的方法名)
emit(传值的方法名2,参数) // 调用
}
}
</script>
2.使用setup语法糖
<script setup>
const emit = defineEmits([传值的方法名，传值的方法名2])
emit(传值的方法名)
emit(传值的方法名,参数) // 调用
</script>
3)父主动获取子信息：ref，子主动获取父信息：$parent
因为和vue2没区别就不再详细说明了 ，
但有一个需要注意，vue3在子组件中，需要把方法或变量暴露出来给父组件，否则父组件将无法获取到，无法使用
暴露方式：defineExpose( { 变量/方法 } )
父获取子 proxy.$refs.ref的名字.对应变量或方法
子获取父 proxy.$parent.对应变量或方法
(5) computed计算属性和watch的使用
1) computed的使用，computed为计算属性，一定要return一个结果。
在return的值变化时会自动调用且重新计算并更新数据，可以主动调用，
但是只在return的值有变化时才重新计算，不然会用缓存里的值。
vue3的写法
import { computed } from 'vue'
export default defineComponent({
setup(){
// 默认写法
const 函数名 = computed(()=>{
return 值
})
// 主动更新的写法
const 函数名2 = computed(()=>{
// 默认写法的获取值
get：()=>{
return 值
},
// 主动设置
setter:()=>{
设置值的代码
}
})
return{
函数名,
函数名2
}
}
})
// vue2的写法 因为里面的写法都是一样的，所以主动更新的写法就不再写了
export default{
computed:{
函数名(){
return 值
}
}
}
2)watch的使用，watch为监听属性，监听到变量变化后调用其内函数做点什么操作，
不能主动调用，没有缓存，不一定要return。
vue3写法
import { watch,watchEffect } from 'vue'
export default defineComponent({
// vue3中监听变量可以是多个，所以监听变量有多种写法
// 1.监听一个变量：变量名
// 2监听多个变量可以写为：[变量1，变量2]
// 3.监听对象属性的：()=>{ 对象.对象属性 }
watch(监听变量，(newValue，oldValue)=>{
对应操作
},{immediate:true,deep:true})
// vue3多了个watchEffect，成为watch的副作用,其与computed有点像，
// 但是其注中的过程，可以不需要return，用到哪个属性就监听哪个属性
// 每次修改变量都会执行副作用
watchEffect(()=>{
const 变量名 = xx
console.log(变量名)
})
})
// vue2写法 监听变量的变化进行操作
export default{
data(){
return{
变量名:值
}
},
watch:{
变量名(newValue,oldValue){
对应操作代码
},
immediate:true, // 是否初始化就执行一次
deep:true, // 是否开启深层次监听
}
}
注意：computed是注重结果，watch是在于做点什么，所以一般纯计算的用computed，需要发送请求或者其它复杂操作的用watch
作者：博客园-DDjans，转载时请注明来源。
(请勿将文章用在任何商业用途，违者将承担相应法律责任)