vue中computed和watch的使用及区别
2020-03-31 本文已影响0人
帝子兮小柒
一.
1.computed：当页面中某些数据依赖其他数据进行变动的时候，可以使用计算属性。
需要注意的是，就算在data中没有直接声明出要计算的变量，也可以直接在computed中写入。
计算属性默认只有getter，可以在需要的时候自己设定setter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar',
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
// fullName: {
// // getter
// get: function() {
// return this.firstName + ' ' + this.lastName
// },
// // setter
// set: function(newValue) {
// var names = newValue.split(' ')
// this.firstName = names[0]
// this.lastName = names[names.length - 1]
// }
// }
}
})
</script>
</body>
</html>
2.watch用于观察和监听页面上的vue实例，当然在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function(val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function(val) {
this.fullName = this.firstName + ' ' + val
}
}
})
</script>
</body>
</html>
二、computed与watch的区别：
计算属性computed :
-
支持缓存，只有依赖数据发生改变，才会重新进行计算
-
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的
- 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
侦听属性watch：
- 不支持缓存，数据变，直接会触发相应的操作；
2.watch支持异步；
3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
-
当一个属性发生变化时，需要执行对应的操作；一对多；
-
如果在data中没有相应的属性的话，是不能watch的，这点和computed不一样。
