vue计算属性（vue计算属性缓存原理）

本篇文章给大家谈谈vue计算属性，以及vue计算属性缓存原理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue的计算属性理解及与watch的区别
• 2、Vue中的计算属性与监视属性
• 3、Vue知识点：计算属性

vue的计算属性理解及与watch的区别

计算属性:computed

在一个计算函数里可以完成各种复杂的逻辑，包括运算、函数调用等；

如：computed：{

        reversedText:function(){

                return this.text.split(',').revetse().join(',');

        }

}

可以直接在div{{reversedText}}/div调用；

依赖于text更新。text发生改变reversedText才发生改变；

虽然在methods里写一个方法也可以起到同样的作用；

但是计算属性是基于它的依赖缓存的；依赖不变计算属性就不会发生改变会渣念缓陆腊存下拉；

就是说同一个界面多个地方调用了这个reversedText；如果text不是效应式依赖；

reversedText是写methods中的方法，那么只要重新渲染，调用方早梁滑法函数就会执行；重新计算；

reversedText是计算属性那么就不需要重新计算；

说说计算属性的setter 和 getter；

get 是用于读取

set是用于写入触发；

比如你在一个方法中触发了这个计算属性，给它赋值，那么就会触发set里面的方法；

然后watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。

watch:{

    text:function () {

      this.msg="dajiahao"

    }

}

text发生改变 调用相应的方法

[img]

Vue中的计算属性与监视属性

定义： 要用的属性不存在，需要通过谈散已有属性计算得来。

原理： 底层借助了Objcet.defineproperty()方法提供的getter和setter。

get函数什么时候执含卖氏行？

    1）初次读取时会执行一次

    2）当依赖的数据发生改变时会被再次调用

优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

备注：

    1）计算属性最终会出现在vm上，直接读取使用即可

    2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

    3）如果计算属性确定不考虑修改，可以使用计算属性的简写形式

1、当被监视的属性变化时，回调函数自动调用，进行相关操作

2、监视的属性必须存在，才能进行监视

3、监视有两种写法：

    1）创建Vue时传入watch配置

    2）通过vm.$watch监视

深度监视：

Vue中的watch默认不监测对象内部值的改变（一层）

在watch中 配置deep:true可以监测对象内部值的改变 （多层）

备注：

Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

使用watch时根据监视数据的具体结构，决定是否采用深度监视

简写：

computed和watch之间的区别：

computed能完成的功能，watch都可以完成 （可能写起来更复杂）

watch能完成的功能，computed不一定能完成 ，例如：watch可以进行 异步操作 （定时）

两个重要的小原则：

1） 所有被Vue管理的函数，最好写成普通函数 ，配乎这样this的指向才是 vm 或 组件实例对象

2） 所有不被Vue所管理的函数 （定时器的回调函数、ajax的回调函数等、Promise的回调函数）， 最好写成箭头函数 ，这样this的指向才是vm 或 组件实例对象。

Vue知识点：计算属性

1. 定义：计算属性不存在，要通过已有属性计算得出。

2. 原理：底层借助了Object.defineproperty方法提供的getter和setter。

3. get函数什么时候执行？

          （1）初次读滑知取时会执行一次。

          （2）当依赖的数据发生改变时会被再次调用。

4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5. 备注：

          （1）计算属性最终会出现在vm上，直接读取使用即可。

                    注：可以直接使用插值方法调用计算属性。比如： {{fullname}}

          （2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发            生改变。

```javascript

div id="root"

姓：input type="text" v-model="firstName"/ br

名信蚂消：input type="text" v-model="lastName"/ br

全名：span{{fullName}}/span

/div

const vm = new Vue({

    el:"#root",

    data:{

      firstName:'张',

      lastName:'三'

    }，

    computed:{

      //完整写法 计算属性是一个对象

      fullName:{

      get(){

        console.log('get被调用了')

        return this.firstName + '-' + this.lastName

      },

      set(value){

        console.log('set',value)

        const arr = value.split('-')

        this.firstName = arr[0]

        this.lastName = arr[1]

      }

      }

    },

    //简写 fullName 只考虑读取，不需要修改物历的时候简写

    fullName(){

        console.log('get被调用了')

        return this.firstName + '-' + this.lastName

      },

      }

    },

})

```

关于vue计算属性和vue计算属性缓存原理的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。