区块链技术博客
www.b2bchain.cn

Vue 3 计算属性和侦听器求职学习资料

本文介绍了Vue 3 计算属性和侦听器求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

计算属性和侦听器

实验介绍

我们都知道,模板内的表达式计算是非常便利的,但是如果涉及到非常复杂的计算方式,一个结算结果如果依赖很多个变量,就会变得难以维护了,所以计算属性就此应运而生了。

计算属性

我们还是之前的项目进行代码实验,还是在 src/views/TemplateM.vue 写代码,假如我们模拟数据有无效果,我们需要通过判断数据的数组的长度是否为 0 来展示不同的效果,如果为 0 我们提示暂无数据,如果数据不为 0 我们就展示数据:

<template>   <div class="template-m-wrap">     <div v-if="lists">       <ul>         <li :key="index" v-for="(item, index) in list">{{ item }}</li>       </ul>     </div>     <div v-else>暂无数据</div>   </div> </template> <script> export default {   name: "TemplateM",   data() {     return {       list: [],     };   },   created() {     let self = this;     setTimeout(() => {       self.getLists();     }, 3000);   },   computed: {     lists() {       return this.list.length;     },   },   methods: {     getLists() {       this.list = ["Ken", "coding", "投资", "谢教程"];     },   }, }; </script>

Vue 3 计算属性和侦听器

我们还是访问 http://localhost:8080/template_m,查看浏览器效果:

Vue 3 计算属性和侦听器

但是如果我们碰到更加复杂的情况,比如说上面这个计算属性如果依赖很多变量,最终计算出来的结果,如果我们直接在模板中计算,其实后期维护是很麻烦的,所以碰到这种需要做大量计算的变量,我们就直接使用计算属性。

computed: {     lists() {         return this.list.length;     }, },

计算属性缓存 vs 方法

你可能会注意到去,其实我们也可以使用函数的方式调用:

<template>   <div class="template-m-wrap">     <div v-if="lists()">       <ul>         <li :key="index" v-for="(item, index) in list">{{ item }}</li>       </ul>     </div>     <div v-else>暂无数据</div>   </div> </template> <script> export default {   name: "TemplateM",   data() {     return {       list: [],     };   },   created() {     let self = this;     setTimeout(() => {       self.getLists();     }, 3000);   },   methods: {     lists() {       return this.list.length;     },     getLists() {       this.list = ["Ken", "coding", "投资", "谢教程"];     },   }, }; </script>

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的反应依赖关系缓存的。计算属性只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 this.list 还没有发生改变,多次访问 lists 计算属性会立即返回之前的计算结果,而不必再次执行函数。

Vue 3 计算属性和侦听器

我们还是访问 http://localhost:8080/template_m,查看浏览器效果,从效果上看没有丝毫的变化,但是从机制上看,确实有很大的区别:

Vue 3 计算属性和侦听器

计算属性的 Setter

上面说道缓存,我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 lists,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 lists。如果没有缓存,我们将不可避免的多次执行 lists 的 getter!如果你不希望有缓存,请用 method 来替代。

计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:

“`html

计算属性和侦听器

实验介绍

我们都知道,模板内的表达式计算是非常便利的,但是如果涉及到非常复杂的计算方式,一个结算结果如果依赖很多个变量,就会变得难以维护了,所以计算属性就此应运而生了。

计算属性

我们还是之前的项目进行代码实验,还是在 src/views/TemplateM.vue 写代码,假如我们模拟数据有无效果,我们需要通过判断数据的数组的长度是否为 0 来展示不同的效果,如果为 0 我们提示暂无数据,如果数据不为 0 我们就展示数据:

<template>   <div class="template-m-wrap">     <div v-if="lists">       <ul>         <li :key="index" v-for="(item, index) in list">{{ item }}</li>       </ul>     </div>     <div v-else>暂无数据</div>   </div> </template> <script> export default {   name: "TemplateM",   data() {     return {       list: [],     };   },   created() {     let self = this;     setTimeout(() => {       self.getLists();     }, 3000);   },   computed: {     lists() {       return this.list.length;     },   },   methods: {     getLists() {       this.list = ["Ken", "coding", "投资", "谢教程"];     },   }, }; </script>

Vue 3 计算属性和侦听器

我们还是访问 http://localhost:8080/template_m,查看浏览器效果:

Vue 3 计算属性和侦听器

但是如果我们碰到更加复杂的情况,比如说上面这个计算属性如果依赖很多变量,最终计算出来的结果,如果我们直接在模板中计算,其实后期维护是很麻烦的,所以碰到这种需要做大量计算的变量,我们就直接使用计算属性。

computed: {     lists() {         return this.list.length;     }, },

计算属性缓存 vs 方法

你可能会注意到去,其实我们也可以使用函数的方式调用:

<template>   <div class="template-m-wrap">     <div v-if="lists()">       <ul>         <li :key="index" v-for="(item, index) in list">{{ item }}</li>       </ul>     </div>     <div v-else>暂无数据</div>   </div> </template> <script> export default {   name: "TemplateM",   data() {     return {       list: [],     };   },   created() {     let self = this;     setTimeout(() => {       self.getLists();     }, 3000);   },   methods: {     lists() {       return this.list.length;     },     getLists() {       this.list = ["Ken", "coding", "投资", "谢教程"];     },   }, }; </script>

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的反应依赖关系缓存的。计算属性只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 this.list 还没有发生改变,多次访问 lists 计算属性会立即返回之前的计算结果,而不必再次执行函数。

Vue 3 计算属性和侦听器

我们还是访问 http://localhost:8080/template_m,查看浏览器效果,从效果上看没有丝毫的变化,但是从机制上看,确实有很大的区别:

Vue 3 计算属性和侦听器

计算属性的 Setter

上面说道缓存,我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 lists,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 lists。如果没有缓存,我们将不可避免的多次执行 lists 的 getter!如果你不希望有缓存,请用 method 来替代。

计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:

“`html

计算属性和侦听器

实验介绍

我们都知道,模板内的表达式计算是非常便利的,但是如果涉及到非常复杂的计算方式,一个结算结果如果依赖很多个变量,就会变得难以维护了,所以计算属性就此应运而生了。

计算属性

我们还是之前的项目进行代码实验,还是在 src/views/TemplateM.vue 写代码,假如我们模拟数据有无效果,我们需要通过判断数据的数组的长度是否为 0 来展示不同的效果,如果为 0 我们提示暂无数据,如果数据不为 0 我们就展示数据:

<template>   <div class="template-m-wrap">     <div v-if="lists">       <ul>         <li :key="index" v-for="(item, index) in list">{{ item }}</li>       </ul>     </div>     <div v-else>暂无数据</div>   </div> </template> <script> export default {   name: "TemplateM",   data() {     return {       list: [],     };   },   created() {     let self = this;     setTimeout(() => {       self.getLists();     }, 3000);   },   computed: {     lists() {       return this.list.length;     },   },   methods: {     getLists() {       this.list = ["Ken", "coding", "投资", "谢教程"];     },   }, }; </script>

Vue 3 计算属性和侦听器

我们还是访问 http://localhost:8080/template_m,查看浏览器效果:

Vue 3 计算属性和侦听器

但是如果我们碰到更加复杂的情况,比如说上面这个计算属性如果依赖很多变量,最终计算出来的结果,如果我们直接在模板中计算,其实后期维护是很麻烦的,所以碰到这种需要做大量计算的变量,我们就直接使用计算属性。

computed: {     lists() {         return this.list.length;     }, },

计算属性缓存 vs 方法

你可能会注意到去,其实我们也可以使用函数的方式调用:

<template>   <div class="template-m-wrap">     <div v-if="lists()">       <ul>         <li :key="index" v-for="(item, index) in list">{{ item }}</li>       </ul>     </div>     <div v-else>暂无数据</div>   </div> </template> <script> export default {   name: "TemplateM",   data() {     return {       list: [],     };   },   created() {     let self = this;     setTimeout(() => {       self.getLists();     }, 3000);   },   methods: {     lists() {       return this.list.length;     },     getLists() {       this.list = ["Ken", "coding", "投资", "谢教程"];     },   }, }; </script>

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的反应依赖关系缓存的。计算属性只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 this.list 还没有发生改变,多次访问 lists 计算属性会立即返回之前的计算结果,而不必再次执行函数。

Vue 3 计算属性和侦听器

我们还是访问 http://localhost:8080/template_m,查看浏览器效果,从效果上看没有丝毫的变化,但是从机制上看,确实有很大的区别:

Vue 3 计算属性和侦听器

计算属性的 Setter

上面说道缓存,我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 lists,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 lists。如果没有缓存,我们将不可避免的多次执行 lists 的 getter!如果你不希望有缓存,请用 method 来替代。

计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:

“`html

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » Vue 3 计算属性和侦听器求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们