模板网站的弊端,优秀中文企业网站欣赏,国家企业信用信息查询公示系统广东,微信运营管理软件ref() 是什么
ref() 是一个函数#xff1b;
ref() 函数用来声明响应式的状态#xff08;就是来声明变量的#xff09;
ref() 函数声明的变量#xff0c;是响应式的#xff0c;变量的值改变之后#xff0c;页面中会自动重新渲染。ref() 有什么特点
1.ref() 可以声明基础…ref() 是什么
ref() 是一个函数
ref() 函数用来声明响应式的状态就是来声明变量的
ref() 函数声明的变量是响应式的变量的值改变之后页面中会自动重新渲染。ref() 有什么特点
1.ref() 可以声明基础类型的变量也可以声明复杂类型的变量如 基本的 number 类型、string类型以及 json对象类型都可以进行声明2.ref() 声明的变量是深度响应式的比如一个变量是json类型的会有多层的嵌套那么深层嵌套的属性值发生改变时该变量同样是响应式的3.ref() 声明的变量 在 script 脚本中使用时需要添加一个 [.value] 属性才能取到对应的值如 声明变量 const a ref(100);使用变量 console.log(a.value); // 添加 .value 才可以真正访问到变量的值4.ref() 声明的变量 在template 模板中可以直接使用无需使用 [.value] 属性,这是因为 vue3 在渲染页面时进行了自动的解包如 声明变量 const a ref(100);模板中使用变量 div{{ a }}/div ref() 基本使用案例
案例代码
template
divmsg : {{ msg }}brnum : {{ num }}brstu : {{ stu }}
/div
/templatescript setup langts// 引入 ref
import {ref} from vue
// 使用 ref 声明响应式状态
const msg ref(hello)
const num ref(100)
const stu ref({id:001,name:小明,classInfo:{classId:1001,className:开心一班,}})
// 逻辑代码中使用响应式状态
console.log(msg : ,msg)
console.log(num : ,num)
console.log(stu : ,stu)console.log(msg.value : ,msg.value)
console.log(num.value : ,num.value)
console.log(stu.value : ,stu.value)// 测试响应式的 延迟10s 修改一下上述变量的值
setTimeout((){msg.value hello worldnum.value 666stu.value.classInfo.className 快乐足球一班
},10000)/scriptstyle scoped
/style案例执行结果分析
1、一开始页面展示的是各个变量初始化的值控制台打印的是初始化的值
2、因为有一个 10s 钟的延时10s 钟后变量的值发生改变页面随之改变
效果图如下1、初始化效果
2、10s钟后的效果
ref() 添加 类型
vue3 是支持ts 的所以如果想使用ts 的类型特征进行变量的类型限制也是可以的。
对于 变量的类型不仅仅局限于 基本的数据类型也可以是自己定义的复杂类型
例如通过 interface 声明的类型。方式一自动类型推断
ts 本身就可以进行自动类型的转换
因此在定义变量、修改变量的值的时候会自动进行类型的推断。
如果变量修改值时的赋值与原来定义的值的类型不相符会提示异常。
案例代码如下 template
/templatescript setup langts// 引入 ref
import {ref} from vue// 使用 ref 声明响应式状态
const msg ref(hello)// 自动进行类型推断
// 声明的时候是字符串string类型但是赋值的时候是数字number类型
// 此时会直接提示错误
msg.value 100;/scriptstyle scoped
/style方式二通过 Ref 指定变量的类型
使用 Ref 进行变量类型声明的时候可以声明多个类型
这也是ts的语法特性可以给变量声明多种类型。
案例代码如下 template
/templatescript setup langts// 引入 ref
import {ref} from vue
// 引入 Ref
import type { Ref } from vue;// 使用 ref 声明响应式状态
const msg : Refstring | number ref(hello)
// 声明了类型之后就可以正常赋值了
msg.value 100;
// 但是因为变量只能是 string 或者 number 类型所以赋值布尔类型时就会提示错误
msg.value true/scriptstyle scoped
/style方式三使用ref的泛型参数代替默认的类型推倒
这种方式实际上是对 方式二 的一种写法的代替
无需再引入 Ref 了。
案例代码如下template
/templatescript setup langts// 引入 ref
import {ref} from vue// 使用 ref 声明响应式状态
const msg refstring|number(hello)
// 声明了类型之后就可以正常赋值了
msg.value 100;
// 但是因为变量只能是 string 或者 number 类型所以赋值布尔类型时就会提示错误
msg.value true/scriptstyle scoped
/style附加 使用自定义的类型进行类型限制
script setup langts
// 引入 ref
import {ref} from vue// 自定义一个复杂的数据类型
interface Stu {id:string,name:string,classInfo:{classId:number,className:string}
}// 使用泛型的方式进行变量类型的限制
const stu refStu({id:001,name:小明,classInfo:{classId:1001,className:开心一班,}})
/script
