本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了计算属性与监视属性使用的相关内容，计算属性指的是通过一系列运算之后，最终得到的一个值，监视器允许开发者监视数据的变化，从而针对数据的变化做特定的操作；下面一起来看一下，希望对大家有帮助。
【相关推荐：JavaScript视频教程、web前端】
计算属性(computed)
计算属性指的是通过一系列运算之后，最终得到一个值。这个动态计算出来的属性值可以被模板结构或methods方法使用，案例如下：
R：
G：
B：{{rgb}}
使用名字动态改变实现计算属性案例：
立即学习“Java免费学习笔记（深入）”；
全名：{{fullname}}
计算属性：1.定义：要用的属性不存在，要通过已有的属性得来2.原理：底层借助了Object.defineproperty方法提供的getter和setter3.优势：与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便4.备注：计算属性最终会出现在vm上，直接读取使用即可；如果计算属性要被修改，那必须写set函数去响应改变，且set中要引起计算时依赖的数据发生改变。
监视属性(watch)
watch监视(侦听)器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
监视的两种方法
通过new Vue时传入watch配置：
通过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视频教程、web前端开发】
