vue的计算属性computed与监听属性watch

最新推荐文章于 2024-03-19 09:14:48 发布

Z_BK9

最新推荐文章于 2024-03-19 09:14:48 发布

阅读量2.3k

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Z_BK9/article/details/126417275

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、计算属性computed

computed是计算属性，也就是计算值，多用于计算值的场景
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值才会重新调用对应的getter来计算。也就是说，只有依赖数据发生改变时，才会重新进行计算
如果一个属性是由其他属性计算而来，这个属性依赖其他属性，一般用computed
如果computed属性值是函数，那么默认会走get方法，函数的返回值就是属性的属性值，在computed中，属性都有一个get和set方法，当数据变化时调用set方法
computed适用于计算比较消耗性能的计算场景
可以当属性直接使用

<body>
    <script src="js/vue.js"></script>
    <div id="app">
        <input type="text" v-model="num1" />+
        <input type="text" v-model="num2" />=
        <input type="text" v-model="sum">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                num1: 0,
                num2: 0
            },
            computed:{
                sum(){
                    let num3 = parseInt(this.num1)+parseInt(this.num2);
                    return num3;//必须有return
                }

            }
        })
    </script>
</body>
</html>

<body>
    <script src="js/vue.js"></script>
    <div id="app">
        <input type="text" v-model="num1" />+
        <input type="text" v-model="num2" />=
        <input type="text" v-model="sum">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                num1: 0,
                num2: 0
            },
            /* 计算属性
          get:会在获取属性值的时候调用，当依赖的属性发生变化的时候，会调用 getter
          set：会在设置属性值的时候调用，当sum发生改变的时候，会调用setter,
          setter中如果引起num1或者num2发生变化，会再次调用getter
          */
            computed: {
                sum: {
                    get: function () {
                        let num3 = parseInt(this.num1) + parseInt(this.num2);
                        return num3; //必须有return
                    },
                    set: function (newValue) {
                        console.log(newValue)
                        //this.num2 = newValue-this.num1;

                    }
                }

            }
        })
    </script>
</body>
</html>

示例

<script src="js/vue.js"></script>
<body>
    <div id="app">
        <h2>总价：{{totalPrice}}</h2>
    </div>  
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                // 计算下面这些书籍的总价
                books:[
                    {id: 101,name: 'Uinx编程技术',price: 108},
                    {id: 102,name: '代码大全',price: 99},
                    {id: 103,name: '深入理解计算机原理',price: 70},
                    {id: 104,name: '现代操作系统',price: 58},
                ]

            },
            // 计算属性，不同于方法，其类似于变量
            computed: {
                // 在定义计算属性时，一般不加动词get等，命名方式类似变量，在模板中也同变量一样使用
                totalPrice: function(){
                    let result = 0;
                    for (i = 0; i < this.books.length; i++){
                        result += this.books[i].price;
                    }
                    return result;
                }

            }
        })
    </script>
</body>

</html>

二、watch监听属性

watch是一个侦听的动作，用来观察和响应Vue实例上的数据变动

更多的是"观察"的作用，类似于某些数据的监听回调，用于观察props、$emit或者本组件的值，当数据来回变化时来执行回调进行后续操作
无缓存性，页面重新渲染时值不变化也会执行
watch支持异步
监听的函数接收两个函数，第一个参数是新值，第二个参数是旧值
当一个属性发生变化时，需要执行对应的操作

应用场景
根据tab的切换，不管在哪个页面修改了数据，点击切换的时候要提示未保存，是否确认离开。这里就用到侦听器了，监听数据的变化
数据变化时执行异步或开销较大的数据：
验证用户名是否可用：需求：输入框中输入姓名，失去焦点时验证是否存在，如果已经存在，提示重新输入，如果不存在，提示可以使用

<body>
    <script src="js/vue.js"></script>
    <div id="app">
        <div>
            <span>名：</span>
            <span>
              <input type="text" v-model="firstName">
            </span>
          </div>
          <div>
            <span>姓：</span>
            <span>
              <input type="text" v-model="lastName">
            </span>
          </div>
          <div>{{fullName}}</div>  
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: 'hello',
                lastName: 'vue',
                fullName: 'hello vue'
            },
            computed: {
              // fullName: function(){
              //   return this.fullName = this.firstName + ' ' + this.lastName;
              // }
            },
            watch: {
                firstName(newval, oldval) {
                    //可以得到变化前后的值
                    console.log(newval,oldval);
                    this.fullName = newval + ' '+ this.lastName;
                },
                lastName(newval, oldval) {
                     //可以得到变化前后的值
                    console.log(newval,oldval);
                    this.fullName = this.firstName + ' '+ newval;
                }
            }
        })
    </script>
</body>

</html>

三、computed计算属性和watch监听属性的区别

computed计算属性	watch监听属性
get函数中必须要有return	watch中的函数return可有可无
computed 计算属性名称可以自定义	watch中的名称必须和data中的名称一致
computed 计算属性具备缓存	watch不具备缓存
computed 计算属性适合处理一些复杂的数据运算	watch适合处理一些消耗性能的需求，比如：Ajax请求等等

当要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed
如果需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

Z_BK9

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue的计算属性computed与监听属性watch

根据tab的切换，不管在哪个页面修改了数据，点击切换的时候要提示未保存，是否确认离开。这里就用到侦听器了，监听数据的变化。验证是否存在，如果已经存在，提示重新输入，如果不存在，提示可以使用。如果一个属性是由其他属性计算而来，这个属性依赖其他属性，一般用。执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取。更多的是"观察"的作用，类似于某些数据的监听回调，用于观察。监听的函数接收两个函数，第一个参数是新值，第二个参数是旧值。方法，函数的返回值就是属性的属性值，在。，也就是计算值，多用于计算值的场景。.
复制链接

扫一扫