河北手机网站制作价格,南京专业网站优化公司,wordpress 创建主题,皓丽智能会议平板官网这一节我们一起学习 vue 中的计算属性(computed properties)和侦听器(watch)。 在之前#xff0c;我们学习过 vue 表达式插值#xff1a; div idexample{{ message.split().reverse().join() }}
/div 如果在模板中放入太多的逻辑会让模板过重且难… 这一节我们一起学习 vue 中的计算属性(computed properties)和侦听器(watch)。 在之前我们学习过 vue 表达式插值 div idexample{{ message.split().reverse().join() }}
/div 如果在模板中放入太多的逻辑会让模板过重且难以维护。我们可以把方法写在事件处理函数里面并且在构造器内部通过 this 调用。!-- more --Html 代码 h1{{ this.reversedMessageMethod() }}/h1 JS 代码 methods: {reversedMessageMethod() {return this.message.split().reverse().join();},
}, 这里要提醒一下我们不可以把事件处理函数写成箭头函数因为这里的 this 需要指向 vue 实例。 一、过滤器 其实模板中的处理逻辑是不适合放在事件处理函数里的即使可以这么做。事件处理函数应该专注于处理事件我们应该让它变得纯粹。在 vue 中 允许我们自定义过滤器(filters)可被用于一些常见的文本格式化。 过滤器可以用在两个地方双花括号插值和 v-bind 表达式 (后者从 2.1.0 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部由 | 符号指示我们看看怎么用 templatediv classhelloh1{{ message.split().reverse().join() }}/h1!-- add this --h1{{ message | reverseString }}/h1/div
/templatescript
export default {name: HelloWorld,data() {return {message: Welcome to Your Vue.js App,};},// add this filters: {reverseString(val) {let value val;if (!value) return ;value value.split().reverse().join();return value;},},
};
/script 代码增多了但是整体的语义化却更好。从 filters 的用法我们可以看出 它是一对一的对单个数据进行过滤可以进行传参适用于同方法、不同参数的情况所以filters 的缺点就很明显了如果要计算结合多个数据不同变化的情况过滤器就无法适用了。这就要用到我们下面提到的计算属性了。 二、计算属性 在 vue 中也为我们提供了computed 这个选项来处理数据我们称它为计算属性。当逻辑复杂的时候我们就应当使用 computed 计算属性了。计算属性使用起来非常简单我们还是用上面的例子使用计算属性来修改模板中的逻辑 templatediv classhelloh1{{ message.split().reverse().join() }}/h1h1{{ message | reverseString }}/h1h1{{ this.reversedMessageMethod() }}/h1!-- add this --h1{{ reversedMessage }}/h1/div
/templatescript
export default {name: HelloWorld,data() {return {message: Welcome to Your Vue.js App,};},filters: {reverseString(val) {let value val;if (!value) return ;value value.split().reverse().join();return value;},},// add thiscomputed: {reversedMessage() {return this.message.split().reverse().join();},},methods: {reversedMessageMethod() {return this.message.split().reverse().join();},},
};
/script 和 method 选项的使用非常相似。我们可以像绑定普通属性一样在模板中绑定计算属性。 这两种方式的最终结果确实是完全相同的。然而不同的是计算属性是基于它们的依赖进行缓存的。什么意思呢 只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变多次访问 reversedMessage 计算属性会立即返回之前的计算结果而不必再次执行函数而当数据有变化时只要有一个数据发生变化则会重新计算来更新视图的改变。相比之下每当触发重新渲染时调用 methods 中的方法将总会再次执行函数。 我们为什么需要缓存假设我们有一个性能开销比较大的计算属性 A它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存我们将不可避免的多次执行 A 的 getter 我们来看看计算属性的具体应用场景 1、微博发文 发微博的时候有字数限制。在我们输入文字的时候输入框会计算我们还可以输入多少字 templatedivtextarea v-modelcontent :maxlengthtotalcount/textareap你还可以输入{{reduceCount}}字/p/div
/templatescript
export default {data() {return {totalcount: 200, // 总共只给输入200字content: ,};},computed: {reduceCount() {return this.totalcount - this.content.length;},},
};
/script 通过一直监听输入的字符的长度来触发 computed 里的 reduceCount 方法重新计算然后返回给视图让视图作出相应的变化。接下来我们再看一个例子。 2、足球比赛 这个例子是一个足球比赛的结果播报板我们先看看最终的效果再看代码 效果 代码 templatedivh1比赛时间{{time}}s/h1h2直播播报{{result}}/h2div classteamdivp中国队进球数{{team.china}}/pbutton clickteam.china点击中国队进一球/button/divdivp韩国队进球数{{team.korea}}/pbutton clickteam.korea点击韩国队进一球/button/div/div/div
/templatescript
export default {created() {const time setInterval(() {this.time this.time 1;if (this.time 90) {clearInterval(time);}}, 1000);},data() {return {time: 0,team: {china: 0,korea: 0,},};},computed: {result() {if (this.time 90) {if (this.team.china this.team.korea) {return 中国队领先;} else if (this.team.china this.team.korea) {return 韩国队领先;}return 双方僵持;}if (this.team.china this.team.korea) {return 中国队赢;} else if (this.team.china this.team.korea) {return 韩国队赢;}return 平局;},},
};
/scriptstyle scoped
.team {display: flex;justify-content: center;
}
button {padding: 15px 60px;outline: none;background-color: #27ae60;display: block;font-size: 1rem;color: #fff;margin: 10px;
}
/style 通过上面的例子我们就可以很清楚 computed 的作用了观察一个或者多个数据只要依赖的数据发生变化的时这个函数就会重新计算。这样我们就可以通过观察所有数据来维护一个状态也就是所谓的返回一个状态值。 三、侦听器 虽然计算属性在大多数情况下更合适但有时也需要一个自定义的侦听器。vue 通过 watch 选项提供了一个更通用的方法来响应数据的变化。 computed 和 watch 都可以做同一件事两个选项都是对数据进行时时监听。但是它们也有不同 computed 对多数据变动进行监听返回一个状态维护一个状态 watch 是对一个数据监听在数据变化时会返回两个值一个是 value (当前值)二是 oldvalue 是变化前的值我们也可以用 watch 选项来改造上面的足球比赛的例子添加一个 watch 选项 script
export default {created() {const time setInterval(() {this.time this.time 1;if (this.time 90) {clearInterval(time);}}, 1000);},data() {return {time: 0,team: {china: 0,korea: 0,},};},// add this watch: {time(value, oldval) { // eslint-disable-lineif (value 90) {if (this.team.china this.team.korea) {this.result 中国队领先;} else if (this.team.china this.team.korea) {this.result 韩国队领先;} else {this.result 双方僵持;}} else if (this.team.china this.team.korea) {this.result 中国队赢;} else if (this.team.china this.team.korea) {this.result 韩国队赢;} else {this.result 平局;}},team(value, oldval) { // eslint-disable-lineif (this.time 90) {if (value.china value.korea) {this.result 中国队领先;} else if (value.china value.korea) {this.result 韩国队领先;} else {this.result 双方僵持;}} else if (value.china value.korea) {this.result 中国队赢;} else if (value.china value.korea) {this.result 韩国队赢;} else {this.result 平局;}},},
};
/script 可以看出跟使用 computed 选项是差不多一致的。那 watch 有什么应用场景呢 有一个很常见的场景图片的预加载。当图片数量比较大的时候为了保证页面图片都加载出来的时候才把主页面给显示出来然后再进行一些 ajax 请求或者逻辑操作这个时候用 computed 就无法实现了只能用 watch 看看代码 templatediv v-showshowimg srchttps://img.alicdn.com/simba/img/TB14sYVQXXXXXc1XXXXSutbFXXX.jpg altimg src//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp altimg srchttps://img.alicdn.com/simba/img/TB1C0dOPXXXXXarapXXSutbFXXX.jpg altimg src//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp alt/div
/templatescript
export default {data() {return {count: 0,show: false,};},mounted() {const imgs document.querySelectorAll(img);console.log(imgs); // eslint-disable-lineArray.from(imgs).forEach((item) {const img new Image();img.onload () {this.count this.count 1;};img.src item.getAttribute(src);});},watch: {count(val, oldval) { // eslint-disable-lineif (val 4) {this.show true;alert(加载完毕); // eslint-disable-line// 然后可以对后台发送一些ajax操作}},},
};
/script 我们可以发现等四张图片都加载完毕的时候页面才显示出来。所以当我们想要在数据变化响应时执行异步操作或开销较大的操作就需要使用 watch 了。 四、总结 过滤器 filter : 一对一对单个数据进行过滤可以进行传参适用于同方法、不同参数的情况不适用于结合多个数据变化的情况计算属性 computed : 监听一个或者多个数据来维护返回一个状态值只在相关依赖发生改变时它们才会重新求值侦听器 watch : 对一个数据监听在数据变化时会返回两个值一个是 value (当前值)二是 oldvalue 是变化前的值注本节内容的 demo 均来自 混元霹雳手感谢作者本节内容代码https://github.com/IDeepspace... 欢迎关注我的博客https://togoblog.cn/
