Vue基础-08-帧听器

Vue基础08-帧听器

Vue中提供了计算属性可以对数据进行监控操作，Vue还提供另外一个知识点帧听器，也可以对原始数据进行监听。一旦原始数据发生变化，监听器执行。

Vuejs提供了一个新的模块watch，我们再watch模块里面写的代码就帧听器代码

1. export default {
2. data(){
3. return{
4. num:10
5. }
6. },
7. watch:{
8. num(newValue,oldValue){
9. console.log("监听器启动");
10. console.log(newValue,oldValue);
11. //你可以执行业务，比如发送异步请求，比如对原始数据进行修改
12. }
13. }
14. }

计算属性和帧听器都能实现对原始数据监控

计算属性一定依赖于原始数据，返回一个新的而结果

帧听器检测到监控的数据是否发生变化，执行业务，不需要返回一个新的结果

只要涉及到对原始数据监控，发送异步请求，或者执行复杂的业务，都需要watch来实现

仅仅是对原始数据，数据组合、计算，计算属性

监控引用类型

1. watch:{
2. num(newValue,oldValue){
3. console.log("监听器启动");
4. console.log(newValue,oldValue);
5. },
6. "user.name"(){
7. console.log("user被修改");
8. }
9. }

深度监听

1. user:{
2. handler(val){
3. console.log("user发生");
4. },
5. deep:true
6. }

这是watch的完整语法，如果你要对某个引用进行深度监听，就必须用这种语法。

立即侦听

1. watch: {
2. list: {
3. handler() {
4. this.sumPrice = this.list.reduce((sum, item) => {
5. return (sum += item.price * item.num);
6. }, 0);
7. },
8. deep: true,
9. immediate:true
10. },
11. },

立即侦听和深度侦听都需要用完整的watch语法，immediate：true

当Vue再进行实例化对象，初始化数据的时候你就可以执行一次侦听