vue前端中v-model与ref的区别

v-model

1
2
3
4

作用：将输入框与message绑定，及将用户输入的内容绑定到message这个变量上，但是message是无法在script中获取到的，要想在js中访问，就只能通过向方法中传递message等方法。

ref

作用：ref引用对象主要用于在Vue组件中创建和管理响应式数据，ref是一个函数，用于创建响应式引用对象，例如const myRef = ref(initialValue)。ref引用对象通过.value属性来访问和修改引用对象的值，例如myRef.value = newValue。ref引用对象可以用于任何JavaScript值，包括基本类型和对象。
举例说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

在上面的示例中，使用ref函数创建了一个名为newTodo的引用对象，并将其初始化为空字符串。然后，在模板中使用v-model指令将输入框与newTodo进行双向绑定。当用户在输入框中输入内容时，newTodo的值会自动更新。