目录
computed属性
和vue2中的computed配置功能一致
完整写法要携带上get和set,读取走get,修改走set,可以通过set中的参数拿到新值
使用时引入computed
import { computed } from '@vue/runtime-core'
//简便写法
let Name = computed(() => {
return data.firstName + '-' + data.lastName
})
//完整写法
setup () {
let data = reactive({
firstName: '张',
lastName: '三',
})
let fullName = computed({
get () {
return data.firstName + '-' + data.lastName
},
set (val) {
const arr = val.split('-')
data.firstName = arr[0]
data.lastName = arr[1]
}
})
return {
data,
fullName
}
}
Watch属性
在vue3中watch是一个函数,你可以多次调用, 或者你也可以按照vue2的写法继续写watch,但是不建议这么写
watch有三个参数
参数一:监听的数据
参数二:监视的回调,新旧值
参数三:监视配置项、比如immediate、deep等等
然后我们需要根据实际情况去进行监听
一、如果监听的数据为ref定义的响应式数据,语法为
let sum = ref(0)
watch(sum,(newval,oldval)=>{
console.log('sum',newval, oldval);
},{immediate:true})
二、如果监听多个ref定义的数据时,我们需要把监听的值放在数组里,newval和oldval也是一个数组
let sum = ref(0)
let msg = ref('你好')
watch([sum,msg],(newval,oldval)=>{
console.log('sum和msg',newval, oldval);
},{immediate:true})
三、如果监听的的数据为reactive定义的全部属性
1.此时我们不能正常的获取到oldval,一般来说只要监听的是一个对象就拿不到正常的oldval
2.默认强制开始深度监听,并且不能用deep:false去取消掉
let data = reactive({
firstName: '张',
lastName: '三',
})
watch(data, (newval, oldval) => {
console.log('新值', newval);
console.log('旧值', oldval);
}, { deep: false, immediate: true })
四、如果我们监听的数据为reatvie定义的数据中的某一个属性时,
我们第一个参数,需要写成一个对象,并返回这个属性
let data = reactive({
firstName: '张',
lastName: '三',
job: {
salary: 30
}
})
watch(() => data.firstName, (newval, oldval) => {
console.log('新值', newval);
console.log('旧值', oldval);
}, { deep: false, immediate: true })
五、如果我们需要监听多个reative中定义的属性的话,同样第一个参数为一个数组,每一个值为一个对象
let data = reactive({
firstName: '张',
lastName: '三',
person: {
one: {
job: {
salary: 30
}
}
}
})
watch([() => data.firstName, () => data.lastName], (newval, oldval) => {
console.log('新值', newval);
console.log('旧值', oldval);
}, { deep: false, immediate: true })
六、如果我们监听的是reactive所定义的对象中的某一复杂数据类型属性,
修改的时候这个复杂数据类型中深层嵌套的某一个属性,
我们需要手动开启deep
let data = reactive({
firstName: '张',
lastName: '三',
person: {
one: {
job: {
salary: 30
}
}
}
})
watch(() => data.person, (newval, oldval) => {
console.log('新值', newval);
console.log('旧值', oldval);
}, { deep: true, immediate: true })
watchEffect函数
这个函数也是监听属性
但是你不需要指定监听的哪个属性,监听的回调中用到了哪个属性,就会自动监视哪个属性
watchEffect和computed感觉差不多,都是依赖的数据发生变化了重新执行
watchEffect注重过程,所以不需要返回值
computed更注重的是结果,必须要return返回值,因为我们用computed就是需要他返回的一个结果去使用
watchEffect(()=>{
const x1 = sum.value
const x2 = person.age
console.log('watch的配置回调执行了')
})