【相关推荐：JavaScript视频教程、web前端】
计算属性(computed)
计算属性指的是通过一系列运算之后，最终得到一个值。这个动态计算出来的属性值可以被模板结构或methods方法使用，案例如下：
(资料图片)
R：
G：
B： {{rgb}} <script src="/vue/vue.js"></script><script> const vm = new Vue({ el:"#root", data:{ r:0 , g:0, b:0, }, methods: { show() { console.log(this.rgb); } }, //所有计算属性都要定义到computed节点之下 computed: { // 计算属性在定义的时候，要定义成“方法格式”，在这个方法中会生成好的rgb(x,x,x)的字符串 //实现了代码的复用，只要计算属性中依赖的数据变化了，则计算属性会自动重新赋值 rgb() { return `rgb(${this.r},${this.g},${this.b})` } } })</script>
登录后复制使用名字动态改变实现计算属性案例：
全名：{{fullname}}<script src="/vue/vue.js"></script><script> const vm = new Vue({ el:"#root", data:{ firstname:"张", lastname:"三" }, computed:{ fullname:{ //当初次读取fullname或所依赖的数据发生变化时，get被调用 get(){ console.log("get被调用了"); return this.firstname+"-"+this.lastname }, //当主动修改fullname时，set被调用 set(value){ console.log("set", value); const arr = value.split("-"); this.firstname = arr[0] this.lastname = arr[1] } } } })</script>
登录后复制监视属性(watch)
watch监视(侦听)器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
监视的两种方法
通过new Vue时传入watch配置：
<script src="./vue.js"></script><script> const vm = new Vue({ el:"#root", data:{ name:"" }, //所有的侦听器，都应该被定义到watch节点下 watch:{ // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可 //newVal是“变化后的新值”，oldVal是“变化之前旧值” name(newVal,oldVal){ //监听name值的变化 console.log("监听到了新值"+newVal, "监听到了旧值"+oldVal); } } })</script>
登录后复制通过vm.$watch监视：
今天天气很{{info}}
<script src="./vue.js"></script><script> const vm = new Vue({ el:"#root", data:{ isHot:true }, computed:{ info(){ return this.isHot ? "炎热" : "凉爽" } }, methods:{ changeWeather(){ this.isHot = !this.isHot } }, }) vm.$watch("info",{ handler(newVal,oldVal){ console.log("天气被修改了", newVal, oldVal); } })</script>
登录后复制immediate选项
默认情况下，组件在初次加载完毕后不会调用watch侦听器，如果想让watch侦听器立即被调用，则需要使用immediate选项，immediate的作用是控制侦听器是否自动触发一次，选项的默认值为：false
<script src="./vue.js"></script><script> const vm = new Vue({ el:"#root", data:{ name:"admin" }, watch:{ //定义对象格式的侦听器 name:{ handler(newVal,oldVal){ console.log(newVal, oldVal); }, immediate:true } } })</script>
登录后复制深度监视
如果watch侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用deep选项，开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”。
<script src="./vue.js"></script><script> const vm = new Vue({ el:"#root", data:{ info:{ name:"admin" } }, watch:{ info: { handler(newVal){ console.log(newVal); }, //开启深度监听 deep:true } } })</script>
登录后复制如果想要侦听的对象是子属性的变化，则必须包裹一层单引号。
watch:{ "info.name"(newVal){ console.log(newVal); }}登录后复制watch能开启异步任务，案例如下：
全名：{{fullname}}<script src="/vue/vue.js"></script><script> const vm = new Vue({ el:"#root", data:{ firstname:"张", lastname:"三", fullname:"张-三" }, //watch能开启异步任务 watch:{ firstname(val){ setTimeout(()=>{ this.fullname = val + "-" + this.lastname },1000) }, lastname(val){ this.fullname = this.firstname+"-"+val } } })</script>
登录后复制【相关推荐：JavaScript视频教程、web前端】
以上就是JavaScript计算属性与监视(侦听)属性的使用的详细内容，更多请关注php中文网其它相关文章！
