reactive——对象
<h2>姓名:{{person.name}}</h2>
<h2>年龄:{{person.age}}</h2>
<h2>薪资:{{person.job.j1.salary}}K</h2>
<button @click="person.name+='~'">修改姓名</button>
<button @click="person.age++">增长年龄</button>
<button @click="person.job.j1.salary++">涨薪</button>
监视reactive所定义的一个响应式数据的全部属性——无法正确的获取oldValue(传递ref里面是对象,走的是reactive .value)——强制开启了深度监视(deep配置无效)-不管嵌套有多深
import {reactive,watch} from 'vue'
export default {
name: 'Demo',
setup(){
//数据
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
/* 情况三:监视reactive所定义的一个响应式数据的全部属性
1.注意:此处无法正确的获取oldValue
2.注意:强制开启了深度监视(deep配置无效)-不管嵌套有多深
*/
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
},{deep:false}) //此处的deep配置无效 */
//返回一个对象(常用)
return {
person
}
}
}
监视reactive所定义的一个响应式数据中的某个属性
import {reactive,watch} from 'vue'
export default {
name: 'Demo',
setup(){
//数据
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
//情况四:监视reactive所定义的一个响应式数据中的某个属性()函数=》返回值
watch(()=>person.name,(newValue,oldValue)=>{
console.log('person的name变化了',newValue,oldValue)
})
//返回一个对象(常用)
return {
person
}
}
}
监视reactive所定义的一个响应式数据中的某些属性——数组
import {reactive,watch} from 'vue'
export default {
name: 'Demo',
setup(){
//数据
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
//情况五:监视reactive所定义的一个响应式数据中的某些属性
watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
console.log('person的name或age变化了',newValue,oldValue)
})
//返回一个对象(常用)
return {
person
}
}
}
特殊情况——监视reactive定义的对象中的某个属性——依然是对象(如果是字符串没必要了)——里面需要加深度监视否则无效,{deep:true})
import {reactive,watch} from 'vue'
export default {
name: 'Demo',
setup(){
//数据
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20//监视的是这个
}
}
})
//特殊情况——无效了
watch(()=>person.job,(newValue,oldValue)=>{
console.log('person的job变化了',newValue,oldValue)
},{deep:true})
//此处由于监视的是reactive素定义的对象中的某个属性,所以deep配置有效 */
//返回一个对象(常用)
return {
person
}
}
}