监听器
Vue.js 2 中,监听器(Watchers)是一种机制,用于在数据发生变化时执行特定的操作。监听器允许你监视 Vue 实例中的数据变化,并在数据变化时执行自定义的逻辑。
监听器的创建和使用:
在 Vue 实例中,你可以通过 watch 选项或者 vm.$watch 方法来创建监听器。
语法:
watch: {
变量名 (newVal, oldVal){
// 变量名对应值改变这里自动触发
},
变量名: {
handler(newVal, oldVal){
},
deep: true, // 深度侦听(对象里面层的值改变)
immediate: true // 立即侦听(网页打开handler执行一次)
}
}
// newVal: 当前最新值
// oldVal: 上一刻值
deep: true, // 深度侦听(对象里面层的值改变)
immediate: true // 立即侦听(网页打开handler执行一次)
Handle :watch中需要具体执行的方法
// 当需要数据变化时执行异步或开销过大时,这个方式是最有用的
监听器的功能:
监听数据变化: 监听器用于监听指定数据的变化,一旦数据变化,就会执行指定的回调函数。
处理数据变化: 通过监听器,你可以对数据变化做出响应,执行一些自定义逻辑,例如更新 UI、发送网络请求等。
深度监听: 监听器默认情况下是浅层监听,只能监听对象的第一层属性的变化。但是你可以通过设置 deep: true 选项来深度监听对象内部属性的变化。
立即执行: 通过设置 immediate: true 选项,可以在监听器初始化时立即执行一次回调函数,而不必等待数据变化。
总结:
监听器是 Vue.js 中用于监听数据变化的重要机制之一。
监听器可以在数据变化时执行自定义的逻辑。
你可以通过 watch 选项或 vm.$watch 方法来创建监听器。
监听器可以处理深层对象的变化,也可以选择立即执行。
使用监听器可以帮助你更好地响应数据的变化,从而实现更灵活的应用逻辑。
计算属性
Vue.js 2 中的计算属性(Computed Properties)是一种便利的特性,允许你在 Vue 实例中声明计算属性,这些属性的值会根据依赖数据的变化而变化,同时具有缓存机制,只有在相关依赖数据发生改变时才会重新计算。
计算属性的创建和使用:
格式:
computed: {
"计算属性名" () {
return "值"
}
}
可写式计算属性
computed: {
"属性名": {
set(值){
},
get() {
return "值"
}
}
}
计算属性的特点:
响应式更新: 计算属性会根据它们的依赖进行响应式更新。当依赖数据发生变化时,计算属性会重新计算,并且在依赖数据没有变化时,会返回之前缓存的结果,提高了性能。
缓存机制: 计算属性具有缓存机制,只有在相关依赖数据发生改变时才会重新计算。这意味着在多次访问计算属性时,如果依赖数据没有发生改变,计算属性会直接返回之前的计算结果,而不会重新执行计算函数。
简洁易用: 计算属性的声明方式简洁明了,能够帮助你轻松地处理复杂的计算逻辑,并且能够将这些逻辑封装在属性中,使得代码更加清晰易懂。
计算属性的应用场景:
对数据进行转换: 当需要对原始数据进行某种转换或处理时,可以使用计算属性。例如,将原始数据转换为特定格式、进行大小写转换等。
依赖多个数据计算属性: 当一个属性的值依赖于多个数据的计算结果时,可以使用计算属性。这样可以避免在模板中重复计算,提高代码的复用性和可维护性。
复杂逻辑的封装: 当需要进行一些复杂的逻辑计算时,可以使用计算属性来封装这些逻辑,使得代码更加清晰易懂,同时也更易于维护和测试。
总结:
计算属性是 Vue.js 中的一种便捷特性,用于声明基于依赖数据的计算属性。
计算属性具有响应式更新和缓存机制,能够根据依赖数据的变化而自动更新,并且在依赖数据不变时具有高效的缓存。
计算属性适用于各种场景,包括对数据进行转换、依赖多个数据计算属性、以及复杂逻辑的封装等。
使用计算属性能够使代码更加清晰易懂,并且提高了代码的可维护性和复用性。
计算属性 VS 监听器
1. 数据变化的触发方式:
计算属性: 计算属性是基于依赖数据的值进行计算的,只有当依赖数据发生变化时,计算属性才会重新计算。计算属性会自动缓存计算结果,只有在相关依赖发生变化时才会重新计算,以提高性能。
监听器: 监听器则是在某个数据发生变化时执行特定的回调函数。你可以手动设置需要监听的数据,并在数据变化时执行指定的逻辑,而不像计算属性那样自动进行计算和缓存。
2. 使用场景:
计算属性: 适用于根据一个或多个响应式数据进行计算,并且该计算的结果会被多次使用的情况。通常用于模板中的数据展示、数据转换等场景。
监听器: 适用于需要在特定数据发生变化时执行一些自定义的逻辑的情况。可以监听数据的变化,并在数据变化时执行一些异步操作、更新非响应式数据等。
3. 声明方式:
计算属性: 在 Vue 实例中通过 computed 选项声明计算属性,计算属性的值是一个函数,该函数会根据相关依赖数据的变化而自动计算。
监听器: 可以通过 watch 选项或 vm.$watch 方法来创建监听器,监听器需要手动设置需要监听的数据,并且指定数据变化时执行的回调函数。
4. 缓存机制:
计算属性: 计算属性具有缓存机制,只有在相关依赖数据发生改变时才会重新计算。这意味着在多次访问计算属性时,如果依赖数据没有发生改变,计算属性会直接返回之前的计算结果,而不会重新执行计算函数。
监听器: 监听器每次数据变化都会执行回调函数,不具有缓存机制,每次都会重新执行逻辑。
5. 性能:
计算属性: 由于具有缓存机制,计算属性在相同依赖数据的情况下只会计算一次,并且在依赖数据不变的情况下会直接返回缓存结果,因此具有较高的性能。
监听器: 监听器每次数据变化都会执行回调函数,不具有缓存机制,因此在多次数据变化时可能会存在性能开销。