亚马逊网站的建设目标,网站建设公司 预算,软件下载网站哪个比较好,北京移动网站建设公司价格计算属性
模板中的表达式虽然方便#xff0c;但也只能用来做简单的操作。如果在模板中写太多逻辑#xff0c;会让模板变得臃肿#xff0c;难以维护。推荐使用计算属性来描述依赖响应式状态的复杂逻辑
基础示例
不够好的示例
模板中使用了表达式#xff0c;不够直观但也只能用来做简单的操作。如果在模板中写太多逻辑会让模板变得臃肿难以维护。推荐使用计算属性来描述依赖响应式状态的复杂逻辑
基础示例
不够好的示例
模板中使用了表达式不够直观必须认真看好一会儿才能明白它的计算依赖于 author.books如果模板中需要不止一次这样的计算这样的代码会在模板里重复好多遍。因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑 templatepHas published books:/pspan{{ author.books.length 0 ? Yes : No }}/span/templatescript
export default {name: MyInput,data() {return {author: {name: John Doe,books: [Vue 2 - Advanced Guide,Vue 3 - Basic Guide,Vue 4 - The Mystery]}}}}/scriptstyle langscss/style使用计算属性 定义了一个计算属性 publishedBooksMessage 在模板中使用计算属性的方式和一般的属性一模一样。 更改此应用的 data 中 books 数组的值后可以看到 publishedBooksMessage 也会随之改变。 Vue 会检测到 this.publishedBooksMessage 依赖于 this.author.books所以当 this.author.books 改变时任何依赖于 this.publishedBooksMessage 的绑定都将同时更新如果模板中多次使用计算属性计算属性的方法只会执行一次结果会被缓存下来当计算属性所依赖的响应式属性发生变化时才会再次执行重新计算。 templatepHas published books:/pspan{{ publishedBooksMessage }}/spanpbutton clickauthor.books.splice(0,3)author.books.splice(0,3)/button/ppbutton clickauthor.books[]author.books[]/button/p/templatescript
export default {name: MyInput,data() {return {author: {name: John Doe,books: [Vue 2 - Advanced Guide,Vue 3 - Basic Guide,Vue 4 - The Mystery]}}},computed: {// 一个计算属性的 getterpublishedBooksMessage() {// this 指向当前组件实例return this.author.books.length 0 ? Yes : No}}}/scriptstyle langscss/style计算属性缓存 vs 方法
在表达式中调用一个函数也会获得和计算属性相同的结果不同之处在于计算属性值会基于其响应式依赖被缓存注意是基于响应式依赖被缓存而 方法调用总是会在重渲染发生时再次执行函数 一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books 不改变无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果而不用重复执行 getter 函数 这也解释了为什么下面的计算属性永远不会更新因为 Date.now() 并不是一个响应式依赖 computed: {now() {return Date.now()}
}可写计算属性
计算属性默认是只读的。当你尝试修改一个计算属性时你会收到一个运行时警告只在某些特殊场景中你可能才需要用到“可写”的属性你可以通过同时提供 getter 和 setter 来创建
示例 监听input的输入事件当input发生输入事件时触发监听函数将监听的值设置给计算属性则计算属性的setter方法会被调用。setter方法调用中触发了计算属性的响应式依赖发生变化因此又会重新渲染页面计算属性的getter方法将被调用。
MyInput.vue
templatecustom-input/
/templatescriptimport CustomInput from ./CustomInput.vue;export default {name: MyInput,components:{CustomInput}
}/scriptstyle langscss/styleCustomInput.vue
templateinput typetext :valuefullName inputhandleInput($event){{ fullName }}/templatescriptexport default {name: CustomInput,data() {return {firstName:zeng,lastName: jian,}},methods: {handleInput(e) {console.log(e.target.value);this.fullName e.target.value}},computed: {fullName: {get() {console.log(getter);return this.firstName - this.lastName},set(val) {console.log(setter);this.firstName val.split(-)[0]this.lastName val.split(-)[1]}}}
}/scriptstyle langscss/style最佳实践
Getter 不应有副作用 计算属性的 getter 应只做计算而没有任何其他的副作用 这一点非常重要请务必牢记。举例来说不要在 getter 中做异步请求或者更改 DOM一个计算属性的声明中描述的是如何根据其他值派生一个值。因此 getter 的职责应该仅为计算和返回该值。在之后的指引中我们会讨论如何使用监听器根据其他响应式状态的变更来创建副作用。 避免直接修改计算属性值 从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”每当源状态发生变化时就会创建一个新的快照。更改快照是没有意义的因此计算属性的返回值应该被视为只读的并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。
