vue3

* vue3支持组合式传参， vue2在创建app对象的时候，会传入一个包含各种选项的对象，选项包括data函数，methods对象，computed对象等等。 vue3在创建app对象的时候，也是传入一个对象，但是对象属性中有一个setup函数，在该函数中可以定义响应对象，函数，computed，甚至watch等，然后将它们放在一个对象里面return出去。 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>

• 父组件可以通过Props向子组件传值，在子组件的setup中要显示的声明这些值，然后才可以使用。
• 插槽可以向子组件中预留位置插入想要插入的组件内容，子组件在预留插槽时也可以通过slot的属性来传值给父组件。