computed、watch、update区别

1、watch

理解: 监听器,监听某个数据的变化从而来执行一些操作,当data里面的数据发生变化的时候来执行一下开销较大或异步的操作

1、监听值类型(简单类型)数据

//在一个vue实例中
    new Vue({
        el:"#myApp",
        data:{
            num1:1,
            num2:2
        },
        methods:{},
        watch:{
            //这里两个属性,第一个值是变化后最新的值,第二个是变化前
            num1(after,before){
                this.num2 = after +1
            }
           immediate:true    //页面首次加载的时候做一次监听。
         //这里的意思就是,监听num1的变化,当num1的数据发生变化的时候,来操作num2的值
        }
    })

2、监听引用(复杂)类型的数据

  

new Vue({
        el:"#myApp",
        data:{
            obj:{
                userName:"caicai"
            }
        },
        watch:{
            obj:{
                handler(newValue,oldValue){
                    // handler函数是当你的obj发生变化的时候你要做什么                   
                  console.log(newValue.userName,oldValue.userName);
                },
                deep:true //是否深度侦听,true开启,false关闭,默认false
                //加了deep之后相当于在对象obj每一层的属性都加上了handler侦听器。否则的话侦听到的只是引用地址,不会执行handler函数
            }
        }
    });

 

2、computed
理解: 计算属性,顾名思义就是通过某个属性(数据)来计算得到某个属性,这个重点在于计算,我们希望的是拿到data数据后处理一下,得到计算的结果。
在原vue中的template模板,作者初衷只是进行一些简单的运算,那么比较复杂的计算就可用computed来进行操作

  <div id="myApp">
        <input type="text" v-model="str">
   1、第一种操作,写在模板里,导致模板过重,难于维护
        <p>{{str.split("").reverse().join("")}}</p>	
   2、第二种,使用一个方法来调用,若多处使用,就执行多次,降低运行速度,性能减少
        <p>{{fn(str)}}</p>
   3、第三种,使用过滤器,具有缓存,只要str不发生变化,就不会再次进行运算
        <p>{{reverseStr}}</p>
    </div>
<script type="text/javascript">
new Vue({
    el:"#myApp",
    data:{
        str:"abcd"
    },
    methods:{
        fn(v){
        	//若多出调用,就执行多次
          return v.split("").reverse().join("")//炸开--反转--组合
        }
    },
    computed:{
        reverseStr(){
        	//str不发生变化的话,我只执行一次,具有缓存
            return this.str.split("").reverse().join("")
        }
    }
})
</script>

  

到这里我先略微总结一下这两者的区别,以及使用场景
computed:

1、监控自己定义的变量,不用再data里面声明,函数名就是变量名
2、适合多个变量或对象进行处理后返回一个值(结果)。若这多个变量发生只要有一个发生变化,结果都会变化。
3、计算的结果具有缓存,依赖响应式属性变化,响应式属性没有变化,直接从缓存中读取结果。
4、在内部函数调用的时候不用加()。
5、必须用return返回
6、不要在computed 中对data中的数据进行赋值操作,这会形成一个死循环。

watch:

1、watch 函数是不需要调用的。
2、重点在于监控,监控数据发生变化的时候,执行回调函数操作。
3、当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch
4、函数名就是你要监听的数据名字

使用场景:

computed:
1、一个需要的结果受多个数据影响的时候,比如购物车结算金额(受到很多处的价格结算)。
2、操作某个属性,执行一些复杂的逻辑,并在多处使用这个结果。
3、内部函数中多处要使用到这个结果的。
watch :
1、监控一些input框值的特殊处理,适合一个数据影响多个数据。
2、数据变化时,执行一些异步操作,或开销比较大的操作

3、updated
理解: 是vue生命周期里面的一个钩子函数—data数据更新后触发视图更新。这里是视图更新之后的操作可以在这里执行。

触发条件:
1、当data中定义的数据有变化时就会加载updated方法。

2、任何数据的更新,如果要做统一的业务逻辑处理

3、在大多数情况下,此期间避免更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

特点:
1.执行到它的时候时候是数据发生变化且界面更新完毕
2.不能监听到路由数据(例如网址中的参数)
3.所有的数据发生变化都会调用(消耗性能)
4.只要数据发生变化,每次触发的代码都是同一个

上一篇:vue学习笔记21 watch


下一篇:5.7computed 计算属性