Vue学习笔记(三) 计算属性和侦听属性

news/2024/7/10 1:38:39 标签: Vue, 计算属性, 侦听属性

1、计算属性（computed）

（1）计算属性

模板的设计初衷是为了处理简单的逻辑（声明式逻辑），在模板中加入过多的逻辑会使模板难以阅读和维护

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>原始字符串：{{ message }}</p>
        <!-- 比如说，在模板中对 message 进行复杂的字符串反转操作 -->
        <p>反转字符串：{{ message.split('').reverse().join('') }}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello'
            }
        })
    </script>
</body>

</html>

这时，我们就应该考虑使用计算属性，以代替复杂的模板逻辑

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>原始字符串：{{ message }}</p>
        <!-- 在模板中直接使用计算属性 -->
        <p>反转字符串：{{ reversedMessage }}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello'
            },
            // computed 是 Vue 实例的计算属性
            // 它可以是一个对象，其中每一项的键是计算属性的名称，值是计算属性对应的函数
            computed: {
                // 这里，我们声明计算属性 reversedMessage，用于储存反转之后的字符串
                // 所提供的函数默认作为计算属性的 getter 函数（事实上还可以提供 setter 函数）
                // 这里的计算属性 reversedMessage 依赖于 message
                // 也就是说，当 message 发生变化时，reversedMessage 会自动更新
                reversedMessage: function () {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

</html>

（2）computed & methods

不知道大家还记不记得，我们在之前的文章中有一个例子，使用 methods 实现反转字符串的效果

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p>原始字符串：{{ message }}</p>
        <!-- 在模板中显示方法的返回结果 -->
        <p>反转字符串：{{ reversedMessage() }}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: "Hello Vue"
            },
            methods: {
                // 定义方法 reversedMessage()，返回反转之后的字符串
                reversedMessage: function () {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

</html>

可以看到，使用 computed 和 methods 实现的功能大体相同，但是它们的不同之处在于：

  1. computed 是 属性调用，而 methods 是方法调用
  2. computed 是 基于缓存，而 methods 不是

对于计算属性而言，计算结果将会被缓存，如果某个依赖在该实例范畴之外，那么计算属性是不会被更新的

但是对于方法而言，调用方法总会再次执行代码，我们可以从一个简单的例子看出它们之间的区别：

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <!-- 注意，这里是属性调用 -->
        <p>第一次调用 computed：{{ msg_in_computed }}</p>
        <p>第二次调用 computed：{{ msg_in_computed }}</p>
        <br/>
        <!-- 注意，这里是方法调用 -->
        <p>第一次调用 methods：{{ msg_in_methods() }}</p>
        <p>第二次调用 methods：{{ msg_in_methods() }}</p>
    </div>
    <script>
        var cnt_for_computed = 0;
        var cnt_for_methods = 0;
        var vm = new Vue({
            el: '#app',
            computed: {
                // 定义计算属性 msg_in_computed，多次调用不会更新数据
                // 因为它的依赖 cnt_for_computed 是非响应式属性，不在实例范畴之内
                msg_in_computed: function () {
                    cnt_for_computed += 1;
                    return cnt_for_computed
                }
            },
            methods: {
                // 定义方法 msg_in_methods()，每次调用总会执行代码
                msg_in_methods: function () {
                    cnt_for_methods += 1;
                    return cnt_for_methods
                }
            }
        })
    </script>
</body>

</html>

<!-- 输出结果
第一次调用 computed：1
第二次调用 computed：1


第一次调用 methods：1
第二次调用 methods：2
-->

（3）getter & setter

计算属性默认只有 getter 函数

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p>fullName: {{ fullName }}</p>
        <p>firstName: {{ firstName }}</p>
        <p>lastName: {{ lastName }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'Steve',
                lastName: 'Jobs'
            },
            computed: {
                // 若为计算属性提供一个函数，则该函数默认作为计算属性的 getter 函数
                fullName: function () {
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
        // 修改计算属性依赖的值时，会自动调用计算属性的 getter 函数
        vm.firstName = 'Stephen'
    </script>
</body>

</html>

<!-- 输出结果
fullName: Stephen Jobs
firstName: Stephen
lastName: Jobs
-->

但是，在需要的时候我们也可以提供一个 setter 函数

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p>fullName: {{ fullName }}</p>
        <p>firstName: {{ firstName }}</p>
        <p>lastName: {{ lastName }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'Steve',
                lastName: 'Jobs'
            },
            computed: {
                fullName: {
                    // getter 函数
                    get: function () {
                        return this.firstName + ' ' + this.lastName
                    },
                    // setter 函数
                    set: function (newValue) {
                        var names = newValue.split(' ')
                        this.firstName = names[0]
                        this.lastName = names[names.length - 1]
                    }
                }
            }
        })
        // 修改计算属性的值时，会自动调用计算属性的 setter 函数
        vm.fullName = 'Tim Cook'
    </script>
</body>

</html>

<!-- 输出结果
fullName: Tim Cook
firstName: Tim
lastName: Cook
-->

2、侦听属性（watch）

侦听属性是一个对象，键是需要观察的表达式，值是 对应的回调函数 或者是 包含选项的对象

  • 对应的回调函数
<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p>计数器: {{ counter }}</p>
        <button @click="counter++">点我</button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                counter: 1
            },
            watch: {
                // 当 counter 发生变化时，会自动调用其对应的回调函数打印一条信息
                counter: function(val, oldVal){
                    alert('计数器从 ' + val + ' 变为 ' + oldVal);
                }
            }
        });
    </script>
</body>

</html>
  • 包含选项的对象
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    },
    watch: {
        // 使用对象可以为监听属性添加更多的配置信息
        counter: {
            handler: function (val, oldVal) {
                alert('计数器从 ' + val + ' 变为 ' + oldVal);
            },
            deep: true, // 当监听对象的属性发生变化时（不管嵌套的深度），触发回调
            immediate: true // 在侦听开始之后，立即触发回调
        },
    }
});

http://www.niftyadmin.cn/n/1849890.html

相关文章

[计算机网络笔记06] 集线器和交换机的区别

[计算机网络笔记06] 集线器和交换机的区别

1.集线器和交换机 &#xff08;1&#xff09;早期的总线型以太网 &#xff08;2&#xff09;使用双绞线和集线器HUB的星型以太网 &#xff08;3&#xff09;在物理层扩展以太网 &#xff08;4&#xff09;以太网交换机 主机通过集线器发送单播帧&#xff0c;集线器上的每个…
阅读更多...
Vue学习笔记(四) 条件渲染和列表渲染

Vue学习笔记(四) 条件渲染和列表渲染

1、条件渲染 &#xff08;1&#xff09;v-if v-if 指令 用于条件性&#xff08;根据表达式的值&#xff09;渲染内容&#xff0c;可以与 v-else 指令 和 v-else-if 指令 一同使用 <!DOCTYPE html> <html><head><title>Demo</title><script…
阅读更多...
[计算机网络笔记07] 交换机的自学习算法

[计算机网络笔记07] 交换机的自学习算法

1.交换机的转发原理 2.交换机的自学习算法 &#xff08;1&#xff09;A到B 帧由主机A出发到接口1&#xff0c;交换机在帧交换表中登记&#xff0c;之后查询目的MAC地址&#xff0c;找不到&#xff0c;于是从其他接口转发出去&#xff0c;最后通过3接口找到主机B。其他的主机都…
阅读更多...
[计算机网络笔记08] 交换机的生成树协议STP—功能介绍

[计算机网络笔记08] 交换机的生成树协议STP—功能介绍

1.交换机的生成树协议 &#xff08;1&#xff09;如何提高网络的可靠性 这样的链路&#xff0c;一旦链路出现故障&#xff0c;各交换机之间就无法通信。 为了解决这个问题&#xff0c;我们添加了冗余链路&#xff0c;当其中一条链路发送故障时&#xff0c;其他链路可以通信。…
阅读更多...
Vue学习笔记(六) 表单输入绑定

Vue学习笔记(六) 表单输入绑定

v-model 指令在表单元素上创建双向数据绑定&#xff0c;它负责用于监听用户输入事件以更新数据 注意&#xff0c;v-model 会忽略所有表单元素特性的初始值&#xff0c;而总是将 Vue 实例的数据作为数据来源 1、输入框 <!DOCTYPE html> <html><head><ti…
阅读更多...
[计算机网络笔记09] 交换机的生成树协议STP—工作原理

[计算机网络笔记09] 交换机的生成树协议STP—工作原理

1.生成树协议STP 2.生成树算法—选举根交换机 &#xff08;1&#xff09;这里所有交换机的优先级相同&#xff0c;因此比较MAC地址&#xff0c;MAC地址最小的为A交换机&#xff0c;因此根交换机为A。 3.生成树算法—选举根端口 &#xff08;1&#xff09;A—>B为4&#…
阅读更多...
Vue学习笔记(五) 样式绑定和事件处理

Vue学习笔记(五) 样式绑定和事件处理

1、样式绑定 class 和 style 属性都可以控制元素的显示样式&#xff0c;我们可以使用 v-bind 指令对它们进行绑定 &#xff08;1&#xff09;绑定 class 对象语法 我们可以将一个对象传给 v-bind:class&#xff0c;它将根据传入对象的值动态切换 class <!DOCTYPE html&…
阅读更多...
[计算机网络笔记10] 虚拟局域网VLAN

[计算机网络笔记10] 虚拟局域网VLAN

1.广播域 &#xff08;1&#xff09;扩展以太网的同时也扩大了广播域 &#xff08;2&#xff09;网络中会频繁出现广播信息 发送广播帧时&#xff0c;全网的主机都会收到。 &#xff08;3&#xff09;如何分割广播域 2.虚拟局域网VLAN &#xff08;1&#xff09;虚拟局…
阅读更多...
最新文章

Copyright @ 2022~2023