-
computed 是vue独有的特性计算属性,可以对data中的值再进行一个重新的计算,computed是支持缓存的,只有依赖数据发生改变，才会重新进行计算
-
watch 我感觉就是监听data里面的所有属性的新旧值的变化吧
一、计算属性
1. vue2计算属性
- 变量不在 data中定义，而是定义在computed中，写法跟写方法一样，有返回值。函数名直接在页面模板中渲染，不加小括号
- 如果是在methods里面声明的话,在调用的时候需要加上小括号例如：fullName()
<div id="home">
<input type="text" v-model="firstName" /><br /> //我是
<input type="text" v-model="lastName" /><br /> //计算属性
<input type="text" v-model="fullName" /><br /> //我是计算属性
</div>
data() {
return {
firstName: "我是",
lastName: "计算属性",
};
},
computed: {
fullName() {
return this.firstName + "" + this.lastName;
},
},
2. vue3 计算属性
- 首先需要引入,才可以进行使用
- 和methods 最大的区别就是缓存和不可缓存
<p>{{count}}</p>
<p>{{double}}</p>
<button @click="changeData">+</button>
import { computed } from "vue"
setup(){
const count = ref(100);
const double = computed(()=>{
return count.value* 2;
})
const add = ()=>{
count.value ++;
}
return {
count,
double,
add
}
}
一、侦听器(watch)
1. vue2侦听器
- watch是一个对象所以用的时候要使用watch:
- 有三种使用的方式
- 第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
- 第二个是deep：其值是true或false；确认是否深度监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以监听到。）
- 第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。
普通方式
<div>
<p>FullName: {{fullName}}</p>
<p>FirstName: <input type="text" v-model="firstName"></p>
</div>
data: {
firstName: 'Dawei',
lastName: 'Lou',
fullName: ''
},
watch: {
//普通的watch监听
firstName(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
}
}
// 现在我们对于firstName监听了。在进行input框输入的时候,就会触发到watch，改变data中的fullName
使用handler&immediate
- 在上面这个方法中第一次绑定watch是不会执行的,可以使用这两个属性进行在第一次绑定的时候就会执行了
firstName: {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
immediate: true
}
deep进行深度监听
- watch 监听的时候会返回一个obj新的obj对象和改变前的obj对象
<p>obj.a: {{ obj.a }}</p>
<p>obj.a: <input type="text" v-model="obj.a" /></p>
data() {
return {
obj: {
a: 123,
},
};
},
watch: {
obj: {
handler(newName, oldName) {
console.log(newName, oldName);
},
immediate: true,
deep: true,
},
},
2. vue3侦听器
- watch(指定监听数据) 如果监听reactive属性,必须使用函数来指定,监听多个数据的话，需要卸载数组里面
- watchEffect(不指定监听数据) 默认初始化执行一次
- watch和watchEffect都是需要引入的
watch
import { watch } from "vue"
- 普通数据类型
setup() {
let msg = ref("abc");
watch(msg, (newVal, oldVal) => {
console.log(newVal, oldVal);
});
return {
msg,
};
},
- reactive 数据类型,通过函数来指定
setup() {
let user = reactive({
firstName: "zhang",
lastName: "san",
});
watch(() => user.firstName,(newVal,oldVal) => {
console.log(newVal,oldVal);
})
return {
user,
};
}
- 监听多个数据需要数组来指定，watch返回的也是一个数组
setup() {
let user = reactive({
firstName: "zhang",
lastName: "san",
});
watch(
[() => user.firstName,() => user.lastName],
(newVal, oldVal) => {
console.log(newVal, oldVal);
}
);
return {
user,
};
},
- 立即执行 添加immediate 还有深度监听在immediate后面加上deep:true 就可以
setup() {
let user = reactive({
firstName: "zhang",
lastName: "san",
});
let fullName = ref(""); //在声明的时候是一个空,如果初始化不执行他还是一个空
watch([() => user.firstName, () => user.lastName], (newVal, oldVal) => {
fullName.value = newVal[0] +' '+ newVal[1]
},{
immediate:true,
//deep:true
});
return {
user,
fullName
};
},
watchEffect 初始化执行一次
- 不用指定监听的普通数据类型或者是复杂数据类型,像下面这个案例就是默认监听了 user.firstName和user.lastName,个人感觉watchEffect比watch好用点吧
import { watchEffect } from "vue"
watchEffect(() => {
fullName.value = user.firstName+" "+user.lastName
})
