Vue常用指令

插值表达式 {{}}

在Vue.js中，插值表达式（也称为文本插值）使用双大括号{{}}作为占位符来显示数据。它是Vue最基础的数据绑定功能之一，允许你将Vue实例中的数据动态地插入到HTML模板中。

概念

• 文本插值 ：通过{{}}语法，Vue允许你在HTML元素内嵌入变量或表达式的值。当Vue实例中的数据变化时，页面上对应的值也会自动更新。
• 响应式更新：Vue的响应式系统会监听这些数据的变化，并在数据更新时自动刷新相关的视图部分。

功能

• 动态显示数据：可以用来显示Vue实例中定义的数据属性。
• 执行简单的JavaScript表达式 ：除了直接展示变量值外，还可以在{{}}中执行简单的JavaScript表达式，如三元运算符、算术运算等。

语法

基本语法是在HTML标签内部使用双大括号包含需要显示的数据或表达式：

<p>{{ dataPropertyName }}</p>

或者对于更复杂的表达式：

<p>{{ condition ? 'True' : 'False' }}</p>

v-show

显式实现display的效果 ：v-show="false" display:none

通常让一个元素显式、隐藏(display:none; visibility: hidden)
原生的js：style
jQuery: css
vue : v-show v-if
<h1 v-for="count in 5" v-text="count" v-show="false"></h1>

v-if、v-else-if、 v-else

效果等同于v-show 但是性能和安全跟v-show不一样

<h1 v-if="a < 1"> 我是小于1</h1>
<h1 v-else-if="a == 1"> 我是等于1</h1>
<h1 v-else> 我是大于1</h1>

v-if 与 v-show 的区别

1、 v-if在false的时候连同代码都从文档流移除掉。 v-show在false的时候，元素还在，只是样式变成了display:none

2、 v-if:性能更差，安全性更高 通常用于涉密的场景 v-show:性能更优，但是安全性更低 通常用于需要频繁在显式于隐藏之间切换的场景（比如：菜单） 但是通常，v-if和v-show我们是混用的。

v-on

v-on:事件名称 ="绑定事件"

@click   v-on: 用@来代替

<button type="button" @click="add" >添加</button>
<input type="text" v-model="condition" placeholder="请输入搜索的内容" @keydown.13="search()">

v-bind

v-bind:"属性名"="绑定元素"

实现对元素的属性的绑定

:属性名  v-bind:用:代替

js：document.getElementById('id').setAttribute(属性名，属性值)
vue:
    <h1 v-bind:yibin="msg">绑定了title属性，鼠标悬浮过来看看</h1>

v-for

可以对数字、数组、对象等进行循环遍历

<h1 v-for="(item, index) in arr" v-text="item"></h1>
item: 表示遍历过程的每一项元素 元素可能是简单地数据类型也可能是复杂的数据类型
index: 表示遍历过程的每一项元素的下标
v-for的作用域：向内，即所有的子元素都可以共享item index arr三个变量
缩写：（即舍弃index） v-for="item in arr"

v-model

双向绑定：就是既可以将数据绑定到元素上，也可以将元素上的值绑定到数据上（所以双向绑定仅仅适用于表单类的标签）==>即数据改变页面元素值改变，元素值改变时数据也改变

<input v-model="formData.name" placeholder="请输入用户名">
<input type="password" v-model="formData.pwd" placeholder="请输入密码">

methods选项

在Vue.js中，methods选项用于定义需要在Vue实例中使用的函数。这些方法可以用来处理用户输入、响应事件、执行计算等操作。

关键概念

1. 定义方法 ：在Vue实例的methods对象内定义方法。
2. this关键字 ：在Vue的方法内部，this指向当前Vue实例，允许访问实例的数据属性和其它方法。
3. 事件处理器 ：常用作DOM事件的处理器（如点击、输入等），也可以通过v-on指令绑定到元素上。
4. 自动绑定this ：Vue会自动将方法中的this绑定到创建该方法的Vue实例，即使是在异步回调中。

语法结构

new Vue({
  // 其他选项...
  methods: {
    methodName() {
      // 方法逻辑
    },
    anotherMethod(param) {
      console.log(param);
    }
  }
});

注意事项

• 不要使用箭头函数 ：在Vue的methods中避免使用箭头函数，因为箭头函数不会绑定this，这会导致this指向窗口对象或未定义，而不是Vue实例。

  // 错误示范
  methods: {
    handleClick: () => {
      console.log(this); // 这里的this不是Vue实例
    }
  }

• 方法与计算属性的选择 ：对于依赖于数据状态的复杂逻辑，考虑使用计算属性（computed）代替方法，因为计算属性会基于其依赖进行缓存，而方法每次都会重新执行。

computed

基本概念

• 计算属性：用于声明依赖于其他属性的属性，当依赖属性变化时，计算属性会自动更新。
• 缓存机制：计算属性基于其依赖进行缓存，只有依赖变化时才会重新计算，否则直接返回缓存值。

完整语法

计算属性可以通过 get 和 set 方法定义：

• get：用于获取计算属性的值。
• set：用于设置计算属性的值（当计算属性被赋值时触发）。

语法结构

computed: {
  属性名: {
    get() {
      // 返回计算属性的值
      return 依赖的属性或逻辑;
    },
    set(newValue) {
      // 当计算属性被赋值时，更新依赖的属性
      依赖的属性 = newValue;
    }
  }
}

• get：用于计算并返回一个值，适合需要依赖其他属性动态计算的场景。
• set：用于反向更新依赖的属性，适合需要双向绑定的场景。

完整示例

<template>
  <div>
    <p>First Name: <input v-model="firstName" /></p>
    <p>Last Name: <input v-model="lastName" /></p>
    <p>Full Name: <input v-model="fullName" /></p>
    <p>Computed Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      set(newValue) {
        const names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
};
</script>

运行效果：

1. 修改 firstName 或 lastName，fullName 会自动更新。
2. 修改 fullName 输入框的值，firstName 和 lastName 会自动拆分并更新。

注意事项

• set 方法：只有在计算属性被赋值时才会触发。
• 依赖追踪 ：get 方法中使用的属性会被 Vue 自动追踪，当这些属性变化时，get 方法会重新执行。
• 避免副作用 ：不要在 get 或 set 中执行异步操作或修改其他状态。

watch属性

1.说明

watch属性，可以监听data中指定数据的变化，然后可以触发这个watch对象中对应的处理函数。 监听的数据名作为watch对象的属性名，指向对应的处理函数

处理函数参数：

• 参数一，newVal，新数据。
• 参数二，oldVal，旧数据

2.监听变量

   watch:{
                firstName(newVal,oldVal){
                    console.log('监视到了firstName的变化');
                    this.fullName = newVal+"-"+this.lastName;
                },}

3.监听路由

想要监听路由的改变，即<router-view></router-view>的改变，但它身上没有什么事件，则只能使用watch监听路由地址的改变

   watch:{ //监听路由
        '$route.query'(nv,ov){
            alert(JSON.stringify(nv))
        }}

Vue 生命周期

1. 初始化阶段
   • beforeCreate: 实例刚在内存中被创建，此时还未初始化好data和methods等属性。
   • created: 完成数据观测 (data observer)，属性和方法的运算，watch/event事件回调。但尚未开始DOM编译，$el属性还不可见。
2. 模板编译阶段
   • beforeMount: 在挂载开始之前被调用：相关的render函数首次被调用。虚拟DOM已经生成，但尚未渲染到真实DOM中。
   • mounted: el被新创建的vm.$el替换，并挂载到实例上。这时真实的DOM已经挂载完毕，可以访问到DOM元素。
3. 更新阶段
   • beforeUpdate: 当组件的数据发生变化，页面重新渲染之前触发。此时可以获取最新的data数据，但是界面上显示的信息还是旧的。
   • updated: 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。此时DOM已经被更新，可以执行依赖于DOM的操作。
4. 销毁阶段
   • beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。
   • destroyed: Vue 实例销毁后调用。调用后，Vue实例的所有指令都被解绑，所有事件监听器被移除，所有子实例也都被销毁。

钩子函数

在Vue.js中，钩子函数（Lifecycle Hooks）是指在Vue实例生命周期的不同阶段自动调用的特定函数。这些钩子允许开发者在Vue实例从创建到销毁的过程中执行自定义逻辑，比如初始化页面、获取数据、清理资源等。

初始化阶段

• beforeCreate
  • 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
• created
  • 实例已经创建完成之后被调用。此时已完成数据观测，属性和方法的运算，watch/event事件回调。但是尚未开始DOM编译，$el属性不可见。

模板编译阶段

• beforeMount
  • 在挂载开始之前被调用：相关的render函数首次被调用。虚拟DOM已经生成，但尚未渲染到真实DOM中。
• mounted
  • el 被新创建的 vm.$el 替换，并挂载到实例上之后调用该钩子。这时真实的DOM已经挂载完毕，可以访问到DOM元素。

更新阶段

• beforeUpdate
  • 当组件的数据发生变化，页面重新渲染之前触发。此时可以获取最新的data数据，但是界面上显示的信息还是旧的。
• updated
  • 因为数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。此时DOM已经被更新，可以执行依赖于DOM的操作。

销毁阶段

• beforeDestroy
  • 实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed
  • Vue 实例销毁后调用。调用后，Vue实例的所有指令都被解绑，所有事件监听器被移除，所有子实例也都被销毁。

scoped

在Vue.js的单文件组件（SFC, Single File Component）中，scoped属性用于<style>标签上，以确保样式仅应用于当前组件内的元素。这种方式有助于避免全局样式冲突，使得每个组件都能拥有独立的作用域样式。

概述

• 作用：为组件添加局部作用域的样式，防止样式泄露到其他组件或被其他组件的样式影响。
• 实现原理 ：Vue通过给组件内部的所有元素添加一个唯一的属性（如data-v-f3f3eg9），并将所有样式选择器修改为只匹配具有该属性的元素，来实现样式的局部作用域。

使用方法

在<style>标签中添加scoped属性即可启用局部作用域：

<style scoped>
.example {
  color: red;
}
</style>

这将使.example类的选择器变为类似.example[data-v-f3f3eg9]的形式，从而只对当前组件内的.example类起作用。

深度选择器

有时你需要在父组件中定义子组件内部元素的样式，尽管使用了scoped属性。为此，Vue支持深度选择器，允许你穿透当前组件的作用域来设置嵌套子组件的样式。

• 不同预处理器的支持 ：
  • SCSS/SASS : 使用>>>或者/deep/
  • Less : 使用>>>
  • CSS原生支持 ：使用::v-deep

示例：

/* SCSS/SASS */
<style scoped lang="scss">
.parent >>> .child {
  color: green;
}

/* 或者使用 ::v-deep */
.parent ::v-deep .child {
  color: green;
}
</style>

注意事项

1. 性能考虑 ：虽然scoped可以帮助避免样式冲突，但大量使用可能会影响性能，因为每一个组件都会生成额外的属性选择器。
2. 样式优先级 ：即使使用了scoped，CSS的优先级规则仍然适用。如果外部样式具有更高的优先级，则可能会覆盖scoped中的样式。
3. 动态组件和异步组件：对于动态加载的组件或异步组件，确保正确处理它们的样式作用域问题。
4. 避免过度使用深度选择器：频繁使用深度选择器可能会破坏组件封装性，导致样式难以维护。应尽量保持组件间的样式独立性。

data

在Vue.js中，data选项是Vue实例或组件的核心部分之一，用于定义响应式的数据属性。这意味着当你改变这些数据时，视图会自动更新以反映最新的状态。

基本概念

• 响应性 ：Vue通过data对象中的属性实现了数据的双向绑定。当数据变化时，Vue能够检测到这些变化，并自动更新DOM。
• 初始化 ：data可以是一个函数（特别是对于组件），也可以是一个直接的对象（适用于根实例）。对于组件而言，强烈建议使用函数形式返回一个数据对象，以确保每个实例都能独立维护其自身的状态。

语法结构

根实例

在创建Vue根实例时，你可以直接提供一个对象作为data选项：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    count: 0
  }
});

组件

对于Vue组件，推荐将data定义为一个返回对象的函数。这样做是为了确保每个组件实例都有独立的数据副本，避免不同实例之间的数据共享和冲突：

Vue.component('my-component', {
  data() {
    return {
      message: 'Hello from component!',
      count: 0
    };
  },
  template: '<div>{{ message }} - Count is {{ count }}</div>'
});

数据访问与修改

• 访问数据 ：在模板中，可以直接使用双大括号{{ }}来插入数据；在JavaScript代码中，可以通过this关键字访问数据。

  <p>{{ message }}</p>

  methods: {
    updateMessage() {
      this.message = 'Updated Message';
    }
  }

• 修改数据：通过直接赋值的方式修改数据属性，Vue会自动追踪这些变化并更新视图。

注意事项

1. 不要使用箭头函数 ：在定义data函数时，避免使用箭头函数，因为箭头函数不会绑定正确的this上下文。

   // 错误示范
   data: () => ({ message: 'Hello' })

2. 初始化复杂数据结构 ：对于数组或对象类型的初始值，应该在data中正确地初始化，以便Vue能够建立响应式依赖关系。

3. 响应性限制 ：Vue不能检测到对象属性的添加或删除。为了添加新的响应式属性，应使用Vue.set(object, key, value)方法。

使用this.$emit触发事件

this.$emit允许子组件向父组件发送消息，实现子到父组件的通信。这通常用于通知父组件发生了某些事情或者需要父组件执行某些操作。

在子组件中触发事件

export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', payload); // 触发名为'custom-event'的事件，并传递payload作为参数
    }
  }
}

在父组件中监听事件

<template>
  <child-component @custom-event="handleCustomEvent"></child-component>
</template>

<script>
export default {
  methods: {
    handleCustomEvent(payload) {
      console.log('Received event with payload:', payload);
    }
  }
}
</script>

• 事件名: 需要遵循kebab-case命名法（如果在HTML模板中使用），但在JavaScript代码中定义时可以使用camelCase。
• Payload: 可选地，你可以传递额外的信息给父组件，作为事件处理函数的参数。

注意事项

1. 单向数据流：所有的props都遵循单向数据流原则，即父级prop的更新会向下流动到子组件，但反过来则不行。这意味着你不应该在一个子组件内部改变prop的值。
2. Prop验证：虽然不是必须的，但在开发过程中为props添加验证可以帮助捕捉错误并提高代码质量。
3. 避免使用this.$props ：尽管可以通过this.$props访问所有props，但通常建议直接通过this.propName访问特定的prop。

在Vue.js中，.sync修饰符提供了一种简洁的方式来实现双向绑定的父组件到子组件的数据传递机制。它本质上是一个语法糖，用于简化特定模式下的事件监听和数据更新逻辑。以下是关于.sync修饰符的详细说明。

.sync修饰符

使用.sync修饰符可以让你更方便地处理父组件与子组件之间的双向数据同步，而无需手动定义事件来通知父组件进行状态更新。

使用方法

在父组件中

当向子组件传递一个属性时，可以使用.sync修饰符来创建一个双向绑定：

<template>
  <div>
    <child-component :title.sync="parentTitle"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      parentTitle: '初始标题'
    };
  }
};
</script>

这里的:title.sync="parentTitle"实际上会被扩展为：

• 一个名为update:title的事件监听器被添加到子组件上。
• 当子组件触发this.$emit('update:title', newValue)时，父组件中的parentTitle会自动更新为newValue。

在子组件中

子组件可以通过调用this.$emit('update:title', newValue)来更新父组件的数据：

<template>
  <div>
    <input :value="title" @input="$emit('update:title', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: ['title']
};
</script>

在这个例子中，每当输入框的值发生变化时，子组件都会通过$emit发出一个update:title事件，携带新的值作为参数，从而触发父组件中的相应更新。

注意事项

1. 兼容性 ：虽然.sync修饰符提供了一种简洁的方式来实现双向绑定，但在设计组件时应该谨慎使用。过度依赖双向绑定可能会导致组件间的耦合度过高，影响组件的可维护性和复用性。

2. 替代方案：对于更复杂的状态管理需求，推荐使用Vuex等状态管理模式，而不是依赖于父子组件间的双向绑定。

3. 命名约定 ：使用.sync时，默认情况下事件名是基于传入prop的名字自动生成的（如update:propName），这要求子组件触发的事件名称必须严格匹配这一格式。

ref、 $refs

基本概念

ref 的作用

• 用途：用于在 Vue 中获取 DOM 元素或组件实例的引用。
• 特点 ：
  • 可以在模板中标记元素或组件。
  • 通过 this.$refs 访问标记的元素或组件。
  • 适用于直接操作 DOM 或调用子组件方法。

$refs 的特点

• 是一个对象，存储了所有通过 ref 标记的 DOM 元素或组件实例。
• 仅在组件渲染完成后填充。
• 不是响应式的，避免在模板中过度依赖。

---

使用步骤

1. 定义ref ：在模板中使用ref属性为元素或组件指定一个唯一的标识符。
2. 访问ref ：通过this.$refs访问已定义的引用。

<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.someMethod(); // 调用子组件方法
    }
  }
}
</script>

---

注意事项

生命周期时机

• $refs 只在组件 挂载完成后 才可用。

• 在 mounted 钩子中访问是安全的：

  mounted() {
    console.log(this.$refs.myElement); // 确保 DOM 已渲染
  }

动态 ref

• 动态绑定时，ref 的值可以是变量：

  <template>
    <div v-for="item in items" :key="item.id">
      <div :ref="`item-${item.id}`">{{ item.name }}</div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        items: [
          { id: 1, name: 'Item 1' },
          { id: 2, name: 'Item 2' }
        ]
      };
    },
    mounted() {
      console.log(this.$refs['item-1']); // 访问动态 ref
    }
  }
  </script>

避免滥用

• 推荐场景 ：
  • 直接操作 DOM（如聚焦输入框、滚动到指定位置）。
  • 调用子组件方法。
• 不推荐场景 ：
  • 避免通过 ref 直接修改子组件状态（应使用 props 和事件）。

---

最佳实践

封装逻辑

• 将 DOM 操作封装到方法中，避免直接在模板中操作 $refs。

  methods: {
    scrollToElement() {
      const el = this.$refs.targetElement;
      if (el) {
        el.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }

结合 Composition API

• 在 Vue 3 中，可以使用 ref 函数创建响应式引用：

  import { ref, onMounted } from 'vue';
  
  export default {
    setup() {
      const myInput = ref(null);
  
      onMounted(() => {
        myInput.value.focus(); // 访问 DOM
      });
  
      return { myInput };
    }
  }

类型安全（TypeScript）

• 为 $refs 添加类型注解：

  export default {
    mounted() {
      const input = this.$refs.myInput as HTMLInputElement;
      input.focus();
    }
  }

$nextTick

this.$nextTick 是 Vue.js 提供的一个方法，用于在下次 DOM 更新循环结束之后执行延迟回调。这个方法非常有用，尤其是在你需要等待 Vue 完成某些操作（如数据更新导致的视图更新）后再进行进一步的操作时。

基本概念

当Vue检测到数据变化时，它会启动一个异步更新队列，并缓冲在同一事件循环中发生的所有数据变更。例如，当你修改了响应式数据，Vue不会立即重新渲染DOM，而是将这些更改放入一个队列中，稍后以高效的方式刷新和应用这些更新。使用 this.$nextTick 可以让你在DOM更新完成后执行代码。

语法

this.$nextTick 可以接受一个回调函数作为参数，也可以不带参数直接返回一个Promise对象（如果环境支持Promise的话）。

使用回调函数

// 修改数据
this.message = 'Hello Vue!';
// 在DOM更新之后执行
this.$nextTick(function () {
  // DOM 更新了
  console.log('DOM has been updated');
});

使用Promise

如果你的应用环境支持Promise，你也可以这样使用：

this.message = 'Hello Vue!';
this.$nextTick().then(function () {
  // DOM 更新了
  console.log('DOM has been updated');
});

场景示例

1. 处理DOM更新后的操作 ：假设你需要在数据更新并引起DOM更新之后获取某个元素的实际尺寸或位置，可以使用this.$nextTick来确保在DOM更新完成之后再进行相关操作。

   methods: {
     updateMessage() {
       this.message = 'Updated Message';
       this.$nextTick(() => {
         // 在DOM更新后执行，比如获取更新后的DOM元素尺寸
         console.log(this.$refs.myElement.offsetHeight);
       });
     }
   }

2. 聚焦输入框 ：当你显示一个编辑区域并希望自动聚焦到输入框时，可能需要确保该输入框已经被添加到了DOM中。这时可以使用this.$nextTick。

   methods: {
     handleEdit() {
       this.isShowEdit = true;
       this.$nextTick(() => {
         this.$refs.inputField.focus();
       });
     }
   }

总结

• 用途 ：this.$nextTick 主要用于在DOM更新完毕之后执行回调。
• 时机：它是基于Vue的异步更新策略设计的，能够在Vue完成了当前事件循环中的所有数据变更及相应的DOM更新之后执行指定的回调。
• 灵活性：既可以通过传统的回调函数方式使用，也可以利用返回的Promise对象来进行链式调用，这使得它在现代JavaScript开发中非常灵活且强大。

自定义指令

在Vue.js中，除了内置的指令（如v-if, v-for, v-bind等），你还可以注册自定义指令来实现特定的功能。自定义指令可以让你直接操作DOM元素或组件实例，适用于那些需要对DOM进行底层操作的场景。

全局注册

通过Vue.directive方法可以全局注册一个自定义指令：

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时......
  inserted: function (el) {
    el.focus();
  }
});

局部注册

你也可以在组件内通过directives选项局部注册自定义指令：

export default {
  directives: {
    focus: {
      // 指令的定义
      inserted(el) {
        el.focus();
      }
    }
  }
}

钩子函数

自定义指令对象可以提供以下钩子函数（按其执行顺序排列）：

• bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted: 被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。
• update: 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
• componentUpdated: 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind: 只调用一次，指令与元素解绑时调用。

每个钩子函数都有el, binding, vnode, 和 oldVnode参数：

• el: 指令所绑定的元素，可以用来直接操作 DOM。
• binding : 包含以下属性的对象：
  • name: 指令名，不包括前缀v-。
  • value: 指令的绑定值，例如v-my-directive="1 + 1"中的值为2。
  • oldValue: 指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
  • expression: 字符串形式的指令表达式，例如v-my-directive="1 + 1"中的表达式为"1 + 1"。
  • arg: 传给指令的参数，例如v-my-directive:foo中的参数为"foo"。
  • modifiers: 一个包含修饰符的对象，例如v-my-directive.foo.bar中的修饰符对象为{ foo: true, bar: true }。
• vnode: Vue 编译生成的虚拟节点。
• oldVnode : 上一个虚拟节点，仅在update和componentUpdated钩子中可用。

示例

下面是一个简单的例子，展示了如何创建一个自定义指令来使输入框自动聚焦：

定义指令

Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
  }
});

或者在组件内部局部注册：

export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  }
}

使用指令

<template>
  <input v-focus />
</template>

在这个例子中，当Vue实例编译完成后，指定的输入框会自动获得焦点。

指令的值

自定义指令的基本结构

一个自定义指令对象可以包含几个钩子函数（如bind, inserted, update, componentUpdated, unbind）

每个钩子函数都会接收相同的参数：el, binding, vnode, 和 oldVnode。

其中，binding对象包含了与指令相关的所有信息，包括指令的值。

指令的值

指令的值是指你在模板中绑定给指令的表达式或值。例如，在v-my-directive="someValue"中，someValue就是传递给指令的值。这个值可以在指令的不同生命周期钩子中访问并使用。

binding对象的关键属性：

• binding.value: 当前指令绑定的值。
• binding.oldValue : 之前指令绑定的值（仅在update和componentUpdated钩子中可用）。
• binding.arg : 传递给指令的参数（如果有的话），比如v-my-directive:foo中的foo。
• binding.modifiers : 包含修饰符的对象（如果有的话），比如v-my-directive.foo.bar中的{ foo: true, bar: true }。

默认插槽

在Vue.js中，插槽（Slot）机制允许你定义可替换的内容区域，这使得组件更加灵活和可复用。默认插槽是最基础的插槽形式，它允许父组件向子组件传递内容。

默认插槽的基本语法

1. 在子组件中定义插槽

   在子组件模板中使用 <slot> 标签来定义一个或多个插槽。最基本的用法是仅包含一个无名的 <slot> 元素：

   <!-- 子组件 ChildComponent.vue -->
   <template>
     <div class="child-component">
       <h2>这里是子组件标题</h2>
       <slot>这是默认内容</slot>
     </div>
   </template>

   这里的 <slot>这是默认内容</slot> 定义了一个默认插槽。如果父组件没有为这个插槽提供任何内容，则会显示"这是默认内容"。

2. 在父组件中使用子组件并填充插槽

   当你在父组件中使用子组件时，可以通过将内容放置在自闭合标签 <ChildComponent> 或非自闭合标签之间来向插槽传递内容：

   <!-- 父组件 ParentComponent.vue -->
   <template>
     <ChildComponent>
       <p>这是由父组件提供的内容。</p>
     </ChildComponent>
   </template>

   在这个例子中，"这是由父组件提供的内容。"将会替换掉子组件中的默认内容。

后备内容

当你希望为插槽设置一些后备内容，即当父组件未提供特定插槽内容时显示的内容，可以直接写在 <slot> 标签内部，就像上面的例子一样："这是默认内容"。只有当父组件没有提供对应插槽的具体内容时，这些后备内容才会被显示出来。

渲染作用域

重要的是要注意，默认插槽内容是在父组件的作用域内渲染的。这意味着这些内容不能直接访问子组件的数据属性或方法。例如，如果你在子组件中有一个数据 message，试图在默认插槽内容中使用 {{ message }} 是不会工作的，因为插槽内容属于父组件的作用域。

<!-- 子组件 ChildComponent.vue -->
<template>
  <div class="child-component">
    <slot>{{ message }}</slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '来自子组件的消息'
    }
  }
}
</script>

在这个例子中，即使子组件有 message 数据属性，它也不会在默认插槽内容中被解析，除非父组件也声明了相同名称的数据属性。

具名插槽

具名插槽（Named Slots）是Vue.js中用于实现更复杂的内容分发机制的一个特性。它允许你在子组件内定义多个插槽，并通过名字来区分这些插槽，从而让父组件可以向特定的插槽传递内容。

子组件中的定义

在子组件中，你可以通过为 <slot> 标签添加 name 属性来定义一个具名插槽。例如：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div class="child-component">
    <header>
      <!-- 定义一个名为 'header' 的具名插槽 -->
      <slot name="header">这是头部默认内容</slot>
    </header>
    <main>
      <!-- 未命名的默认插槽 -->
      <slot>这是主体内容的默认内容</slot>
    </main>
    <footer>
      <!-- 另一个具名插槽 -->
      <slot name="footer">这是尾部默认内容</slot>
    </footer>
  </div>
</template>

在这个例子中，我们定义了三个插槽：

• 一个名为 header 的具名插槽
• 一个未命名的默认插槽
• 以及另一个名为 footer 的具名插槽。

每个插槽都可以有自己的默认内容，如果父组件没有提供对应插槽的内容，则显示默认内容。

父组件中的使用

在父组件中，可以通过 <template v-slot:插槽名> 或其简写形式 <template #插槽名> 来向具名插槽传递内容。

<!-- 父组件 ParentComponent.vue -->
<template>
  <ChildComponent>
    <!-- 向名为 'header' 的插槽传递内容 -->
    <template v-slot:header>
      <h1>这是自定义的头部内容</h1>
    </template>

    <!-- 向默认插槽传递内容 -->
    <p>这是自定义的主体内容。</p>

    <!-- 使用简写形式向名为 'footer' 的插槽传递内容 -->
    <template #footer>
      <p>这是自定义的尾部内容</p>
    </template>
  </ChildComponent>
</template>

注意事项

• 作用域：与默认插槽相同，具名插槽的内容是在父组件的作用域内渲染的，这意味着它们不能直接访问子组件的数据属性或方法。
• v-slot 指令 ：v-slot 是 Vue 2.6.0 引入的新指令，用于替代旧版的 slot 和 slot-scope 特性。它的简写形式为 #，例如 v-slot:header 可以写作 #header。
• 默认插槽 ：如果没有给 <slot> 标签指定 name 属性，则该插槽被视为默认插槽。如果有内容被直接放在子组件标签内部但不指向任何具名插槽（如上面示例中的 <p>这是自定义的主体内容。</p>），那么这些内容将填充到默认插槽中。

作用域插槽

作用域插槽（Scoped Slots）是Vue.js中非常有用的一个特性，它允许子组件向父组件传递数据，使得父组件可以根据这些数据自定义渲染内容。

子组件中的定义

在子组件中，你可以通过 <slot> 元素并结合 v-bind（或其简写形式 :）来创建一个作用域插槽。这允许你将子组件内部的数据作为属性绑定到插槽上，以便父组件可以访问这些数据。例如：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div class="child-component">
    <!-- 定义一个作用域插槽，并绑定 'user' 数据 -->
    <slot :user="user">
      {{ user.lastName }}, {{ user.firstName }}
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe'
      }
    };
  }
};
</script>

在这个例子中，我们定义了一个默认的作用域插槽，并将 user 对象作为属性绑定到了这个插槽上。如果父组件没有提供特定的内容，将会显示默认内容"{{ user.lastName }}, {{ user.firstName }}"。

父组件中的使用

在父组件中使用作用域插槽时，需要使用 v-slot 指令（或者它的缩写 #）来接收从子组件传递过来的数据。这里是一个示例：

<!-- 父组件 ParentComponent.vue -->
<template>
  <ChildComponent v-slot:default="slotProps">
    <span>{{ slotProps.user.firstName }} {{ slotProps.user.lastName }}</span>
  </ChildComponent>

  <!-- 或者使用缩写形式 -->
  <ChildComponent #default="slotProps">
    <span>{{ slotProps.user.firstName }} {{ slotProps.user.lastName }}</span>
  </ChildComponent>
</template>

• v-slot:default="slotProps" 或 #default="slotProps" 表示我们正在使用默认插槽，并且接受来自子组件的所有绑定属性作为一个名为 slotProps 的对象。
• 在模板中，你可以通过 slotProps.user 来访问子组件传递过来的 user 数据。

具名作用域插槽

除了默认插槽外，还可以为具名插槽指定作用域。比如，在子组件中定义一个具名的作用域插槽：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div class="child-component">
    <header>
      <!-- 定义一个具名的作用域插槽 -->
      <slot name="header" :user="user">头部默认内容</slot>
    </header>
  </div>
</template>

然后在父组件中这样使用：

<!-- 父组件 ParentComponent.vue -->
<template>
  <ChildComponent>
    <!-- 使用具名的作用域插槽 -->
    <template #header="slotProps">
      <h1>{{ slotProps.user.firstName }}的个人中心</h1>
    </template>
  </ChildComponent>
</template>

在这个例子中，#header="slotProps" 表示我们正在使用名为 header 的具名插槽，并接收从子组件传递过来的 user 数据。

总结

• 作用域插槽允许子组件向父组件传递数据，使得父组件能够根据这些数据自定义渲染内容。
• 在子组件中，使用 <slot :someData="data"> 这样的语法来定义作用域插槽。
• 在父组件中，使用 v-slot:slotName="slotProps"（或其简写 #slotName="slotProps"）来接收数据，并通过 slotProps.someData 访问这些数据。

setup

细分语法点

1. ref 和 reactive

   • ref: 创建一个基本类型的响应式引用。

     const count = ref(0);
     console.log(count.value); // 访问值
     count.value++; // 修改值

   • reactive: 创建一个对象类型的响应式引用。

     import { reactive } from 'vue';
     const state = reactive({
       count: 0,
       message: 'Hello Vue 3!'
     });
     console.log(state.count); // 访问属性
     state.count++; // 修改属性

2. computed

   • 创建计算属性，依赖其他响应式数据自动更新。

     const doubleCount = computed(() => count.value * 2);

3. watch

   • 监听响应式数据的变化。

     import { watch } from 'vue';
     watch(count, (newVal, oldVal) => {
       console.log(`count changed from ${oldVal} to ${newVal}`);
     });

4. 生命周期钩子

   • 使用组合式 API 版本的生命周期钩子。

     import { onMounted, onUpdated, onUnmounted } from 'vue';
     onMounted(() => {
       console.log('Component mounted.');
     });
     onUpdated(() => {
       console.log('Component updated.');
     });
     onUnmounted(() => {
       console.log('Component will unmount.');
     });

5. 返回值

   • 返回的对象中的属性和方法可以在模板中直接使用。

     return {
       count,
       message,
       doubleCount,
       increment
     };

setup 语法糖（简化版）

Vue 3 提供了 <script setup> 语法糖来简化 setup 函数的使用。以下是上述示例使用 <script setup> 的版本：

<template>
  <div>
    <p>{{ message }}</p>
    <p>Count is: {{ count }}</p>
    <p>Double Count is: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 定义响应式数据
const count = ref(0);
const message = ref('Welcome to Vue 3 with Script Setup Syntax Sugar');

// 定义计算属性
const doubleCount = computed(() => count.value * 2);

// 定义方法
const increment = () => {
  count.value++;
};

// 生命周期钩子
onMounted(() => {
  console.log('Component mounted.');
});
</script>

细分语法点（<script setup>）

1. 无需显式返回 ：所有在 <script setup> 中声明的顶层变量和函数都会自动暴露给模板，无需手动返回。

2. 更好的 IDE 支持 ：由于 <script setup> 是基于标准的 JavaScript/TypeScript 语法，因此可以获得更好的 IDE 支持，包括自动补全和类型检查等功能。

3. 编译优化 ：Vue 编译器能够对 <script setup> 进行优化，比如静态分析，从而生成更高效的运行时代码。

总结

• setup 原生写法 提供了极大的灵活性，允许开发者自由地组织和复用逻辑代码块，适用于复杂的场景。
• setup 语法糖 (<script setup>) 简化了代码结构，减少了样板代码，使得模板和逻辑代码更加紧密地结合在一起，提高了开发效率。

reactive

在 Vue 3 中，reactive 是 Composition API 提供的一个核心函数，用于创建一个响应式的对象。这意味着当对象中的属性发生变化时，依赖于这些属性的 UI 部分会自动更新。与 ref 不同，reactive 主要用于复杂的数据结构（如对象或数组），并且不需要通过 .value 来访问或修改其值。

基本用法

import { reactive } from 'vue';

// 创建一个响应式对象
const state = reactive({
  count: 0,
  message: 'Hello Vue 3!'
});

console.log(state.count); // 输出: 0
state.count++; // 修改状态
console.log(state.count); // 输出: 1

在这个例子中，state 对象是响应式的。对 state.count 的任何修改都会触发相关的视图更新。

细分语法点

1. 定义响应式对象

   使用 reactive 函数来包装一个普通对象，使其变为响应式对象。

   const state = reactive({
     user: {
       name: 'John Doe',
       age: 30
     },
     items: ['item1', 'item2']
   });

2. 嵌套对象和数组

   reactive 可以很好地处理嵌套的对象和数组，并且所有层级都是响应式的。

   console.log(state.user.name); // 访问嵌套对象属性
   state.items.push('item3'); // 修改数组

3. 解构与失去响应性

   直接解构 reactive 对象会导致失去响应性。这是因为解构出来的变量只是原始值的副本，而不是响应式的引用。

   const { count } = state; // 解构后，count 不再是响应式的

   如果需要解构 reactive 对象同时保持响应性，可以使用 toRefs 函数：

   import { toRefs } from 'vue';
   
   const { count, message } = toRefs(state);
   console.log(count.value); // 使用 .value 访问值

4. 响应式转换限制

   reactive 只能接受对象（包括数组和集合类型）作为参数。对于基本数据类型（如字符串、数字等），应该使用 ref 而不是 reactive。

   // 错误示例：reactive(10) 不会工作
   const count = ref(10); // 正确的做法

5. 与 ref 结合使用

   在某些情况下，你可能希望将 reactive 对象的一部分暴露为 ref，以便更容易地在模板或其他地方使用。

   import { ref, reactive } from 'vue';
   
   const state = reactive({
     count: ref(0),
     message: 'Hello Vue 3!'
   });
   
   console.log(state.count.value); // 使用 .value 访问 ref 类型的属性

总结

• reactive 是 Vue 3 Composition API 中用于创建响应式对象的重要工具，特别适合用于管理复杂的状态。
• 优点 包括能够直接操作对象属性而无需使用 .value，以及支持嵌套对象和数组的响应式更新。
• 注意点 包括直接解构会失去响应性，以及它不适用于基本数据类型的响应式转换。为了克服这些问题，可以使用 toRefs 或者 ref。

ref

在 Vue 3 中，ref 是 Composition API 提供的一个核心函数，用于创建一个响应式的引用对象。它可以包装任何类型的值（包括基本类型和对象），并提供一种统一的方式来访问和修改这些值。对于基本数据类型（如字符串、数字等），使用 ref 是必需的，因为它能够确保这些值的响应性。

基本用法

import { ref } from 'vue';

// 创建一个响应式的引用
const count = ref(0);

console.log(count.value); // 输出: 0
count.value++; // 修改值
console.log(count.value); // 输出: 1

在这个例子中，count 是一个响应式的引用对象。要访问或修改它的值，需要通过 .value 属性。

细分语法点

1. 定义响应式引用

   使用 ref 函数可以将任何类型的值转换为响应式的引用。

   const message = ref('Hello Vue 3!');
   console.log(message.value); // 输出: Hello Vue 3!
   message.value = 'Updated message';

2. 基本类型 vs 对象类型

   • 对于基本类型（如字符串、数字等），必须使用 ref 来保证其响应性。

     const age = ref(25);

   • 对于复杂的数据结构（如对象或数组），虽然也可以使用 ref，但通常推荐使用 reactive，因为这样可以直接操作属性而无需每次都通过 .value 访问。

     const user = ref({
       name: 'John Doe',
       age: 30
     });
     console.log(user.value.name); // 需要 .value 访问属性

3. 解构与失去响应性

   直接解构 ref 对象会导致失去响应性，因为解构出来的变量只是原始值的副本。

   const { value: currentCount } = count; // 解构后，currentCount 不再是响应式的

   如果需要解构 ref 对象同时保持响应性，可以考虑使用 computed 或者直接在模板中使用整个 ref 对象。

4. 在模板中使用

   在 <template> 标签内，Vue 自动解包 ref，因此不需要使用 .value。

   <template>
     <div>
       <p>{{ count }}</p> <!-- 自动解包 -->
       <button @click="increment">Increment</button>
     </div>
   </template>

5. 与 reactive 结合使用

   可以将 ref 作为 reactive 对象的一部分，从而在某些情况下简化状态管理。

   import { reactive, ref } from 'vue';
   
   const state = reactive({
     count: ref(0),
     message: ref('Hello Vue 3!')
   });
   
   console.log(state.count.value); // 访问 ref 类型的属性

总结

• ref 是 Vue 3 Composition API 中用于创建响应式引用的核心工具，特别适合用于处理基本数据类型。
• 优点 包括能够对任何类型的值进行响应式包装，并且可以在组件间轻松传递和共享状态。
• 注意点 包括每次访问或修改值时都需要使用 .value 属性（除了在 <template> 标签内部自动解包的情况）。

computed

在 Vue 3 中，computed 是 Composition API 提供的一个核心函数，用于创建计算属性。计算属性基于其他响应式数据进行计算，并且只有当其依赖的数据发生变化时才会重新计算。这使得计算属性非常适合处理那些需要根据其他状态动态计算的结果。

基本用法

import { ref, computed } from 'vue';

const count = ref(1);
const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value); // 输出: 2
count.value++;
console.log(doubleCount.value); // 输出: 4

在这个例子中，doubleCount 是一个计算属性，它依赖于 count 的值。每当 count 发生变化时，doubleCount 会自动重新计算。

细分语法点

1. 只读计算属性

   最常见的用法是定义只读的计算属性，即计算结果不能直接修改。

   const fullName = computed(() => `${firstName.value} ${lastName.value}`);
   console.log(fullName.value); // 输出: John Doe

2. 带有 getter 和 setter 的计算属性

   如果需要一个可以写入的计算属性，可以通过传递一个包含 get 和 set 方法的对象给 computed 函数。

   const firstName = ref('John');
   const lastName = ref('Doe');
   const fullName = computed({
     get: () => `${firstName.value} ${lastName.value}`,
     set: newValue => {
       [firstName.value, lastName.value] = newValue.split(' ');
     }
   });
   
   console.log(fullName.value); // 输出: John Doe
   fullName.value = 'Jane Smith';
   console.log(firstName.value); // 输出: Jane
   console.log(lastName.value); // 输出: Smith

3. 依赖追踪

   计算属性会自动追踪其依赖的响应式引用（如 ref 或 reactive）。只有当这些依赖发生改变时，计算属性才会重新计算。

   const a = ref(1);
   const b = ref(2);
   const sum = computed(() => a.value + b.value);
   
   console.log(sum.value); // 输出: 3
   a.value = 5;
   console.log(sum.value); // 输出: 7

4. 缓存机制

   计算属性具有缓存机制，这意味着只要其依赖未发生变化，多次访问计算属性将返回缓存的结果，而不是每次都重新计算。

   const expensiveValue = computed(() => {
     console.log('Calculating...');
     return someExpensiveOperation();
   });
   
   console.log(expensiveValue.value); // 输出: Calculating... 结果
   console.log(expensiveValue.value); // 直接输出缓存的结果，不重新计算

总结

• computed 是 Vue 3 Composition API 中用于创建计算属性的重要工具，适用于需要根据其他状态动态计算的情况。
• 优点 包括自动依赖追踪、缓存机制以及支持定义带有 getter 和 setter 的可写计算属性。
• 注意点 包括理解计算属性的缓存行为，确保正确地管理依赖关系，以便在依赖发生变化时能够准确地触发重新计算。

watch

在 Vue 3 中，watch 是 Composition API 提供的一个核心函数，用于监听响应式数据的变化，并在变化时执行回调函数。监听器非常适合处理异步操作或者需要根据数据变化执行副作用的情况。

基本用法

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log(`count changed from ${oldVal} to ${newVal}`);
});

// 修改count的值会触发watch
count.value++;

在这个例子中，watch 监听 count 的变化，并在 count 发生变化时打印新旧值。

细分语法点

1. 监听单一源

   可以是响应式引用（通过 ref 或 reactive 创建）或一个 getter 函数的结果。

   const state = reactive({ count: 0 });
   watch(() => state.count, (newVal, oldVal) => {
     console.log(`state.count changed from ${oldVal} to ${newVal}`);
   });

2. 监听多个来源

   支持同时监听多个数据源，无论是多个引用还是组合了引用和getter。

   watch([fooRef, barRef], ([newFoo, newBar], [oldFoo, oldBar]) => {
     // 当fooRef或barRef改变时调用
   });

3. 深度监听

   对于对象类型的监听源，可以启用深度监听来检测对象内部的变化。

   watch(() => state.someObject, (newVal, oldVal) => {
     console.log('someObject changed');
   }, { deep: true });

4. 立即执行

   如果希望监听器在初次运行时立即执行一次，可以设置 immediate: true 选项。

   watch(source, callback, {
     immediate: true
   });

5. 清除副作用

   在监听器中执行异步操作时，可能需要在监听器再次触发或组件卸载前清除之前的副作用。Vue 3 允许监听器的回调返回一个清理函数。

   watch(source, (newVal, oldVal, onCleanup) => {
     let timerId;
     timerId = setInterval(() => {
       console.log('定时任务');
     }, 1000);
     onCleanup(() => clearInterval(timerId));
   });

6. 监听对象中的单个属性

你可以通过创建一个返回对象特定属性值的getter函数，并将这个getter函数作为watch的第一个参数来监听该属性的变化。

import { reactive, watch } from 'vue';

const state = reactive({
  user: {
    name: 'John Doe',
    age: 30
  }
});

// 监听state.user.name的变化
watch(() => state.user.name, (newVal, oldVal) => {
  console.log(`user name changed from ${oldVal} to ${newVal}`);
});

// 修改name属性会触发watch
state.user.name = 'Jane Doe';

在这个例子中，我们通过一个getter函数() => state.user.name来监听state.user对象中的name属性。当name属性发生变化时，就会触发回调函数并打印新旧值。

总结

• watch 是 Vue 3 Composition API 中用于监听响应式数据变化的重要工具，适用于需要在数据变化时执行异步操作或副作用的情况。
• 优点 包括能够监听单一或多个数据源、支持深度监听以及能够在监听器被重新触发或组件卸载前清除副作用。
• 注意点 包括合理利用深度监听避免性能开销，正确管理依赖关系确保监听器能准确触发，以及在进行异步操作时适当地清理副作用。

模板引用

在 Vue 3 中，模板引用（Template Refs）提供了一种直接访问 DOM 元素或子组件实例的方法。这对于需要手动操作 DOM 或者调用子组件方法的场景特别有用。Vue 3 提供了更简洁和直观的方式来处理模板引用，尤其是在使用 <script setup> 语法糖时。

使用 Template Refs

基本用法

要在 Vue 3 中创建一个模板引用，可以使用 ref 函数，并给它一个名称作为标识符。然后，在模板中通过 ref 属性将这个引用绑定到特定的元素或组件上。

示例：引用 DOM 元素

假设我们想要获取并操作一个按钮元素：

<script setup>
import { ref, onMounted } from 'vue';

// 创建一个模板引用
const buttonRef = ref(null);

onMounted(() => {
  // 在挂载后访问DOM元素
  console.log(buttonRef.value); // 输出: <button>Click me</button>
});
</script>

<template>
  <!-- 绑定模板引用 -->
  <button ref="buttonRef">Click me</button>
</template>

在这个例子中，buttonRef 是一个引用，指向 <button> 元素。通过 ref="buttonRef" 将其绑定到模板中的按钮元素。当组件挂载后，可以通过 buttonRef.value 访问该按钮元素。

示例：引用子组件

如果要引用一个子组件实例，过程类似：

<!-- ParentComponent.vue -->
<script setup>
import { ref } from 'vue';
import SonComponent from '@/components/SonComponent.vue';

// 创建一个引用指向子组件
const sonComponentRef = ref(null);

function callChildMethod() {
  // 调用子组件的方法
  sonComponentRef.value.someMethod();
}
</script>

<template>
  <SonComponent ref="sonComponentRef" />
  <button @click="callChildMethod">调用子组件方法</button>
</template>

<!-- SonComponent.vue -->
<script setup>
function someMethod() {
  console.log('子组件的方法被调用了');
}
</script>

这里，sonComponentRef 引用了 SonComponent 子组件实例。通过点击按钮触发 callChildMethod 方法，进而调用了子组件的 someMethod 方法。

关键点解释

• ref : 用于创建一个响应式的引用对象。在模板中通过 ref 属性将其绑定到元素或组件上。

• **.value**: 访问引用的实际值。对于 DOM 元素，它是对应的 DOM 对象；对于组件，则是组件实例。

• 生命周期钩子 (onMounted) : 如果需要在组件挂载后立即访问 DOM 元素，可以使用 onMounted 钩子。这是因为直到组件挂载完成，才能确保 DOM 元素已经存在于页面上。

注意事项

1. 避免过度使用: 模板引用虽然强大，但应尽量减少对 DOM 的直接操作，以保持数据驱动的优势。
2. 异步更新 : Vue 的响应式系统可能会导致 DOM 更新与 JavaScript 执行不同步。如果需要确保在 DOM 更新之后执行某些逻辑，考虑使用 nextTick 函数。

import { nextTick } from 'vue';

nextTick(() => {
  // DOM 已更新
});

defineExpose

在 Vue 3 中，特别是当你使用 <script setup> 语法糖编写组件时，默认情况下，组件的内部状态和方法是完全私有的，无法直接从外部访问。然而，在某些情况下，你可能希望暴露一些属性或方法给父组件或其他外部代码使用。这时就可以用到 defineExpose 宏。

defineExpose 的作用

defineExpose 允许你明确地指定哪些属性或方法应该被暴露给父组件或其他外部代码。这提供了一种控制组件公开接口的方式，使得你可以有选择性地暴露必要的部分，同时保持其余逻辑的封装性。

关键点解释

• defineExpose : 这是一个编译器宏，专门用于 <script setup> 中，用来显式地声明哪些属性或方法应对外暴露。

• 选择性暴露 : 通过 defineExpose，你可以精确控制哪些内容对外可见，从而保持组件内部实现细节的封装性。例如，在上面的例子中，internalValue 没有被暴露，因此父组件无法访问它。

• 与模板引用结合使用 : 为了能够在父组件中访问这些暴露出来的属性或方法，通常需要配合使用模板引用（ref），这样就可以通过 .value 访问子组件实例及其公开的接口。

总结

• defineExpose 提供了一种机制来控制 Vue 3 <script setup> 组件的公开接口，允许开发者有选择地将内部的状态或方法暴露给外部使用。
• 这增强了组件的灵活性，同时也维护了良好的封装性和模块化设计。
• 结合模板引用 (ref)，可以在父组件中方便地调用子组件暴露的方法或访问其属性，从而实现更复杂的交互逻辑。

provide 和 inject

在 Vue 3 中，provide 和 inject 是一种用于祖先组件向其所有子孙组件传递数据的方式。这种方式非常适合于跨层级的组件通信，尤其是在深层嵌套的组件结构中，避免了通过层层传递 props 的繁琐操作。

不过，您提到的"reject"并不是 Vue 提供的功能或概念。我将专注于解释 provide 和 inject 的用法，并纠正可能的误解。

defineOptions

在 Vue 3 中，<script setup> 提供了一种简洁的方式来编写组件逻辑。然而，对于一些传统的选项式 API（Options API）特性，比如定义组件名称、混合（mixins）、自定义配置等，在 <script setup> 中并没有直接提供类似的功能。为了弥补这一点，Vue 生态系统引入了 defineOptions 宏来允许开发者在 <script setup> 中使用这些选项。

不过需要注意的是，截至我知识更新的时间点（2024年初），defineOptions 并不是 Vue 官方提供的标准宏，而是某些社区解决方案或第三方库的一部分。官方文档中推荐的做法是使用普通的 <script setup> 结合 defineComponent 来实现类似的功能。但是，如果确实需要在 <script setup> 中定义组件选项，可以考虑以下方法：

使用 defineComponent 和普通 <script> 块结合

虽然这不是直接使用 defineOptions，但可以通过在单文件组件中同时使用 <script setup> 和普通的 <script> 标签来达到目的。

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent', // 定义组件名称
  // 可以在这里添加其他选项，如 mixins, inheritAttrs 等
});
</script>

<script setup>
// 在这里使用 <script setup> 的所有功能
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

这种方法允许你在享受 <script setup> 简洁性的同时，也能访问到完整的 Options API 功能。

社区提供的 defineOptions

如果你正在寻找一个类似于 defineOptions 的宏，并且希望它能够直接在 <script setup> 内部工作，那么你可能需要依赖于第三方插件或工具，例如 unplugin-vue-define-options。这个插件允许你在 <script setup> 中使用 defineOptions 来定义组件选项。

安装插件后，你可以这样使用：

<script setup>
import { ref } from 'vue';
import { defineOptions } from 'unplugin-vue-define-options/runtime';

defineOptions({
  name: 'MyComponent'
});

const count = ref(0);
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

总结

• 官方推荐 ：对于大多数情况，推荐使用 <script setup> 结合 defineComponent 的方式来定义组件选项。
• 社区支持 ：如果确实需要在 <script setup> 中直接定义组件选项，可以考虑使用社区提供的解决方案，如 unplugin-vue-define-options 插件，它提供了 defineOptions 宏来满足这种需求。

defineModel

在 Vue 3 中，defineModel 实际上是自 Vue 3.4 版本开始引入的一个宏（macro），它用于简化组件内双向数据绑定的实现。这个宏使得开发者可以更加简洁地处理 v-model 的双向绑定逻辑，而不需要手动定义 props 和 emits 来监听和触发更新事件。

defineModel 简介

defineModel 是一个编译器宏，专门用于 <script setup> 中，它可以帮助你快速设置一个双向绑定的 prop，并自动处理与之相关的事件。这极大地简化了组件之间的双向数据流管理，特别是当你需要在子组件中使用 v-model 时。

使用 defineModel

基础用法

以下是一个简单的例子，展示了如何在子组件中使用 defineModel 来支持父组件通过 v-model 进行双向绑定：

<script setup>
// 子组件中使用 defineModel 来创建一个双向绑定的 model
const model = defineModel(); // 默认情况下，prop 名为 modelValue
</script>

<template>
  <!-- 使用 v-model 绑定到 input 元素 -->
  <input v-model="model" />
</template>

在这个例子中，我们直接使用了 defineModel() 而没有传递任何参数，这意味着它会默认绑定到名为 modelValue 的 prop 上，并且当本地的 model 发生变化时，会自动触发 update:modelValue 事件来通知父组件。

指定 Prop 名称

如果你想要绑定到不同的 prop 名称，可以通过传递字符串参数给 defineModel：

<script setup>
// 绑定到名为 'name' 的 prop 上
const name = defineModel('name');
</script>

<template>
  <input v-model="name" />
</template>

设置默认值

对于复杂的数据类型，默认值的设置可能需要一些额外的工作。例如：

<script setup>
const drillFields = defineModel<string[]>('drillFields', {
  get(val) {
    return reactive(val || []);
  },
});
</script>

这里，我们不仅指定了 prop 的名称，还提供了一个 getter 函数来确保返回的是一个响应式的数组对象。

总结

• defineModel 是 Vue 3.4 引入的一个宏，旨在简化 v-model 在 <script setup> 中的实现。
• 它允许你在不手动定义 props 和 emits 的情况下，轻松地创建双向绑定的属性。
• 对于开发人员来说，defineModel 提供了一种更直观、简洁的方式来处理父子组件之间的数据通信，尤其是在需要进行双向数据绑定的情况下。

请根据您的具体需求选择是否使用 defineModel，以及如何配置它的参数以适应您的应用场景。如果您的 Vue 版本低于 3.4，则需要按照传统的 v-model 方式来实现双向数据绑定。