有不少刚毕业的同学想不明白 vue的侦听器 今天给大家总结一下
vue2.0
- watch侦听器
看一下官方文档给出的例子
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 `question` 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},
},
newQuestion//新的 question值, oldQuestion // 旧的question值
当question属性发生改变时 会执行里面的函数
- computed
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
//省略部分代码
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
通过计算属性将mesage进行处理 调用reverseMessage 返回属性
得到结果:
Original message: “Hello”
Computed reversed message: “olleH”
你可以像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message,因此当 vm.message 发生改变时,所有依赖 vm.reversedMessage
的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系:计算属性的 getter 函数是没有副作用 (side effect)
的,这使它更易于测试和理解。
大家注意到 通过表达式中调用方法来达到同样的效果:
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
计算方法相比较方法更容易,,当属性值发生改变基于响应式的依赖进行缓存,如果不是响应式依赖则不执行 不需要重复执行函数
在进行开发是尽量使用computed 避免滥用watch
- 计算属性的setter
计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:
// ...
computed: {
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]
}
}
}
// ...
Vue3.0
- watch
与vue2相比 watch用法还是变化较大的
1.watch需要在setup使用 还需要先导入该组件。
2.只能监听响应式数据 普通字符串无法监听(vue3 很多方法都有这个限制)
3.新的 watch 默认是深度监听,无需再手动指定 deep 。
4.同样可以接受两个值 newVal oldVal
代码
export default defineComponent({
setup () {
const name = ref<string>('Petter');
// 2s后改变数据
setTimeout(() => {
name.value = 'Tom';
}, 2000);
// 你可以监听一个响应式对象
watch( name, (newVal, oldVal) => {
console.log('打印变化前后的值', { oldVal, newVal });
})
return {
name
}
}
})
- watchEffect
新增watchEffect 可以同时监听多个数据
watchEffect 可以直接监听方法 当数据发生改变触发watchEffect 但不可以监听状态变化的值
import { defineComponent, ref, watchEffect } from 'vue'
export default defineComponent({
setup () {
// 单独定义两个数据,后面用来分开改变数值
const name = ref<string>('Petter');
const age = ref<number>(18);
// 定义一个调用这两个数据的函数
const getUserInfo = (): void => {
console.log({
name: name.value,
age: age.value
});
}
// 2s后改变第一个数据
setTimeout(() => {
name.value = 'Tom';
}, 2000);
// 4s后改变第二个数据
setTimeout(() => {
age.value = 20;
}, 4000);
// 直接监听调用函数,在每个数据产生变化的时候,它都会自动执行
watchEffect(getUserInfo);
}
理论上 watchEffect 是 watch 的一个简化操作
watch 可以访问侦听状态变化前后的值,watchEffect 没有。
watch 是在属性改变的时候才执行,而 watchEffect 则默认会执行一次,然后在属性改变的时候也会执行。
- computed写法
需要先导入 computed 组件,然后在 setup 里启用它。
通过 computed 得到的是一个响应式的 ref 变量
语法:
const name: ComputedRef<string> = computed( () => `${firstName.value} ${lastName.value}`);