美文网首页
Vue的计算属性和监听属性

Vue的计算属性和监听属性

作者: 暖A暖 | 来源:发表于2020-11-23 10:34 被阅读0次

    Vue 中的计算属性

    使用计算属性(computed)有一个好处在于它有一个缓存机制,因此它不需要每次都重新计算。当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的 DOM 部分也会同步自动更新。在处理一些复杂逻辑时计算属性是很有用的。

    在 Vue 中我们可以使用模板语法 {{}} 来展示一些数据,而当在模板中放入太多的逻辑会让模板过重且难以维护。这种情况下,Vue 给我们提供了一个特别好的解决方法,就是使用计算属性。我们可以将一些需要计算的过程写入到一个计算属性中去,然后让它动态的计算就可以了。

    示例:

    下面我们通过一个例子来看一下计算属性的使用,下面是一个用于求和的小例子:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue的属性_侠课岛(9xkd.com)</title>
    <script src="./src/vue.min.js"></script>
    </head>
    <body>
        <h1>创建第一个Vue应用</h1>
        <div id="app">
            <!-- 大侠是只喵喵 -->
            <p>大侠的体重为:{{a}}千克</p>
            <p>水星仔的体重为:{{b}}千克</p>
            <p>小师妹的体重为: {{c}} 千克</p>
            <p>它们的体重之和为:{{a + b + c}}千克</p>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data() {
                    return{
                        a:10,
                        b:65,
                        c:44
                    }
                }
            })
        </script>
    </body>
    </html>
    

    此时我们要对数据求和,是不是需要在模板中将 a、b、c 等属性都加起来,例如上述的 {{a + b + c}},这样会很不方便,且会让模板过重且难以维护。

    但是如果我们使用计算属性,如下所示:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue的属性_侠课岛(9xkd.com)</title>
    <script src="./src/vue.min.js"></script>
    </head>
    <body>
        <h1>创建第一个Vue应用</h1>
        <div id="app">
            <!-- 大侠是只喵喵 -->
            <p>大侠的体重为:{{a}}千克</p>
            <p>水星仔的体重为:{{b}}千克</p>
            <p>小师妹的体重为: {{c}} 千克</p>
            <p>它们的体重之和为:{{sum}}千克</p>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data() {
                    return{
                        a:10,
                        b:65,
                        c:44
                    }
                },
                computed:{
                    // sum就是计算属性
                    sum:function(){
                        return this.a + this.b + this.c
                    }
                }
            })
        </script>
    </body>
    </html>
    

    这样在 computed 中定义一个计算属性 sum 后,就不用在模板中进行复杂的计算了。效果图如下所示:

    Vue中的监听属性

    监听属性(watch)可以监听一个函数或者是一个变量,通过 watch 来响应数据的变化。虽然大多数情况计算属性都可以满足需要,但有时还是需要使用侦听器。当需要在数据发生变化时执行异步操作或者开销较大的操作时,就需要自定义监听器。

    示例:

    例如我们想实现一个计数器,我们可以通过 watch 来响应数据的变化:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue的属性、方法和生命周期_侠课岛(9xkd.com)</title>
    <script src="./src/vue.min.js"></script>
    </head>
    <body>
        <h1>计数器的实现</h1>
        <div id="app">
            <p>计算器:{{num}}</p>
            <button @click="num++">点我加一</button>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data() {
                    return{
                        num: 1
                    }
                }
            })
            // 监听器
            app.$watch('num', function(navl, oval){
                alert("计数器的值从 " + oval + "变为" + navl);
            });
        </script>
    </body>
    </html>
    

    watch 这个对象里面是一个函数,函数的名称是 data 中的属性名称(即num),且 watch 中的函数不需要调用。

    当属性 num 发生改变,就会触发 watch 函数(num 所对应的函数),每个函数都会接受两个值,一个是新值(navl),一个是旧值(oval)。

    我们来看代码在浏览器中的演示效果:


    当我们点击 点我加一 按钮时,会弹出上图中的弹出层,告诉我们“计数器的值从 1 变为 2”,然后我们点击弹出层的 “确认” 按钮,计数器显示会变成 2。

    相关文章

      网友评论

          本文标题:Vue的计算属性和监听属性

          本文链接:https://www.haomeiwen.com/subject/yyumiktx.html