vue3学习(2)

简介: vue3学习(2)

1:ref创建:基本类型、对象类型的响应式数据

作用:定义响应式变量
语法:let xxx = ref(初始值)
返回值:一个RefImpl的实例对象,简称ref对象。ref对象的value属性是响应式的。
注意点:
在模板中使用不需要.value。在js中操作数据需要:xxx.value
2:reactive创建:对象类型的响应式数据
3:ref和reactive对比

定义的类型不同
使用原则
若需要定义一个基本类型的响应式数据,使用ref
若需要定义一个对象类型的响应式数据,层级不深,使用ref或reactive都可以
若需要定义一个对象类型的响应式数据且层级较深,推荐使用reactive
使用方法
ref创建的变量必须使用.value
reactive重新分配一个新对象会失去响应式(可以使用Object.assigin去整体替换)
4: vscode中的这个配置可以帮助我们给ref的响应式变量自动添加.value

image.png

相关文章
|
1天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
5天前
|
API
vue3知识点:provide 与 inject
vue3知识点:provide 与 inject
17 4
vue3知识点:provide 与 inject
|
5天前
|
API
vue3知识点:readonly 与 shallowReadonly
vue3知识点:readonly 与 shallowReadonly
11 1
vue3知识点:readonly 与 shallowReadonly
|
1天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
1天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
4天前
|
JavaScript Java API
vue3知识点:setup
vue3知识点:setup
17 5
|
4天前
|
资源调度 JavaScript 前端开发
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
14 5
|
5天前
Vue3 中使用 Event Bus
【10月更文挑战第16天】Event Bus 是 Vue3 中一种简单而实用的通信方式,在一些简单的场景中可以发挥重要作用。但在实际应用中,要根据项目的具体需求和复杂度,选择合适的通信方式,以实现最佳的性能和可维护性。同时,要遵循最佳实践,合理使用 Event Bus,避免出现问题。
13 5
|
4天前
|
API
vue3知识点:reactive对比ref
vue3知识点:reactive对比ref
15 3
|
5天前
|
API
vue3知识点:响应式数据的判断
vue3知识点:响应式数据的判断
14 3