vue3的一些用法（一）（父子组件，ref，reactive，watch，computed...）

菜鸟的一些记录，对于vue3和vue2重点肯定是去掌握他的原理，vue3尤大花这么大的功夫去更新肯定是有他的道理，技术是服务业务的。
我的学习方式是在用法中不断去思考他为什么要这么，可能会带来哪些好处，会用之后才去看一些原理性的东西，这样效率会高一些，如果直接去看别人的怎么写，怎么创造的，我的个人情况就是十分钟就睡着了。
记录一些，vue3的一些基本的用法（script标签中写入setup就不用去return，写起来要舒服些，也不用去注册子组件什么的）：

父子组件

子组件

<template>
  <div>
    <h1>this is Test 子组件 {{ props.msg }}!</h1>
    <el-button @click="sonClick">pick me</el-button>
  </div>
</template>

<script setup>
//	api按需引入，这样打包的体积会小一点，这点比较明显
import { onMounted,defineEmits,defineProps} from 'vue';
//	通过ref进行响应式的连接。
const pageName = ref('One');
//子组件的方法
const sonClick = () =>{
  console.log('也要触发这个函数')
  emit('click')
};
//子组件的方法，
const props = defineProps({
  msg: String,
});
//引入emit这个方法。
const emit = defineEmits(['click']);
//引入生命周期挂载阶段。
onMounted(() => {
  console.log(`load success::this is Test Page ${pageName.value}!`);
});
</script>

父组件

<template>
  <div>
    <h1>this is Test 父组件 {{ pageName }}!</h1>
    <one :msg="value" @click="onClick" ></one>
    //不用注册，直接用，直接就可以玩，为其绑定事件，让子组件能够通过emit进行调用，给msg赋值操作，然后子组件拿着玩
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import one from '@/pages/TestPageOne/Index.vue';
//这里引入子组件
const pageName = ref('Two');
const value = ref('测试');
const onClick = () => {
  value.value = '测试通过点击父组件的props传过去的';
}
onMounted(() => {
  console.log(`load success::this is Test Page ${pageName.value}!`);
});
</script>

爷孙，兄弟组件应该也是类似的

ref和reactive

ref 返回一个且可变的响应式对象，有一个.value的属性，可以读取/修改对象的值。
reactive 是创建一个响应式的对象，接受的参数为一个对象，可以使用toRef(infoObj)为对象中的每一个属性创建一个ref，它可以保持对原属性的响应式链接。
toRef给我的感觉就是修改响应式的数据，会影响以前的数据，界面不会更新
ref存在异步的问题

//这里是对象，
const test = ref('测试');
console.log(test.value)//测试
const bosses = reactive({
  name:'庆哥',
  age:18,
});
console.log(toRef(bosses,'name').value )//庆哥
//它的第二个参数代表着是对象的name。

计算和监听

// 计算属性
const change = computed(() => bosses.age * 1 )
//  观察属性
watch(
  change,
  (newVal, oldVal) => {
    console.log(`变化前：${oldVal}`)
    console.log(`变化后：${newVal}`)
  }, {
    immediate: true, // 立即执行
    deep: true // 深度监听
  }
)

大概就是这样了，如果有不对的地方，希望能够指正一下。蟹蟹。下班了， 我跑路了，下会儿聊。