Vue3的ref和reactive

目录

1、ref的基本使用

2、reactive的基本使用

3、ref操作dom

4、ref与reactive的异同


1、ref的基本使用

ref创建数据可以是基本类型也可以是引用类型

ref函数创建响应式数据,返回值是一个对象

模版中使用ref数据,省略.value,js代码中不能省略

获取ref创建数据的值要加上.value





2、reactive的基本使用

 

reactive创建响应式

reactive函数创建响应式数据,只支持引用数据类型

使用reactive响应式数据的时候,不需要.value





 

3、ref操作dom

1、创建ref对象,将该对象作为ref的值

2、想获取谁,就再谁的标签上添加ref,其ref=‘ref对象’

 





4、ref与reactive的异同

  1. 相同点 : 都可以创建响应式数据

  2. 不同点 : reactive只支持引用数据类型,ref支持基本和引用数据类型

  • ref通过.value获取数据,reactive不需要.value

  • ref创建响应式引用数据类型低层依赖reactive

你可能感兴趣的:(vue笔记,vue.js,前端,javascript)