vue文档整理

一、环境配置：

1. npm create vue@latest #安装vue 3.5.13
2. cd projectDir
3. npm install # 安装vue
4. npm run dev # 运行：其实运行的是src/package.json 中的vite命令，和在控制台直接输入vite的效果相同
5. npm run build # 打包 上线版本

二、基础学习：
1. 选项式API:常用的，组合式API:单页项目推荐使用
2. 定义数据时要使用ref(): 触发组件的重新渲染、数据的深层响应性(要使用.value的方式取值)
   要使对象本身具有深层响应性要使用reactive()，只能用于集合类型，不能用于原始数据类型，建议使用ref作为响应式的主要api。
3. attributes:
    v-html: 在当前标签中插入html，并渲染
    v-bind:id(等于:id): 动态绑定id属性，支持同名简写：v-bind:id / :id 表示动态变量的名是id
    v-if: 更高的切换开销
    v-show: 更高的初始渲染开销
    v-for: 不建议v-if 和 v-for 同时使用，但是v-if的优先级要高于v-for，最佳实践：加一个template标签使用v-for，然后在子标签中使用v-if。推荐给v-for提供一个:key属性。
    v-on:click(等于@click): 监听DOM事件
        事件修饰符：@click.once、@click.strop(停止事件传递)
        @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。
        按键修饰符：@keyup.enter:回车键抬起时执行，.enter/.tab/.delete (捕获“Delete”和“Backspace”两个按键)/.esc/.space/.up/.down/.left/.right/.ctrl/.alt/.shift/.meta
        <input @keyup.alt.enter="clear" /><!-- Alt + Enter -->
    v-model: 数据双向绑定
4. await nextTick() //等待DOM更新完成
5. 计算属性:与函数的区别是计算属性有缓存，函数则在每次重新渲染时都会执行，因此计算属性要比函数快
   计算发生的值不应该被更改，可以认为计算属性是其他数据的一个快照，更改快照是没有意义的，建议修改原数据，以产生新的计算属性
    const publishedBooks = computed(() => {
      return auth.value.books.length > 0 ? 'Yes' : 'No'
    })
6. v-bind:class(:class): 特殊增强功能，可以使用对象{active:isActive,box:true}
    isActive==true 渲染结果：class="active box" 
    isActive==false 渲染结果：class="box" 
7. 生命周期：onMounted、onUpdated、onUnmounted......
8. 侦听器: watch
    // let count = ref({count: 0})
    // 侦听对象属性变化
    watch(()=>count.value.count, async (newCount, oldCount) => {
      console.log(newCount)
      console.log(oldCount)
    })

    或

    watch(count, async (newCount, oldCount) => {
      console.log(newCount)//newCount == oldCount 
      console.log(oldCount)//newCount == oldCount 
    }, {deep: true}) // deep true
9. 获取dom元素：
    <input ref="my_input" type="text" />
    /*获取dom元素、也适用获取组件*/
    const inputElement = useTemplateRef('my_input')
    onMounted(()=>{
      inputElement.value.focus() //聚焦
    })

10. 组件：组件命名必须使用大驼峰格式，使用时在DOM 中可以使用<my-component>调用
    1. 子组件获取父组件中的数据可以使用attribute传值的方式，子组件通过props接收，prop接收数据的命名使用小驼峰
    2. 子组件调用父函数
        1. 父组件定义函数
            function logParentMessage() {
              console.log(messages.value)
            }
        2. 调用组件时定义事件属性
            <DemoComponent :data="messages" @parentMethod="logParentMessage"/><!--@parentMethod-->
        3. 在子组件中声明触发的事件：类似props的接收
            const emit = defineEmits({
              parentMethod:{
                type: Function,
                required: true
              }
            })
        4. 在子组件的事件中使用emit调用接收到的父组件中的事件属性
            <button @click="$emit('parentMethod')">调用父组件中的方法</button>
            或
            function callParentMethod(){
                  emit("parentMethod","param");
            }
            <button @click="callParentMethod">调用父组件中的方法</button>
    3. 父组件访问子组件数据：
        1. 使用子组件调用父组件的函数，然后把子组件的数据作为参数传递给父组件，但是该方法是子组件的事件驱动
        2. ref获取：
            const child = ref(null) // 获取子组件对象，常量名的定义要和 组件调用时ref的值相等
            child.value.childMessage // childMessage为子组件的数据
            <DemoComponent ref="child" :data="messages" @parentMethod="logParentMessage">这是插槽内容：这是子组件</DemoComponent>
            // 在子组件中导出数据变量
            defineExpose({
              childMessage,
            })

    4. 父组件调用子组件函数：和父组件访问子组件数据类似，只要把子组件函数在defineExpose中导出即可(上面3.2)
    5. 插槽: slot 类型于div标签中的内容
    6. 单向绑定：prop接收数据时数据变量使用小驼峰，在父组件中传递是使用my-data的格式，因为dom是不区别大小写的，要形成这种良好习惯。
       不建议且不应该在子组件中修改父组件传递过来的数据，如果确实有需要则应该在子组件中copy一个新变量。
        如果传递的是对象，那么在子组件中修改对象的属性，那么父组件中对象的属性也已经改变了，但是不会通知到父组件重新渲染，在父组件中nextTick渲染中会使用子组件修改后的数据。这种情况建议不要传递数组或对象，或者通过10.2调用父组件的函数实现。

    7. 组件数据的双向绑定v-model
        示例一：
            父组件：
                const countModel = ref(10) // 定义数据
                <demo-component v-model="countModel"></demo-component> // 绑定v-model ***注意语法
            子组件：
                const model = defineModel()
                // 修改值
                const changeModel = () => {
                  model.value = model.value + 1
                  console.log('changeModel',model.value)
                }
                // 显示
                <div>子组件中显示v-model的值：{{ model }}</div>
        示例二：
            父组件：
                const bookTitle = ref("this is book title")
                <div>父组件的title:{{bookTitle}}</div>
               <demo-component v-model:title="bookTitle" v-model="countModel"></demo-component> // 绑定v-model ***注意语法
           子组件：
               const title = defineModel('title')
               子组件的title:<input v-model="title" />
    8. 插槽：
        1. <slot>Submit(默认值)</slot>
        2. 具名插槽：
            子组件插槽出口：<slot name="header"></slot><slot name="footer"></slot>
            父组件需要定义v-slot:
                <childCompont>
                  <template v-slot:header><!--简写为#header-->
                    <!-- header 插槽的内容放这里 -->
                  </template>
                </childCompont>
        3. 条件插槽：
            子组件：
            <div v-if="$slots.header" class="card-header">
              <slot name="header" />
            </div>
    9. 依赖注入：用于解决深层子组件使用较远祖先组件中部分数据的问题
        1. 祖先组件注入数据：
            import {createApp, provide, ref} from "vue"
            /*为后代组件提供数据*/
            provide("appVueData", ref("This data from App.vue"))
        2. 深层子组件使用数据
            const appVueData = inject("appVueData", "default value")
        3. 如果要更改祖先组件的数据，应该在祖先组件注入更新方法，然后在较远子组件中调用更新方法
        4. 如果禁止较远子组件更改数据，要用readonly 包装 提供的数据
        5. 如果使用依赖注入的方式，建议使用一个文件维护key，避免key名冲突