1. 前言
-
Vue3的ref对象我们都知道其用法,通过ref可以创建一个响应式对象使用,同时可以用
compute,watch
等Vue3的API对其进行操作 -
不同于Vue2的是,Vue3使用的是组合式API,这也就意味着,我可以在外部单独创建一个ref对象,然后保存,通过导出的方式,给其他的页面使用
-
理论存在,开始实践
2. demo实现
- 搭建框架
首先搭建一个Vue3+Vite的框架
,不需要其他第三方库
yarn create vite
// 输入项目名称
// 选择技术栈 Vue JavaScript
- 删除多余的文件
- 创建两个vue组件
- 将两个组件导入到App.vue中
<template><div><com1></com1><com2></com2></div>
</template><script setup>
import com1 from './components/component1/index.vue';
import com2 from './components/component2/index.vue';
</script><style lang="scss" scoped></style>
- 创建一个公共的全局js文件
- 在这个全局的js文件中导入Vue3的ref对象
- 在这个全局的js中创建一个ref对象,并导出
import { ref } from 'vue'export let count = ref(1)
- 在两个组件中引用这个导出的ref对象,组件1用来显示这个ref对象,组件2用来修改这个ref对象
// 组件1
<template><div>{{ count }}</div>
</template><script setup>
import { count } from '../../utils/global';
</script><style lang="scss" scoped></style>// 组件2
<template><div><button @click="changeCount">修改count</button></div>
</template><script setup>
import { count } from '../../utils/global';
const changeCount = () => {count.value++;
};
</script>
- 结果就会发现,在组件2中修改count,组件1中的count也会实时变化,这是因为count本身就是一个响应式对象,并不会因为在不同的页面使用而导致丢失响应式,并且不仅可以像这样简单的修改和显示使用,还可以用于不同页面的
computed
与watch
中,响应式的对象也不仅仅限于简单数据类型,可以传入对象,数组等复杂数据类型
3. 总结
以上就是本篇文章分享的全部内容了,对以上分享的内容有疑问的欢迎评论以及私信,我看到都会解答的,下篇文章见