vue中计算属性computed理解说明包括vue侦听器,缓存与computed的区别

一、计算属性(computed)

1、vue computed 说明

当一些数据需要根据其它数据变化时,需要进行处理才能去展示,虽然vue提供了绑定数据表达式绑定的方式,但是设计它的初衷只是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,对于一些比较复杂和特殊的计算有可能就捉襟见肘了,而且计算的属性写在模板里也不利于项目维护

computed主要的作用:

分离逻辑(模板和数据分离)

缓存值

双向绑定(getter,setter)

2、语法格式

格式

computed:{ [key: string]: Function | { get: Function, set: Function } }

参数说明:

key:字符串类型

值:可以是一个方法,如果是方法默认是get操作,也可以是对象 ,设置get属性或者set属性

3、基础用法

说明

在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,最终返回一个结果,

计算属性还可以依赖多个Vue 实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新,适用于比较费时的数据计算

示例代码

<div id="app">
    <!--使用表达式的方式-->
    <p v-text="originalPrice - discountPrice"></p>
    <!--使用计算属性的方式-->
    <p v-text="currentPrice"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
             id:1,
            originalPrice:1200,
            discountPrice:200,
        },
        //计算属性
        computed: {
            // 把日期换成 常见规格格式的字符串。
            currentPrice: function () {
                return "当前价格:" + (this.originalPrice - this.discountPrice);
            }
        }
    });

4、setter与getter

说明

每一个计算属性都包含一个getter 和一个setter,上面的示例都是计算属性的默认用法, 只是利用了getter来读取

如果需要,也可以提供一个setter 函数, 当修改计算属性的值就像修改一个普通数据那样时,就会触发setter 函数

示例代码

<div id="app1">
    <p v-text="currentPrice"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            id: 1,
            originalPrice: 1200,
            discountPrice: 200,
        },
        //计算属性
        computed: {
             cache:false,
            // 把日期换成 常见规格格式的字符串。
            currentPrice: {
                get: function () {
                    return "当前价格:" + (this.originalPrice - this.discountPrice);
                },
                // 注意必须要传递参数,否则没有意义
                set: function (value) {
                    //执行自定义的一下操作
                    this.discountPrice = value
                }
            }
        }
    });
</script>
<!--
在 console 中 输入 app.currentPrice=300
1> 先执行get方法改变discountPrice的值
2> 因为数据发生改变了 所以会重新计算当前的价格, 执行get方法
-->

注意

绝大多数情况下,我们只会用默认的getter方法来读取一个计算属性,在业务中很少用到setter,所以在声明一个计算属性时,可以直接使用默认的写法

5、缓存

说明

计算属性基于它们的依赖进行缓存的,只有相关依赖发生改变的时候才会重新求值,一般为响应式依赖

什么是响应式依赖,Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应

示例代码

<!-- 响应式依赖 -->
<script>
    var vm = new Vue({
      data: {
        // 声明 message 为一个空值字符串
        message: ''
      },
    })
    // 响应式
    vm.message = 'Hello!'

    vm.v="非响应式的的值"
</script>
<div id="app">
    <button @click="getMethodsDate">methods</button>
    <button @click="getComputedDate">computed带缓存</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        methods: {
            getMethodsDate: function () {
                console.log(new Date().toLocaleTimeString())
            },
            // 返回computed选项中设置的计算属性——computedDate
            getComputedDate: function () {
                console.log("缓存--->" + this.computedDate)
            }
        },
        computed: {
            computedDate: function () {
                return new Date().toLocaleTimeString()
            }
        }
    })
</script>

6、与methods的区别

computed 只有符合:存在依赖型数据,依赖型数据发生改变这两个条件,computed才会重新计算。而methods下的数据,是每次都会进行计算的

调用方式不一样,computed定义的成员像属性一样访问,而methods定义的成员必须以函数形式调用。

computed是带缓存的,只有其引用的响应式属性发生改变时才会重新计算,而methods里的函数在每次调用时都要执行。

五、侦听器(watch)

1、说明

官方:当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的,watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态

watch和我们前面介绍的methods相同的语法,但是有一个关键的区别。虽然嵌套属性的值确实是函数,但键的名称必须对应数据属性中的名称

2、语法格式

watch:{
[key: string]: string | Function | Object }]

3、语法说明

key:必须是Vue对象data中定义的属性

值:值可以是一个字符串,这个字符串是方法名;值可以是一个函数;值也可以是一个对象,其中包含回调函数可以其他选项:比如是否深度遍历。

4、基础使用

示例代码

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    let vm = new Vue({
        data: {
            test: "111",
            user: {
                name: "码帝",
                address: {
                    city: "大武汉"
                }
            }
        },
        methods: {
            fun: function (val) {
                alert(val)
            }
        },
        watch: {
            // 方法名方式 对应 methods中的函数名
            // test: 'fun',
            // 函数方式
            test: function (v1, v2) {
                alert("新值" + v1 + "====旧值:" + v2)
            },
            /**
             *什么是深度 例如  data: {test: "111", user: {name: "码帝" ,address{city:'大武汉'}}
             * user属性对应值就是深层,一次内推
             * 如果我们监听的user属性 当user.name属性发生改变的时候 watch监听是不到,所有我们这里需要使用深层监听
             */
            //
            user: {
                handler: function (val) {
                    alert(val.name)
                },
                // 是否深度监听 默认是false
                // 如果不设置为true当我们手动设置vm.user.name = "撸帝"的时候,是监听不到的
                deep: true
            },
            /**
             * 或者也可以使用下面的方式来监听
             * 注意键值必须是一个字符串,所以用引号括起来
             *
             */

            "user.address.city": function (val) {
                alert(val)
            }
        }
    });
    vm.test = '333';
    vm.user.name = "撸帝";
    vm.user.address.city = '长沙'
<div id="app">
    <input type="text" v-model="search"/>
    <ul>
        <li v-for="result in results" v-text="result"></li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            user:{
                name:"码帝",
            }
            search: "",
            results: [],

        },
        methods: {
          fun: function () {
            alert("111");
          }
        }
        watch: {
         // 使用函数
            search: function (v1, v2) {
             console.log('新值: %s, 旧值: %s', v1, v2)
                this.results.push(v1)
            }
        }

    })
</script>

5、与computed的区别

触发条件不同

computed计算属性会依赖于使用它的data属性,只要是依赖的data属性值有变动,则自定义重新调用计算属性执行一次。

watch则是在监控的data属性值发生变动时,其会自动调用watch回调函数。

应用场景不同

执行异步操作,开销较大的操作,避免堵塞主线程,使用watch。

简单且串行返回的,使用computed

更多关于VUE计算属性computed的相关文章请查看下面的相关链接

(0)

相关推荐

  • vue.js的computed,filter,get,set的用法及区别详解

    1.vue.js的computed方法: 处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值.用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods. 实例1:computed和methods实现翻转字符串 <template> <div> <input v-model="message"> <p>原始字符串: {{ messa

  • Vue的watch和computed方法的使用及区别介绍

    Vue的watch属性 Vue的watch属性可以用来监听data属性中数据的变化 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="lib/vue.min.js"></script> <script src="lib/vue-router-3

  • vue 解决computed修改data数据的问题

    最近在做项目的时候遇见一个问题,computed修改data数据的时候会报错.报错的大概意思是,不可以修改data数据的属性值.查了一些答案,最终解决办法是需要用到set和get.看代码: data () { return { fold: false } } 我想修改fold的值,如果不用get和set就会报错!!! computed:{ listShow: { get: function () { if (!this.totalCount) { return false } return th

  • Vue.js中的computed工作原理

    JS属性: JavaScript有一个特性是 Object.defineProperty ,它能做很多事,但我在这篇文章只专注于这个方法中的一个: var person = {}; Object.defineProperty (person, 'age', { get: function () { console.log ("Getting the age"); return 25; } }); console.log ("The age is ", person.

  • Vue 2.0学习笔记之Vue中的computed属性

    Vue中的 computed 属性称为 计算属性 .在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算.也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护.咱们先来看一个示例: <div id="app"> <h1>{{ message.split('').reverse().join('') }}

  • Vue 中 filter 与 computed 的区别与用法解析

    watch与computed.filter: watch:监控已有属性,一旦属性发生了改变就去自动调用对应的方法 computed:监控已有的属性,一旦属性的依赖发生了改变,就去自动调用对应的方法 filter:js中为我们提供的一个方法,用来帮助我们对数据进行筛选 watch与computed的区别: 1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性 2.watch不会缓存数据,每次打开页面都会重新加载一次, 但是computed如果之前进行过计算他会将计算的结果

  • Vue.js第三天学习笔记(计算属性computed)

    今天给大家分享下vue.js中的计算属性(computed) 示例一 computed的get属性 html: <template> <div class="input-text"> <input type="text" v-model='firstName'> <input type="text" v-model='lastName'> {{fullName}} </div> <

  • 浅谈vue的props,data,computed变化对组件更新的影响

    本文介绍了vue的props,data,computed变化对组件更新的影响,分享给大家,废话不多说,直接上代码 /** this is Parent.vue */ <template> <div> <div>{{'parent data : ' + parentData}}</div> <div>{{'parent to children1 props : ' + parentToChildren1Props}}</div> <

  • vue计算属性computed的使用方法示例

    本文实例讲述了vue计算属性computed的使用方法.分享给大家供大家参考,具体如下: computed:{ b:function(){ //默认调用get return 值 } } computed:{ b:{ get: set: } } * computed里面可以放置一些业务逻辑代码,一定记得return <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&

  • Vue——解决报错 Computed property "****" was assigned to but it has no setter.

    在最近的项目中遇到了如下的警告信息: [Vue warn]: Computed property " currentStep" was assigned to but it has no setter.(意思是:计算属性 currentStep被赋值了,但此它并未定义 set方法 .) 要解决这个问题,首先要明确这个问题出现的原因.这个警告是由于Vue的计算属性内部没有set方法,即:计算属性不支持值得修改(只能针对data中的值进行计算). data(){     return {

  • Vue中计算属性computed的示例解读

    计算属性 表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护,所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理,同时computed有缓存功能,防止复杂计算逻辑多次调用引起的性能问题. computed原理 computed的属性reversedMessage在data中会有一个对我们不可见的cacheReversedMessage属性对应 cacheReversedMessage的值是根据其绑定的data中的message来决定的

  • Vue.js每天必学之计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用**计算属性**. 基础例子 <div id="example"> a={{ a }}, b={{ b }} </div> var vm = new Vue({ el: '#example', data: { a: 1 }, comp

  • Vue computed计算属性的使用方法

    computed computed:相当于method,返回function内return的值赋值在html的DOM上.但是多个{{}}使用了computed,computed内的function也只执行一次.仅当function内涉及到Vue实例绑定的data的值的改变,function才会从新执行,并修改DOM上的内容. computed和method的对比 <div id="example"> {{ message.split('').reverse().join('

  • vue2.0 computed 计算list循环后累加值的实例

    实例如下所示: <template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Foo</h2> <div v-for ="(item, index) in list"> <!--<p>{{item }}</p>--> <h1 v-show="false">{{a[inde

  • vue计算属性computed、事件、监听器watch的使用讲解

    一.计算属性(computed) <template> <div class="box"> <h1>计算属性</h1> <hr> <!-- 直接渲染得到数据 --> <p><input type="text" v-model="message"></p> <!-- 对data的数据进行简单的操作 这样有一个不好的地方就是后期对页面数据

  • Vue中computed与methods的区别详解

    Vue中computed可以用来简单的拼接需要展示的数据 computed and methods 拼接展示数据的任务, 也可以用methods完成, 但当页面的数据变化时, methods中的方法会被重新调用(产生不必要的性能消耗), 而methods内的方法只有和自身有关的数据变化时才会被调用 一个简单的实例 computed只在初始化时被调用 computed只在初始化时被调用 methods会在数据变化时被调用, 即使变动的数据与自身无关 测试源码 <!DOCTYPE html> &l

  • 详解vue中的computed的this指向问题

    今天在写vue项目时,用到了computed计算属性,遇到了使用箭头函数出现this指向问题,这里记录下 1.箭头函数中的this 箭头函数内部的this是词法作用域,由上下文确定 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象 2.vue中的computed 使用箭头函数 list: () => { console.log(this) } 不使用箭头函数 allFigure: function() { console.log(this) }, 使用get() allFig

  • 详解vue中computed 和 watch的异同

    一.computed 和 watch 都可以观察页面的数据变化.当处理页面的数据变化时,我们有时候很容易滥用watch. 而通常更好的办法是使用computed属性,而不是命令是的watch回调. 这里我直接引用vue官网的例子来说明: html: 我们要实现 第三个表单的值 是第一个和第二个的拼接,并且在前俩表单数值变化时,第三个表单数值也在变化 <div id="myDiv"> <input type="text" v-model="

随机推荐