vue对象的侦听属性怎么表示

阅读：762 来源：乙速云作者：代码code

vue对象的侦听属性怎么表示

vue对象的侦听属性用“watch”表示。所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应，监听属性，意思就是可以监视其他数据的变化。vue中监听属性有两种写法：1、在“new Vue()”中传入watch配置；2、通过“vm.$watch”进行监听。

watch 侦听属性

所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应，监听属性，意思就是可以监视其他数据的变化。

有的时候，我们需要的派生数据是通过异步的方式处理的，这个时候，计算属性就不太好用了（不能处理异步）。我们可以使用另外一个选项：watch

watch : 侦听属性；监听的是data的属性，当属性发生改变以后，会做的一些事情

监听属性有两种写法，如下：

new Vue()中传入watch配置。
通过vm.$watch进行监听。

看个具体的例子。

在new Vue()中传入watch配置。


    
        今天天气很{{info}}


        切换天气

如果watch isHot 时，只提供了回调函数handler，如下：

watch:{
    isHot:{
        handler(newValue,oldValue){
            console.log("isHot:newValue="+newValue,"oldValue="+oldValue);
        }
    }}

则可以简写成如下形式：

watch:{
    isHot(newValue,oldValue){
        console.log("isHot:newValue="+newValue,"oldValue="+oldValue);
    }}

通过vm.$watch进行监听。


    
        今天天气很{{info}}


        切换天气

如果watch isHot时，只提供了handler，如下：

vm.$watch("isHot",{
    handler(newValue,oldValue){
        console.log("isHot:newValue="+newValue,"oldValue="+oldValue);
    }})

则可以简写成以下形式：

vm.$watch("isHot",function(newValue,oldValue){
    console.log("isHot:newValue="+newValue,"oldValue="+oldValue);})

打开浏览器，测试下。
vue对象的侦听属性怎么表示

深度监听


    
        a的值是{{numbers.a}}
        点我加1

监听多级结构的某个属性，如numbers.a，当numbers对象的a属性发生变化时，Vue将侦听到，并执行回调handler。
监听多级结构的所有属性（深度监听），如"numbers":{deep:true}，当numbers对象的任一属性发生变化，Vue也能侦听到，并执行回到handler。

监听属性和计算属性

使用监听属性实现


    
        姓：


        名：


        全名：{{fullName}}

使用计算属性实现


    
        姓：


        名：


        全名：{{fullName}}

可以看到：计算属性能够完成的，监听属性一定能够完成。
但，监听属性能够完成的，计算属性不一定能够完成，比如当数据变化时执行异步操作。看个具体的例子：当firstName变化时，等1秒后，fullName才变化。


    
        姓：


        名：


        全名：{{fullName}}

【vue】方法、计算属性、数据监听也对计算属性和监听属性做过对比。虽然计算属性在大多数情况下更合适，但当需要在数据变化时执行异步操作时，监听属性更有用。

另外，再次建议：

由Vue管理的函数，最好写成普通函数，这样函数中的this指向才是Vue实例。
不被Vue管理的函数，如定时器函数、ajax回调函数、promise函数，最好写成箭头函数。因为箭头函数没有自己的this。

分享到：

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们： hlamps#outlook.com （#换成@）。

上一篇： node的path模块是什么及怎么使用

下一篇： Angular变更检测中的订阅异步事件怎么实现

你可能感兴趣

{{ cleanHtml(item.title) }}