vue3

[ ref & reactive ]

二者都是用来定义响应数据对象的
ref: 支持原始类型如 string，获取和设置 ref 的值时需要通过其value属性获得，也就是 name.value()
reactive: 只支持对象，获取 reactive 相应对象的值时可以直接获取不需要通过 value 属性。
ref 可以整体进行替换，而 reactive 只能修改设置对象内部属性，无法整体替换相应对象。
reactive 对象可以通过 toRefs 函数，将其属性结构为 ref 对象
总之，如果侧重于相应对象整体，或者要对响应对象进行解构操作，用 ref，侧重于相应对象局部，用 reactive

[ upnlugin-auto-import 插件 ]

该插件可以自动解构出vue的相关属性方法，不用自己手动去解构导入例如 ref，watch ...
该插件需要npm安装，然后再 vite.config.js文件中进行配置，具体配置方法如下：

import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router'] // 自动导入 vue 和 vue-router 相关函数
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

[ 生命周期 ]

https://cn.vuejs.org/guide/essentials/lifecycle.html

[ toRefs & computed ]

toRefs: 用来结构ref响应对象
computed 是一个函数，接受一个get回调或者包含get和set方法的对象作为参数。

<template>
  <div>
    <input type="text" v-model="msg">
    <button @click="computedBtn">computedBtn</button>
    <br>
    <button @click="setBtn">setBtn</button>
  </div>
</template>
<script setup>
  // computed
  const msg = ref('')
  let newMsg = computed({
    get: () => {
      return msg.value + ':'
    },
    set: val => {
      msg.value = val.toUpperCase()
    }
  })
  const computedBtn = () => {
    msg.value = newMsg.value
  }
  const setBtn = () =>{
    newMsg.value = msg.value
    msg.value = newMsg.value
    console.log(msg.value)
  }

</script>

[ watch ]

watch 有三种写法，或者说是两种，因为前两种比较像
watch 函数接受三个参数：被监听对象/对象数组，处理函数，处理选项。
第三个可选的参数是一个对象，支持以下这些选项：
- immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。
- deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。参考深层侦听器。
- flush：调整回调函数的刷新时机。参考回调的刷新时机及 watchEffect()。
- onTrack / onTrigger：调试侦听器的依赖。参考调试侦听器。
文档参考

<template>
  <input type="text" v-model="msg">
  <input type="text" v-model="obj.arr">
  <input type="text" v-model="obj2.arr">
</template>
<script setup>
  // 写法一 监听字符串对象
  const msg = ref('this is message')
  watch(msg, (newVal, oldVal)=>{
    console.log(msg.value)
  })
  
  // 写法二 监听完整对象
  const obj = reactive({
    arr: ['a', 'b', 'c']
  })
  watch(obj,(newVal, oldVal)=>{
    console.log(obj.arr)
  })

  // 写法三 监听对象属性
  const obj2 = reactive({
    arr: ['a', 'b', 'c']
  })
  watch(()=>obj2.arr, (newVal, oldVal)=>{
    console.log(obj2.arr)
  })

  // 立即监听 监听初始化时执行
  watchEffect(()=>{
    // code ...
  })
</script>

[ 事件 ]

vue中数据是单向传递的，如果父组件要得到子组件的值，可以通过在子组件中触发自定义事件，在父组件中监听该事件并进行处理来实现。

// emit
// 父组件有一个span 其颜色会根据另一个属性而变化 子组件会影响到该值，通过事件来改变值的内容 从而影响到颜色改变
<script setup>
import Color from './components/Color.vue'
  const color = ref('red')  
  const changeColor = newColor =>{
    color.value = newColor
  }
</script>
<template>
  <span :class="color">COLOR</span>
  <br>
  <Color @to-color="changeColor" />
</template>
<style scoped>
span {
  font-size: 5em;
}
  .red {
    color: red;
  }
  .blue {
    color: blue;
  }
</style>

<template>
    <button @click="$emit('toColor', 'red')">RED</button><br>
    <button @click="$emit('toColor', 'blue')">BLUE</button><br>
</template>
<style scoped>
button {
    margin: 1em;
    font-size: 2em;
}
</style>