计算属性与侦听器

计算属性 computed

侦听器  wathch

使用场景介绍

触发computed的条件是本实例里面的data数据发生变化。

如果只有外部arr对象变化不会触发改变。

监听属性，监听器，异步场景，异步请求返回触发：watch

计算属性，数据联动：computed

el,元素绑定

var app = new Vue({

el:"#app"

data:{

    msg: "hello vue",

    another:"another hello vue"

},

watch{

    msg:function(newval,oldval){

    console.log(newval)

    console.log(oldcal) 

    }

},

computed:{

    msg1:function(){

    return"computed"+this.msg+","+this.anthor}

},

})

没有明白

Watch监听器，compute计算属性，数据联动

computed和watch的不同点。

computed只能监听本实例的数据。

computed只能监听本实例的数据。

对外部的数据变化，不监听。

computed的使用

msg1：funciton（）｛

    return 'computed:'+this.msg

    ｝

只要有数据发生变化，就会触发执行。

调试vue

给vue对象一个变量

var app = new Vue(
    {
        el:'',
        data:{},
        method:{},
        computed:{},
        watch:{}
    }
)

再浏览器的调试窗口，输入app.msg

计算属性与侦听器

计算属性：computed

侦听器：watch

比如监听msg值的变化

watch:{
msg:function(newval,oldval){
    console.log('newval is:'+newval)
    cosole.log('oldval is:'+oldval)
    }
}

已经跟着敲了三遍了，最后一遍，记忆更深了。感谢老师讲的，只不过只会打这些代码，不知道用在什么地方。

vue通过使用var赋值，来进行浏览器调试

定义watch之后，对app中的msg进行修改值后，可以观看到值发生了变化。

通过以上，可以发现computed他俩展示的效果一样，那么他们的区别在哪里？

通过上面发现，wathch只能监听他自己定义的变量名。computed可以监听实例里面的所有值。

在computed中return了this.arr; 重新定义了arr之后，发现值也跟着发生变化。说明computed可以监听到实例后的变量。

watch：一个变量或一个常量

computed：多个变量

1、v-on:click用于绑定事件，可在new Vue({})中的methods中编写function事件

2、侦听器：watch（异步场景） computed（数据联动）

watch:

监听一个变量的变化

computed：

监听多个变量的变化

监听的变量一定是Vue实例中的属性

computed：计算属性，属性中的每个元素发生变化都会触发其方法；一般在数据联动场景中使用

watch：侦听器，其方法这的所写的元素发生变化才会触发，一般用于异步场景

watch (异步场景：监听一个变量/常量的变化）

computed（数据联动：Vue实例中的多个变量，Vue实例中变量变化时将全局触发）

watch: {

                msg: function(newval, oldval) {

                    console.log("newval is:" + newval)

                    console.log("oldval is:" + oldval)

                }

            },

            computed: {

                msg1: function() {

                    return 'computed:' + this.msg + ',' + this.another + ',' +

                        arr

                }

computed实例内发生变化会实时更新，实例外的变量更新需要对computed更新后才会对内容进行更新

computed可以监听很多变量，watch监听一个变量 或者一个常量的变化（单一变量或者数组）

计算属性和侦听值

计算属性 : computed

侦听器 : watch

使用场景 : watch(异步场景) . computed (数据联动)

计算属性:computed

侦听器：watch

使用场景：

watch:通常监听一个变量或者一个常量的变化，这个变量可能是一个单一的变量，也可能是一个数组。

computed:可以监听很多个变量，变量一定是在vue实例中。

computed中的变量引用的变量发生变化会重新计算

computed特性

是计算值

应用：就是简化template里面{{}}计算和处理props或$emit的传值

具有缓存性，页面重新渲染值不变化，计算属性会立即返回之前的计算结果，而不必再次执行函数

watch特性

是观察的动作

应用：监听props,$emit或本组件的值执行异步操作

无缓存性，页面重新渲染时值不变化也会执行

计算属性：computed(多个变更)

侦听器：watch(单一变更或数组)

使用场景：watch(异步), computed(数据联动)

两者都是监听本实例的变量

计算属性和监听器的总结

compute  计算属性

compute:{

    msg1:function(){

        return 'compute:'+this.msg

    }

}

watch监听属性，监听msg数据变化

watch:{

    msg:function(newval,oldval){

    console.log('newval is:'+newval),

    console.log('oldval is:'+oldval)  

  }

},