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

v-model

<template><input type="text" v-model="message">
</template>

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

ref

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

<template><div><input type="text" v-model="newTodo"><button @click="addTodo">添加</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const newTodo = ref('');const addTodo = () => {console.log(newTodo.value);// 执行添加待办事项的逻辑};return {newTodo,addTodo};}
}
</script>

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