Vue中watch和computed的区别
1.watch
对数据的监控观察
var vm = new Vue({ //...... data: { name: "张三" }, watch: { "name": function() { //..... } } })
上面的代码,我们在data
中定义了name
的值。而下面的watch
也对应键名定义了name
,值为一个函数。此时表示watch当前已经监听了data
中的name
,当name
的值发生改变时,则立即执行对应的函数。
此函数中还规定了两个参数来方便我们取得数据
1 watch: { 2 "name": function( newVal, oldVal ) { 3 //..... 4 }
第一个参数(newVal):数据改变后的值
第二个参数(oldVal):数据改变之前的值
2.watch监听路由的改变
watch不仅可以监听data中的数据,还可以监听路由的变化。
在Vue实例中,使用$route.path
监听路由地址的改变
var vm = new Vue({ //...... watch: { "$route.path": function() { } } })
同时,在对于操作比较耗时的操作也是可以使用 watch 监听。例如用户注册时,检测账号是否可用
3.computed
定义:是一个计算属性,类似于过滤器,对绑定到view的数据进行处理
computed是Vue内部规定的【计算属性】,与watch很像,也可以用来监听数据的获取和改变
//html <div id="app"> <input type="text" v-model = "fis"> <input type="text" v-model = "thir"> {{ sec }} </div> //js var vm = new Vue({ el:'#app', data:{ fis: 3, thir: 5, }, computed:{ sec: { get: function(){ return this.thir}, //只要function中的数据(这里是thir)发生变化,就会触发函数 set: function(val){ return 1} } } })
上面的代码中,定义了computed
,监听了sec
(属性),只要当函数定义的内部数据发生变化,即会触发函数。函数返回的值便是sec
的新值
当sec
属性发生改变,触发set
函数,若sec中只有一个函数,则会默认定义了get
set
函数中可以传一个参数,为当前数据新的值
一般使用场景
使用计算属性简化模板
//简化前 {{msg.split('').reverse().join('')}} //简化后 HTML: {{revserseString}} JS: computed: { revserseString: function (){ return this.msg.split('').reverse().join('') } }
上面定义了颠倒字符串的方法,使用计算属性来简洁了模板。
4.二者的区别
computed
在computed中定义的每一个计算属性,都会被缓存起来,只有当计算属性里面依赖的一个或多个属性变化了,才会重新计算当前计算属性的值。
- 支持数据的缓存。
- 函数内部的数据改变也会触发。
- 不支持异步,当
computed
内部有异步操作时computed
无效 - 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,一般用
computed
computed
属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props
中的数据通过计算得到的值
watch
watch是属性监听器,一般用来监听属性的变化(也可以用来监听计算属性函数),并做一些操作
- 不支持缓存
- 支持异步
- 只可以设置一个函数,可以带有两个参数
- 监听数据必须是
data
中声明过或者父组件传递过来的props
中的数据,当数据变化时,触发其他操作
原文:https://blog.csdn.net/pspxuan/article/details/104632916?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control