前端框架VUE----计算属性和侦听器

Posted jiangshanduojiao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端框架VUE----计算属性和侦听器相关的知识,希望对你有一定的参考价值。

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

<div>
    {{ message.split(‘‘).reverse().join(‘‘) }}
</div>

在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。

所以,对于任何复杂逻辑,你都应当使用计算属性。

<div id = ‘com‘>
        <h3>{{msg}}</h3>
        <p>{{currentMsg}}</p>
        <button @click=‘clickHandler‘>更改</button>
</div>
    var com = new Vue({
            el:‘#com‘,
            data:{
                msg:‘学习computed‘
            },
            methods:{
                clickHandler(){

                    this.msg = ‘我更改了数据‘

                }

            },
            computed:{
                currentMsg(){
                    // computed方法中默认只有getter

                    return this.msg
                 }


                
            }

        })

当我点击按钮的时候更改了当前的数据,同时h3和p标签中数据也随时改变。

为什么会这样呢?

因为Vue知道com.currentMsg依赖与com.msg,因此当com.msg发生改变时,所有依赖com.currentMsg的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系。:计算属性的getter函数是没有副作用的,这使它更易于测试和理解。

 

同样的上面操作,我们不用computed声明的计算属性方法,而仅仅通过methods中声明的方法也能完成上面的效果,那么为什么又要使用computed方法呢?

因为计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要msg还没有发生变化,多次访问currentMsg计算属性会立刻返回之前计算的结果,而不比再次执行函数。同样的。每当触发重新渲染时,调用方法将总会执行函数。

 

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

 

计算属性的getter

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

  var com = new Vue({
            el:‘#com‘,
            data:{
                msg:‘学习computed‘
            },
            methods:{
                clickHandler(){

                    this.currentMsg = ‘我更改了数据‘

                }

            },
            computed:{
                currentMsg:{
                   set : function(newValue){
                      this.msg = newValue;
                   },
                   get : function(){
                     return this.msg;
                   }
                 }


                
            }

        })                            

当点击按钮的时候,会触发computed中的setter方法,从而将newValue的值,赋值给msg。因为计算属性方法的getter方法因为跟msg有依赖关系,从而会相应的发生改变。

 

以上是关于前端框架VUE----计算属性和侦听器的主要内容,如果未能解决你的问题,请参考以下文章

Vue3官网-高级指南(十七)响应式计算`computed`和侦听`watchEffect`(onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre)(代码片段

Vue.js高效前端开发 • Vue列表渲染

Vue.js高效前端开发 • Vue列表渲染

vue的计算属性和侦听属性的区别

Vue中的计算属性computed和侦听器watch

Vue中的计算属性computed和侦听器watch