watch介绍
通过计算属性我们能拿到处理后的数据, 但是通过函数我们也能拿到处理后的数据,只要返回的结果没有发生变化, 那么计算属性就只会被执行一次。
Vue3写法
setup() {
const name = ref('漩涡鸣人');
const {username, password} = toRefs(reactive({
username: '宇智波带土',
password: 'zs1262597806'
}))
watch(username, (newVal, oldVal) => {
console.log(newVal, oldVal)
}, {deep: true})
return {name, username, password, newName}
}
Vue2写法
watch: {
name: {
handler(newName, oldName) {
console.log(newName, oldName);
}, deep: true
}
}
computed介绍
计算属性的重点突出在属性
两个字上(属性是名词),首先它是个属性
其次这个属性有计算
的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存!
Vue3写法
setup() {
const name = ref('漩涡鸣人');
const {username, password} = toRefs(reactive({
username: '宇智波带土',
password: 'zs1262597806'
}))
const newName = computed(() => {
return password.value.length;
})
return {name, username, password, newName}
}
Vue2写法
computed: {
namelength() {
return this.username.length;
}
}