本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了计算属性与监视属性使用的相关内容，计算属性指的是通过一系列运算之后，最终得到的一个值，监视器允许开发者监视数据的变化，从而针对数据的变化做特定的操作；下面一起来看一下，希望对大家有帮助。
【相关推荐：javascript视频教程、web前端】
计算属性(computed)计算属性指的是通过一系列运算之后，最终得到一个值。这个动态计算出来的属性值可以被模板结构或methods方法使用，案例如下：
<div id="root">    r：<input type="text" v-model.number="r"><br>    g：<input type="text" v-model.number="g"><br>    b：<input type="text" v-model.number="b">    <div class="box" :style="{backgroundcolor:rgb}">        {{rgb}}    </div>    <button @click="show">按钮</button></div><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>
使用名字动态改变实现计算属性案例：
<div id="root">    <input type="text" v-model="firstname"><br>    <input type="text" v-model="lastname"><br>    全名：<span>{{fullname}}</span></div><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>
计算属性：
1.定义：要用的属性不存在，要通过已有的属性得来
2.原理：底层借助了object.defineproperty方法提供的getter和setter
3.优势：与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便
4.备注：计算属性最终会出现在vm上，直接读取使用即可；如果计算属性要被修改，那必须写set函数去响应改变，且set中要引起计算时依赖的数据发生改变。
监视属性(watch)watch监视(侦听)器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
监视的两种方法通过new vue时传入watch配置：
<div id="root">    <input type="text" v-model="name"></div><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监视：
<div id="root">    <h2>今天天气很{{info}}</h2>    <button @click="changeweather">切换天气</button></div><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
<div id="root">    <input type="text" v-model="name"></div><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选项，开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”。
<div id="root">    <input type="text" v-model="info.name"></div><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);    }}
总结：
1）vue中的watch默认不监测对象内部值的改变(一层)
2）配置deep:true可以监测对象内部值改变(多层)
3）vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以
4）使用watch时根据数据的具体结构，决定是否采用深度监视
watch能开启异步任务，案例如下：
<div id="root">    <input type="text" v-model="firstname"><br>    <input type="text" v-model="lastname"><br>    全名：<span>{{fullname}}</span></div><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>
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
隐性原则：
1.被vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
2.不被vue所管理的函数(定时器的回调函数、ajax的回调函数、promise的回调函数)，最好写成箭头函数，这样this的指向才是vm或组件实例对象。
【相关推荐：javascript视频教程、web前端开发】
以上就是javascript计算属性与监视(侦听)属性的使用的详细内容。