vue3使用ref和reactive的示例详解
Vue 3引入了两个新的API，ref和reactive，用于创建响应式对象。这两个方法都位于Vue.prototype上，因此可以在组件实例中直接使用。
ref
ref函数用于创建一个响应式引用对象。这个函数可以接受一个普通的变量或对象作为参数，并返回一个响应式引用对象。要访问这个引用的值，需要使用.value属性。
例如：
const count = ref(0); console.log(count.value); // 0 count.value++; // 响应式更新 console.log(count.value); // 1
在上面的例子中，我们使用ref函数创建了一个响应式引用对象，并将其初始值设置为0。然后，我们可以通过.value属性来访问和修改这个引用的值。当修改这个值时，Vue会自动更新相关的视图。
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>在上面的示例中，我们使用 ref 创建了一个名为 count 的响应式引用对象，初始值为 1。我们还使用 reactive 创建了一个名为 state 的响应式对象，其中包含一个名为 count 的属性，初始值为 0。在 increment 方法中，我们通过调用 count.value++ 和 state.count++ 来修改引用对象的值和响应式对象的属性值。由于这些变量都是响应式的，因此当它们的值发生变化时，相关的视图也会自动更新。
到此这篇关于vue3使用ref和reactive的文章就介绍到这了,更多相关vue3使用ref和reactive内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
大家都知道在Vue里面有两种出名的插件能够支持发起异步数据传输和接口交互,分别是axios和vue-resource,同时vue更新到2.0之后,宣告不再对vue-resource更新,而是推荐的axios,今天就讲一下怎么引入axios,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Vue中生命周期定义及流程，生命周期又被称为生命周期回调函数、生命周期函数或生命周期钩子，下文关于其更多有趣的介绍需要的小伙伴可以参考一下文章详细内容2022-05-05
这篇文章主要为大家介绍了Vue的监听属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
Vue Element 分组+多选+可搜索Select选择器实现示例
这篇文章主要介绍了Vue Element 分组+多选+可搜索Select选择器实现示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要为大家详细介绍了vue实现导航栏效果，选中状态刷新不消失，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
这篇文章主要介绍了vue2.0嵌套路由实现豆瓣电影分页功能(附demo),这里整理了详细的代码,有需要的小伙伴可以参考下。2017-03-03
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
这篇文章主要介绍了vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要为大家介绍了vue项目中一定会用到的性能优化技巧实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vuex实现及简略解析(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
vue项目经常会用到axios来请求数据,那么首先肯定需要对这个请求方法进行一个二次封装,这篇文章主要给大家介绍了关于项目中Axios二次封装的相关资料,需要的朋友可以参考下2021-06-06
最新评论