Vue学习笔记4：计算属性与侦听器

提辖鲁

已于 2022-06-08 20:22:05 修改

阅读量119

点赞数

CC 4.0 BY-SA版权

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

于 2022-02-08 19:57:25 首次发布

本文链接：https://blog.csdn.net/lj402159806/article/details/122830256

Web 同时被 2 个专栏收录

37 篇文章

订阅专栏

Vue.js

10 篇文章

订阅专栏

本文介绍了如何在Vue中使用计算属性进行数据处理，以及如何通过侦听器实现数据变化的实时监听。通过实例演示了计算属性的getter和setter，以及watch选项在数据监听中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算属性与侦听器

计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<div id="demo">{{ fullName }}</div>
<script>
    var vm1 = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        // 计算属性是基于它们的响应式依赖进行缓存，多次访问计算属性不会重新执行函数
        computed: {
            // 计算属性的getter
            reversedMessage: function () {
                // `this` 指向vm实例
                return this.message.split('').reverse().join('');
            }
        }
    });

    setTimeout(function () {
        // 当响应式依赖发生改变时计算属性才会重新求值
        vm1.message = 'World';
    }, 3000);

    var vm2 = new Vue({
        el: '#demo',
        data: {
            firstName: 'Hello',
            lastName: 'World'
        },
        computed: {
            // 计算属性默认只有getter，也可以提供setter
            fullName: {
                get: function () {
                    return this.firstName + ' ' + this.lastName;
                },
                set: function (newValue) {
                    var names = newValue.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[names.length - 1];
                }
            }
        }
    })

    setTimeout(function () {
        vm2.lastName = 'Vue';
    }, 1500);

    setTimeout(function () {
        // 调用setter
        vm2.fullName = 'Hi Vue';
    }, 3000);
</script>
</body>
</html>

在这里插入图片描述

侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侦听器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="watch-example">
    <p>{{message}}</p>
</div>
<script>
    var vm = new Vue({
        el: '#watch-example',
        data: {
            message: 'Hello World!'
        },
        // 使用watch选项定义`message`数据的监听器
        watch: {
            // `message`发生改变，则运行该函数
            message: function (newValue, oldValue) {
                alert('new value: ' + newValue +', old value: ' + oldValue);
            }
        }
    });

    setTimeout(function () {
        vm.message = 'Hello Vue!';
    }, 3000);
</script>
</body>
</html>

在这里插入图片描述