一、区别:
1、methods:只要页面进行渲染,就会重新计算。
2、computed:是计算属性,当计算属性依赖的内容发生改变时,才会重新计算,只是缓存机制,更高效。
-
支持缓存,只有依赖数据发生改变,才会重新进行计算
-
不支持异步,当computed内有异步操作时无效,无法监听数据的变化
-
computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。
-
示例:
const app = Vue.createApp({
data() {
return {
message: "hello world",
count: 2,
price: 5
}
},
computed: {
// 当计算属性依赖的内容发生变更时,才会重新执行计算
total() {
return Date.now() + this.count;
// Date.now(),指的当前时间
// return this.count * this.price
}
},
methods: {
// 只要页面重新渲染,才会重新计算
getTotal() {
return Date.now();
// return this.count * this.price;
},
// this指向Vue的实例
},
template: `
<div> {{message}} {{total}} </div>
`
});
const vm = app.mount('#root');
在控制台,vm.message=4时,{{total}}始终不发生变化。
在控制台,vm.message的值重新渲染时,{{getTotal()}}发生变化
const app = Vue.createApp({
data() {
return {
message: "hello world",
count: 2,
price: 5
}
},
computed: {
// 当计算属性依赖的内容发生变更时,才会重新执行计算
total() {
return Date.now() + this.count;
// Date.now(),指的当前时间
// return this.count * this.price
}
},
methods: {
// 只要页面重新渲染,才会重新计算
getTotal() {
return Date.now()+this.count;
// return this.count * this.price;
},
// this指向Vue的实例
},
template: `
<div> {{message}} {{getTotal()}} </div>
`
});
const vm = app.mount('#root');
3、watch(侦听器)
定义理解:
watch
API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch
需要侦听特定的数据源,并在单独的回调函数中执行副作用。默认情况下,它也是惰性的——即回调仅在侦听源发生变化时被调用。
-
惰性地执行副作用;
-
更具体地说明应触发侦听器重新运行的状态;
-
访问被侦听状态的先前值和当前值。
更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;
-
不支持缓存,数据变,直接会触发相应的操作;
-
watch支持异步;
-
监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
写法:对象:有键,有值
-
键:就是你要监控的那个数据,比如说price,这个就是要监控data中的price变量。
-
值:
① 可以是【函数】:就是当你监控的price变量变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。
② 可以是【函数名】:不过这个函数名要用单引号来包裹。
③ 可以是【包括选项的对象】:
二、总结:
-
watch擅长处理的场景:一个数据影响多个数据
-
computed擅长处理的场景:一个数据受多个数据影响。
-
computed 和 method 都能实现的一个功能,建议使用 computed,因为有缓存。
-
computed 和 watch都能实现的功能,建议使用 computed 因为更加简洁
三、示例
const app = Vue.createApp({
data() {
return {
message: "hello world",
count: 2,
price: 5,
newTotal: 10,
}
},
// 创建侦听器
watch: {
// price 发生变化时,函数会执行
// 监听定量事件的watch改变,做一些异步的操作,current是变化后的值,prev变化前的值
price(current, prev) {
this.newTotal = current * this.count;
}
},
// 创建计算属性
computed: {
// 当计算属性依赖的内容发生变更时,才会重新执行计算,只是缓存机制,更高效。
total() {
return Date.now() + this.count;
// return this.count * this.price
}
},
methods: {
formatString(string) {
return string.toUpperCase();
},
// 只要页面重新渲染,才会重新计算
getTotal() {
return Date.now();
// return this.count * this.price;
},
// this指向Vue的实例
},
template: `
<div> {{message}} {{newTotal}} </div>
`
});
const vm = app.mount('#root');