vue3学习(3)

1:toRef和toRefs
作用:将响应式对象中的每个属性,转换成ref对象
备注:toRef和toRefs作用一致,但toRefs可以批量转换

let person = reactive({name:'李雷',age:18})
let  {name,age} = toRefs(person)
name.value = '韩梅梅'
let nl = toRef(person,'age')

2:computed(和vue2的computed一致)
作用:根据已有数据计算出新数据。

//简写:只读
const fullName = computed(()=>{.....})
//读写
const fullName = computed({get:()=>{....},set:(val)=>{.....})

3:watch
vue3中的watch能监听四种数据

  • ref定义的数据
  • reactive定义的数据
  • 函数返回一个值(getter函数)
  • 一个包含上述内容的数组

***情况一:监视ref定义的【基本类型】数据:直接写数据名即可

let sum = ref(0)
const stopWatch = watch(sum,(newValue,oldValue)=>{console.log(newValue,oldValue) 
if(满足什么条件){停止监视}
})

watch的返回值是一个函数,可以根据条件判断什么时候停止监视

***情况二:监视ref定义的【对象类型】数据:直接写数据名,监视的是对象的【地址值】,若想监视对象内部数据,要手动开启深度监视。
注意
1: 若修改的是ref定义的对象中的属性,那么newValue和oldValue都是一个值
2: 若修改的是ref定义的对象,newValue是新值,oldValue是老值,不是同一个对象了。

***情况三:监视reactive定义的对象类型数据,且默认开启了深度监视,因为地址值没有改变,所以newValue和oldValue值一样

***情况四:监视的是ref或reactive【对象类型】数据中的某个属性
注意
1:如果该属性值不是对象类型的,需要写成函数形式
2:如果该属性值是对象类型的,则可以直接写(只能监视对象内部属性变化,整个值变化监视不到),也可以写成函数形式(整个值变化可以监视到,内部属性变化监视不到,但是这时可以开启深度监视),建议写成函数形式

***情况五:监视上述多个数据

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2.ref函数: 作用:定义一个响应式的数据 语法:const xxx=ref(initValue) 创建一个包含...
    岳婧婧_2023强化班阅读 182评论 0 0
  • (一) 基本模块 01基础模板语法 1.1插值语法 -- 解析标签体里的内容 data -> {{}} 里可以写j...
    SteinsGate_5e01阅读 3,755评论 0 31
  • vue 3 创建项目 自己动手编写一个App组件 总结: Vite 项目中,index.html 是项目的入口文件...
    吃了个瓜阅读 163评论 0 0
  • 一、Vue2 1.1 模板语法 1.1.1 模板的理解 html 中包含了一些 JS 语法代码,语法分为两种,分别...
    Cola_Mr阅读 575评论 0 1
  • 一.简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 和vue2相比它的...
    e只咸鱼阅读 2,166评论 4 37