R：

    G：

    B：
    
        {{rgb}}
    

    

    

    全名：{{fullname}}

通过vm.$watch监视：

    
今天天气很{{info}}
    切换天气

immediate选项

默认情况下，组件在初次加载完毕后不会调用watch侦听器，如果想让watch侦听器立即被调用，则需要使用immediate选项，immediate的作用是控制侦听器是否自动触发一次，选项的默认值为：false

深度监视

如果watch侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用deep选项，开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”。

如果想要侦听的对象是子属性的变化，则必须包裹一层单引号。

watch:{
    "info.name"(newVal){
        console.log(newVal);
    }
}

总结：

1）Vue中的watch默认不监测对象内部值的改变(一层)

2）配置deep:true可以监测对象内部值改变(多层)

3）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

4）使用watch时根据数据的具体结构，决定是否采用深度监视

watch能开启异步任务，案例如下：

    

    

    全名：{{fullname}}

computed和watch之间的区别：

1.computed能完成的功能，watch都可以完成。

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

隐性原则：

1.被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象

2.不被Vue所管理的函数(定时器的回调函数、ajax的回调函数、Promise的回调函数)，最好写成箭头函数，这样this的指向才是vm或组件实例对象。

到此，相信大家对“JavaScript计算属性与监视属性怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！