vue3学习(3)

简介: 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:如果该属性值是对象类型的,则可以直接写(只能监视对象内部属性变化,整个值变化监视不到),也可以写成函数形式(整个值变化可以监视到,内部属性变化监视不到,但是这时可以开启深度监视),建议写成函数形式

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

相关文章
|
14天前
|
存储 JavaScript 开发者
Vue 3 组件通信方式总结
Vue 3 组件通信方式总结
|
11天前
|
缓存 监控 UED
升级 Vue3 时,如何减少打包体积的增加?
升级 Vue3 时,如何减少打包体积的增加?
100 59
|
11天前
|
API UED
如何实现Vue2项目升级Vue3?
如何实现Vue2项目升级Vue3?
105 59
|
10天前
|
JavaScript
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
11天前
|
API UED
升级 Vue3 后,项目的打包体积会有什么变化?
升级 Vue3 后,项目的打包体积会有什么变化?
104 57
|
11天前
|
缓存 JavaScript 前端开发
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
该文章全面覆盖了Vue.js从基础知识到进阶原理的48个核心知识点,包括Vue CLI项目结构、组件生命周期、响应式原理、Composition API的使用等内容,并针对Vue 2与Vue 3的不同特性进行了详细对比与讲解。
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
|
14天前
|
存储 JavaScript API
Vue3基础(25)___初尝pinia,相比于vuex轻量、好用
本文介绍了Pinia在Vue 3中的使用,相比于Vuex,Pinia更轻量且易于使用。文章详细解释了Pinia的基本概念、优势,并提供了安装和使用Pinia的步骤,包括定义状态、getters、actions和如何在组件中使用Pinia进行状态管理。
34 3
Vue3基础(25)___初尝pinia,相比于vuex轻量、好用
|
2天前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
1天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
14 1
|
14天前
|
JavaScript
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?