精品网站建设需要多少钱,网站的推广方式组合,做网站需要的技术 规范,asp网站 底部版权所有题记 大部分的工作中使用computed的频次很低的#xff0c;所以今天拿出来一文对于computed进行详细的介绍#xff0c;因为Vue的灵魂之一就是computed。 模板内的表达式非常便利#xff0c;但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护…题记 大部分的工作中使用computed的频次很低的所以今天拿出来一文对于computed进行详细的介绍因为Vue的灵魂之一就是computed。 模板内的表达式非常便利但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护所以对于复杂逻辑vue 提倡使用计算属性。需要特别说明计算属性的 getter 函数是没有副作用 (side effect) 的这使它更易于测试和理解 — from Vue计算属性
引言
讨论 computed 和 watch 之间的区别前我们先看下 computed 和 methods 有何区别
computed or methods
理论上computed 所有实现可以使用 methods 完全替换。
pReversed message: {{ reversedMessage() }}/p
pReversed message: {{ reversedMessage }}/p// 计算属性
computed: {reversedMessage () {return this.message.split().reverse().join()}
}
// 方法
methods: {reversedMessage: function () {return this.message.split().reverse().join()}
}计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变多次访问 reversedMessage计算属性会立即返回之前的计算结果而不必再次执行函数。而方法却会执行。
这也同样意味着下面的计算属性将不再更新因为 Date.now() 不是响应式依赖
computed: {now: function () {return Date.now()}
}我们为什么需要缓存假设我们有一个性能开销比较大的计算属性 A它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存我们将不可避免的多次执行 A 的 getter如果你不希望有缓存请用方法来替代。
相同之处 computed 和 methods 将被混入到 Vue 实例中。vm.reversedMessage/vm.reversedMessage() 即可获取相关计算属性/方法。 接下来看下 computed 和 watch 有何区别
正文
computed or watch
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动侦听属性。当你有一些数据需要随着其它数据变动而变动时你很容易滥用 watch然而通常更好的做法是使用计算属性而不是命令式的 watch 回调。
当需要在数据变化时执行异步或开销较大的操作时 watch 方式是最有用的。其允许我们执行异步操作 (访问一个 API)限制我们执行该操作的频率并在我们得到最终结果前设置中间状态。这些都是计算属性无法做到的。
methods: {getAnswer: function () {this.answer Thinking...var vm thisaxios.get(https://yesno.wtf/api).then(function (response) {vm.answer _.capitalize(response.data.answer)}).catch(function (error) {vm.answer Error! Could not reach the API. error})}
},
created: function () {// debounce 反弹函数this.debouncedGetAnswer _.debounce(this.getAnswer, 500)
} 这样来看watch 完全可以替代 computed 什么情况下只能使用computed呢
回顾 computed 最大特点就是缓存所以上述问题可以转换为哪些情况下我们需要依赖缓存
示例父组件给子组件传值值的类型为引用类型
父组件
templatedivchild :useruser/childlabel foruserparent/labelinput iduser typetext v-modeluser.name/div
/template
script
import Child from ./child.vue
export default {data () {return {user: { name: ligang }}},components: { Child }
}
/script子组件
templatedivchild: {{user}}/div
/template
script
export default {name: child,props: [user]
}
/script现在有这样一个需求子组件中需要同时显示改变前和改变后的值。
So Easy只需要在 watch 中保存 oldVal 即可。
templatedivdivchild:/divdiv修改前{{oldUser}} 修改后{{user}}/div/div
/template
script
export default {name: child,props: [user],data () {return {oldUser: {}}},watch: {user: {handler (val, oldVal) {this.oldUser oldVal || val},deep: true,immediate: true}}
}
/script查看结果WTF啥情况~~ 问题在于user为引用类型且 watch 没有做缓存导致了修改的是同一个对象所以watch 方法中**val olVal is true**
如何达到要求呢这里我们就可以借用 computed 缓存的特性来完成上述情况。
计算属性的结果会被缓存除非依赖的响应式属性变化才会重新计算。注意如果某个依赖 (比如非响应式属性) 在该实例范畴之外则计算属性是不会被更新的。 — vue-computed-api
templatedivdivchild:/divdiv修改前{{oldUser}} 修改后{{user}}/div/div
/template
script
export default {name: child,props: [user],data () {return {oldUser: {}}},// 缓存 userInfo computed: {userInfo () {return { ...this.user }}},watch: {userInfo: {handler (val, oldVal) {this.oldUser oldVal || val},deep: true,immediate: true}}
}
/script需要注意{ ...this.user } 或者使用 Object.assign({}, this.user) 来创建新的引用
