内蒙古住房与建设厅网站,邢台专业网站建设价格,安陆网站,网站空间 php程序一、ref
解释#xff1a;ref是Vue3通过ES6的Proxy实现的响应式数据#xff0c;其与基本的js类型不同#xff0c;其为响应式数据#xff0c;值得注意的是#xff0c;reactive可以算是ref的子集#xff0c;ref一般用来处理js的基本数据类型如整型、字符型等等(也可以用来处…一、ref
解释ref是Vue3通过ES6的Proxy实现的响应式数据其与基本的js类型不同其为响应式数据值得注意的是reactive可以算是ref的子集ref一般用来处理js的基本数据类型如整型、字符型等等(也可以用来处理对象、数组等等)
1.赋值
解释对于ref赋值和取值的时候的格式都是xxx.value但是在vue的模版语法中无需带上 .value
// 赋值(基本数据类型)
const name ref()
name.value 55
const name ref()
name.value 555666
// 赋值(对象)
const name ref()
name.value {time: 55
}
console.log(name.value.time)
// 赋值(数组)
const name ref()
name.value [{time: 556}
]
console.log(name.value[0].time)2.取值
解释这里主要解释取值操作时变量的一些变化
动态// 取值(将name里面的value赋值给b)
const name ref()
name.value [{time: 556}
]
const b { time: }
b.time name.value
console.log(b)
// 注意此时的b已经不再完全是静态对象了其刚刚被赋值的time对应是动态的Proxy静态 解释通过for of循环和ES6的解构进行处理此场景一般用于需要动态数据当中间变量时const name ref()
name.value [{time: 556}
]
const b { time: }
b.time name.value[0].time
console.log(b)
// b取值时要直接取到最里面的值就不会导致动态// 例子
const dataRef ref()
// res.data是格式为[]的Proxy
dataRef.value res.data
console.log(dataRef)
const b { list: [] }
// b.list dataRef.value
console.log(b)
for (const i of dataRef.value) {// 解构代码const { goodsId, goodsName } ib.list.push({ goodsId, goodsName })
}
console.log(b)
// b此时就是常量二、reactive
解释reactive的底层是通过Proxy实现的响应式数据reactive的响应式是深层次的reactive一般用来处理对象或者数组(基本数据类型是不允许的)
误区看下面这些代码如果在使用下面的代码进行操作(场景比如后端传来数据直接去赋值)其就会导致响应式丢失
let userInfo reactive([{ name: time }])
console.log(userInfo) // Proxy对象
// 类型场景直接后端数据进行赋值
userInfo [{ name: luck }]
console.log(userInfo) // [{ name: luck }] 其为普通数组响应性随之丢失1.赋值
// 赋值(对象)
const name reactive({ content: })
name.content 5
console.log(name)
console.log(name.value.time)
// 赋值(数组)
const name reactive({ list: [] })
name.list [5, 6, 7]
console.log(name)2.取值
解释这里就不再说动态的例子其和ref里面讲的大同小异主要演示一下静态取值此场景一般用于需要动态数据当中间变量时
// 类型场景后端发来的数据
const book [{ id: 0, type: m },{ id: 1, type: c }
]
// 前端静态接收(此场景一般用于需要动态数据当中间变量时)
for (const i of book) {const { id, type } iconsole.log(id, type)
}
