vue3学习（toRefs和toRef，computed计算属性 ，v-model指令，箭头函数）

一，前言

今天是我学习vue3的第七天。

二，toRefs和toRef

在 Vue 3 中，toRef和toRefs是两个非常实用的响应式工具函数，它们主要用于在保持响应式连接的同时，创建对对象属性的引用。这在处理组件间数据传递、状态解构以及模板中访问属性时特别有用。

toRef - 创建单个属性的响应式引用

toRef函数用于创建对响应式对象某个属性的响应式引用。即使原属性不存在，它也会创建一个引用，这使得它在处理可能动态添加的属性时非常有用。

<template><div><h3>toRef 示例</h3><p>原始对象: {{ state }}</p><p>通过toRef创建的引用: {{ refCount }}</p><button @click="increment">增加计数</button></div>
</template><script setup>
import { reactive, toRef } from 'vue';// 创建响应式对象
const state = reactive({count: 0,message: 'Hello Vue 3'
});// 使用toRef创建对state.count的响应式引用
const refCount = toRef(state, 'count');// 修改引用会影响原始对象
const increment = () => {refCount.value++;console.log('原始count:', state.count); // 会同步更新
};// 修改原始对象也会影响引用
setTimeout(() => {state.count = 10;console.log('引用count:', refCount.value); // 会同步更新为10
}, 2000);
</script>

toRefs - 将响应式对象转换为引用对象

toRefs函数用于将整个响应式对象转换为普通对象，其中每个属性都是对应的响应式引用。这在需要解构响应式对象但又想保持响应式连接时特别有用。

<template><div><h3>toRefs 示例</h3><p>姓名: {{ name }}</p><p>年龄: {{ age }}</p><button @click="updateProfile">更新资料</button></div>
</template><script setup>
import { reactive, toRefs } from 'vue';// 创建响应式对象
const user = reactive({name: '张三',age: 25,address: {city: '北京',district: '海淀区'}
});// 使用toRefs将响应式对象转换为引用对象
const { name, age, address } = toRefs(user);// 修改引用会影响原始对象
const updateProfile = () => {name.value = '李四';age.value = 30;address.value.city = '上海'; // 嵌套对象仍然保持响应式console.log('原始user:', user); // 会同步更新
};// 修改原始对象也会影响引用
setTimeout(() => {user.age = 35;console.log('引用age:', age.value); // 会同步更新为35
}, 2000);
</script>

三，computed计算属性

Vue 3 中的计算属性是一个非常有用的功能，它允许你基于其他响应式数据自动计算出新的值。与方法不同，计算属性是基于它们的依赖进行缓存的，只有当依赖发生变化时才会重新计算

计算属性的基本用法
// 只读计算属性
const sum = computed(() => {return num1.value + num2.value
})// 可写计算属性
const fullName = computed({get() {return  num1.value + num2.value},set() {
console.log('set')}
})

计算属性 vs 方法

计算属性和方法看起来可能实现相同的功能，但它们有重要区别：

• 计算属性：基于其依赖进行缓存，只有依赖变化时才会重新计算
• 方法：每次调用时都会执行，无论依赖是否变化

因此，当你有复杂的计算逻辑，且不需要每次都重新计算时，应该使用计算属性。

计算属性是 Vue 响应式系统的核心部分，合理使用它们可以使你的代码更加简洁、高效和易于维护。

四， v-model指令

Vue 3 中的 v-model 指令

v-model 是 Vue.js 中最常用的指令之一，它提供了双向数据绑定的功能，使表单输入元素和组件之间的数据同步变得简单。

基本原理

v-model 本质上是一个语法糖，它在内部为不同的表单元素绑定了不同的事件和属性：

• 对于 input、textarea 等文本输入元素，它绑定了 :value 和 @input
• 对于 checkbox 和 radio 等选择元素，它绑定了 :checked 和 @change
• 对于 select 元素，它绑定了 :value 和 @change

组件中的 v-model

在 Vue 3 中，v-model 在组件上的使用方式更加灵活。你可以：

1. 为组件定义多个 v-model 绑定
2. 自定义 v-model 的 prop 和事件名称
3. 利用 .sync 修饰符的新语法

Vue 3 中 v-model 的核心概念

Vue 3 中的 v-model 指令提供了一种简洁的方式来实现双向数据绑定，它主要用于以下场景：

1. 表单元素：在 HTML 表单元素上创建双向数据绑定
2. 自定义组件：在自定义组件上实现双向数据绑定
3. 多 v-model 绑定：在单个组件上使用多个 v-model 绑定
4. 自定义事件和 prop：自定义 v-model 使用的事件和 prop 名称

表单元素上的 v-model

在表单元素上，v-model 会根据元素类型自动选择合适的属性和事件：

• 文本输入：绑定 value 属性和 input 事件
• 复选框：绑定 checked 属性和 change 事件
• 单选按钮：绑定 checked 属性和 change 事件
• 下拉选择框：绑定 value 属性和 change 事件

v-model 修饰符

Vue 3 提供了几种修饰符来增强 v-model 的功能：

1. .trim：自动过滤输入的首尾空白字符
2. .number：将输入值转换为数字
3. .lazy：监听 change 事件而不是 input 事件，只有在失去焦点或按下回车时才更新

组件中的 v-model

“prop” 指的是组件的属性。在 Vue 组件中，props 用于父子组件之间的数据传递，父组件可以通过 props 向子组件传递数据。

在自定义组件中实现 v-model 需要：

1. 接收 modelValue prop
2. 触发 update:modelValue 事件

// 接收 v-model 绑定的值
const props = defineProps({modelValue: String
})// 发射更新事件
const emit = defineEmits(['update:modelValue'])// 处理输入变化
const handleInput = (e) => {emit('update:modelValue', e.target.value)
}

• const props = defineProps({ modelValue: String })：这行代码使用defineProps函数定义了组件接收的属性。在 Vue 3 中，v-model绑定的值默认通过名为modelValue的 prop 传递给组件。这里指定modelValue的类型为字符串，意味着这个组件期望接收到的v-model`绑定值是字符串类型。

• const emit = defineEmits(['update:modelValue'])：这行代码使用defineEmits函数定义了组件可以触发的事件。在 Vue 3 中，当v-model绑定的值在子组件中发生变化时，需要触发一个名为update:modelValue的事件，将新的值传递回父组件，以实现双向数据绑定。这里通过defineEmits声明了组件可以触发update:modelValue事件。例如，当子组件内某个操作导致v-model绑定的值改变时，就可以通过emit('update:modelValue', newVal)来触发事件，将新值newVal传递给父组件，父组件接收到事件后会相应地更新v-model绑定的变量。

• const handleInput = (e) => {
  emit(‘update:modelValue’, e.target.value)
  }

• 这段代码定义了一个名为handleInput的函数，其作用是处理输入的变化。在 Vue 3 自定义组件中，当v-model绑定的表单元素（如input等）发生输入变化时会调用这个函数。

  具体来说，该函数接收一个事件对象e，通过e.target.value获取到表单元素最新的输入值，然后使用emit函数触发名为update:modelValue的事件，并将获取到的最新输入值作为参数传递出去。在 Vue 3 自定义组件使用v-model时，组件需要接收modelValue prop 并触发update:modelValue事件，这样就能实现v-model的双向数据绑定功能，即当表单元素值变化时，将变化的值传递给父组件进行相应更新。

  例如，在一个自定义输入框组件中，当用户在输入框中输入内容时，就会触发handleInput函数，将输入框的最新值传递给父组件，以保持数据的同步更新。

多 v-model 绑定

Vue 3 支持在单个组件上使用多个 v-model 绑定，每个绑定可以有不同的 prop 和事件名称：

<MultiModelForm v-model:name="formData.name" v-model:age="formData.age" v-model:email="formData.email" 
/>

自定义 v-model

你可以自定义 v-model 使用的 prop 和事件名称，使组件 API 更加直观：

<ColorPicker v-model="selectedColor" />

计算属性与 v-model

计算属性可以与 v-model 结合使用，创建更加复杂的双向数据绑定逻辑：

$通常是在 JavaScript 模板字符串（template literal）中使用的占位符开始标识，用于嵌入表达式。

const fullName = computed({get() {return `${firstName.value} ${lastName.value}`},set(newValue) {const parts = newValue.split(' ')firstName.value = parts[0] || ''lastName.value = parts[1] || ''}
})

掌握 v-model 是成为 Vue 开发者的重要一步，它不仅简化了数据绑定的代码，还使你的应用更加响应式和交互友好。

五，箭头函数

JavaScript 箭头函数详解

箭头函数是 ES6 (ES2015) 引入的一种简洁的函数定义方式，它提供了更短的语法和特殊的 this 绑定行为。箭头函数在现代 JavaScript 开发中被广泛使用，特别是在 React、Vue 等前端框架中。

基本语法

箭头函数的基本语法如下：

// 无参数箭头函数
const greet = () => 'Hello World';// 单个参数箭头函数
const square = num => num * num;// 多个参数箭头函数
const sum = (a, b) => a + b;// 多行函数体
const calculate = (a, b) => {const sum = a + b;const product = a * b;return { sum, product };
};

箭头函数的特点

1. 更简洁的语法：省略了 function 关键字，参数列表和函数体之间使用 => 连接
2. 隐式返回：当函数体只有一条语句时，可以省略 return 关键字
3. 不绑定 this：箭头函数没有自己的 this，它继承自外层函数的 this 值
4. 不绑定 arguments、super 或 new.target：箭头函数没有自己的 arguments 对象