大家好,我是大帅子,今天给大家讲一下watch跟computed的区别,下面我们直接开始吧
-
功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
-
是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
-
是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
-
computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）
-
使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----购物车商品结算。watch–当一条数据影响多条数据的时候，使用watch-----搜索框.
watch的实现
<body><div id="app">姓： <input type="text" v-model=firstName> 名：<input type="text" v-model=lastName> 姓名：<span>{{fullname}}</span></div>
</body>
<script type="text/javascript">var app = new Vue({el: "#app",data: {firstName: 'z',lastName: 's',fullname: 'zs'},watch: {firstName(newval) {
this.fullname = newval + this.lastName},lastName(newval) {this.fullname = this.firstName + newval}
}})
</script>
computed的实现
<body><div id="app">姓： <input type="text" v-model=firstName> 名：<input type="text" v-model=lastName> 姓名：<span>{{fullname}}</span></div>
</body>
<script type="text/javascript">var app = new Vue({el: "#app",data: {firstName: 'z',lastName: 's'},computed: {fullname() {return this.firstName + this.lastName}}})
</script>
watch与computed区别总结
computed支持缓存，相依赖的数据发生改变才会重新计算；watch不支持缓存，只要监听的数据变化就会触发相应操作
computed不支持异步，当computed内有异步操作时是无法监听数据变化的；watch支持异步操作
computed属性的属性值是一函数，函数返回值为属性的属性值，computed中每个属性都可以设置set与get方法。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器
最后
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。
同时每个成长路线对应的板块都有配套的视频提供：
当然除了有配套的视频，同时也为大家整理了各种文档和书籍资料&工具，并且已经帮大家分好类了。
因篇幅有限，仅展示部分资料，有需要的小伙伴，可以【点下方卡片】免费领取：
