vue3使用ref和reactive的方法
Vue 3引入了两个新的API，ref和reactive，用于创建响应式对象。这两个方法都位于Vue.prototype上，因此可以在组件实例中直接使用。
1.ref
ref函数用于创建一个响应式引用对象。这个函数可以接受一个普通的变量或对象作为参数，并返回一个响应式引用对象。要访问这个引用的值，需要使用.value属性。
例如：
const count = ref(0); console.log(count.value); // 0 count.value++; // 响应式更新 console.log(count.value); // 1
2.reactive
reactive函数用于创建一个响应式对象。这个函数可以接受一个普通的对象作为参数，并返回一个响应式代理对象。这个代理对象会拦截所有的属性访问和修改操作，并自动更新相关的视图。
例如：
const state = reactive({ count: 0 }); console.log(state.count); // 0 state.count++; // 响应式更新 console.log(state.count); // 1
在上面的例子中，我们使用reactive函数创建了一个响应式对象，并将其初始值设置为一个包含count属性的对象。然后，我们可以通过直接访问和修改这个对象的属性来触发响应式更新。与ref不同的是，我们不需要使用.value属性来访问和修改这个对象的属性。
Vue 3 使用 ref 和 reactive 创建响应式对象的完整示例：
<template> <div> <p>{{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { ref, reactive } from 'vue'; export default { setup() { // 使用 ref 创建响应式引用对象 const count = ref(1); // 使用 reactive 创建响应式对象 const state = reactive({ count: 0, }); // 使用 increment 方法修改引用对象的值和响应式对象的属性值 const increment = () => { count.value++; // 修改引用对象的值 state.count++; // 修改响应式对象的属性值 }; return { count, state, increment, }; }, }; </script>
2.示例说明
在上面的示例中，我们使用 ref 创建了一个名为 count 的响应式引用对象，初始值为 1。我们还使用 reactive 创建了一个名为 state 的响应式对象，其中包含一个名为 count 的属性，初始值为 0。在 increment 方法中，我们通过调用 count.value++ 和 state.count++ 来修改引用对象的值和响应式对象的属性值。由于这些变量都是响应式的，因此当它们的值发生变化时，相关的视图也会自动更新。
Vue 3 使用 ref 和 reactive 创建响应式对象在<script setup>语法格式的完整示例：
1.示例
下面是使用ref和reactive的<script setup>语法格式的示例：
<template> <div> <p>{{ message }}</p> <button @click="changeMessage">Change Message</button> </div> </template> <script setup> import { ref, reactive } from 'vue' const message = ref('Hello, Vue 3!') const state = reactive({ message: message.value }) function changeMessage() { state.message = 'Changed Message' } </script>
2.示例说明
在上面的示例中，我们首先从Vue导入ref和reactive。然后，我们使用ref创建了一个名为message的响应式数据。接下来，我们使用reactive创建了一个名为state的响应式对象，并将message作为其属性。最后，我们定义了一个changeMessage函数，用于改变state.message的值。
在模板中，我们可以通过访问message和state.message来显示响应式数据。点击按钮时，调用changeMessage函数将改变state.message的值，并自动更新视图。
使用<script setup>语法格式，我们可以更简洁地创建组件，并且不需要显式地使用data选项来声明响应式数据。
