【5.0】Vue之计算属性和监听属性

【一】计算属性

[1]计算属性是通过依赖变量进行缓存的，这意味着计算属性会保存最近一次计算的结果，并且只有在相关的依赖变量发生改变时才会重新计算。
[2]计算属性只有在其相关依赖变量发生改变时才会重新求值，这也是它与普通函数的一个主要区别。
- 与函数不同的是，计算属性只在需要的时候才进行计算，而不是每次调用都执行。
- 这样可以提高性能并减少不必要的计算。
[3]类似于Python中的property，计算属性可以将一个方法或函数伪装成属性。
- 这意味着通过调用计算属性的方式来获取值，而不是显式调用一个方法或函数。
- 这使得代码更简洁、易读，并且可以隐藏底层实现的复杂性。
[4]计算属性必须有返回值，因为它们被设计用于获取某些值。
- 当计算属性被访问时，它会执行相应的计算逻辑并返回计算结果。
- 没有返回值的计算属性没有意义，因为它不能提供需要的值。
[5]总结：
- 计算属性是通过缓存依赖变量的结果，在相关依赖变量发生改变时才重新计算，并且可以将方法/函数伪装成属性。
- 计算属性必须有返回值，以提供需要的值。

<body>
<div id="app">

    <h1>实现输入 input 名字首字母大写</h1>
    <input type="text" v-model="username">
    username ----> {{username.substring(0, 1).toUpperCase() + username.substring(1)}}
    <br>
    <input type="text" v-model="username1">
    username1--->{{getUpperCase()}}
    <br>
    <input type="text" v-model="age">
    age---->{{age}}

    <h2>计算属性实现---> 当做属性使用</h2>
    <input type="text" v-model="username2">
    username2--->{{getName}}
    <br>


</div>
</body>

<script>
    var vm = new Vue({
            el: '#app',
            data: {
                username: '',
                username1: '',
                username2: '',
                age: '',
            },
            methods: {
                getUpperCase() {
                    console.log('函数执行我执行了')
                    return this.username1.substring(0, 1).toUpperCase() + this.username1.substring(1)
                }
            },
            // 计算属性
            computed: {
                getName() {
                    console.log('计算属性执行了')
                    return this.username2.substring(0, 1).toUpperCase() + this.username2.substring(1)
                }
            }
        }
    )


</script>

案例之计算属性重写购物车

<body>
<div id="app">

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1 class="text-center">购物车</h1>
                <hr>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th class="text-center">商品ID</th>
                        <th class="text-center">商品名称</th>
                        <th class="text-center">商品库存</th>
                        <th class="text-center">商品价格</th>
                        <th class="text-center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in good_list">
                        <th scope="row" class="text-center">{{good.id}}</th>
                        <td class="text-center">{{good.name}}</td>
                        <td class="text-center">{{good.stock}}</td>
                        <td class="text-center">{{good.price}}</td>
                        <td class="text-center"><input type="checkbox" :value="good" v-model="check_group"></td>
                    </tr>
                    </tbody>
                </table>
                <hr>
                <h3>选中商品::{{check_group}}</h3>
                <h3>总价格::{{sumPrice}}</h3>
                <h3>选中了checkbox，check_group会发生变化，页面也在变，都会重新刷新页面，函数就会重新执行</h3>
            </div>
        </div>
    </div>


</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            good_list: [
                {'id': 1, 'name': '小汽车', 'stock': 3, 'price': 66666},
                {'id': 2, 'name': '小飞机', 'stock': 5, 'price': 55555},
                {'id': 3, 'name': '小火车', 'stock': 78, 'price': 88888},
                {'id': 4, 'name': '小游轮', 'stock': 976, 'price': 77777},
                {'id': 5, 'name': '小潜艇', 'stock': 786, 'price': 33333},
                {'id': 6, 'name': '小导弹', 'stock': 56, 'price': 22222},
                {'id': 7, 'name': '小趴菜', 'stock': 36, 'price': 999999},
            ],
            check_group: []
        },
        methods: {},
        computed: {
            sumPrice() {
                // 计算总价格  根据 check_group 内的数据
                // check_group 循环取出价格和数量
                var total = 0;
                for (item of this.check_group) {
                    total += item.stock * item.price
                }
                return total
            }
        }
    })
</script>

计算属性之重写过滤案例

<body>
<div id="app">
    <h1>过滤案例</h1>
    <input type="text" v-model="search" @input="inputFunc"> {{search}}
    <br>
    <ul class="list-unstyled">
        <li v-for="item in new_datalist">{{item}}</li>
    </ul>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            search: '',
            datalist: ['a', 'ab', 'cb', 'ww', '5e', '7k7k'],
        },
        methods: {
            // 三次优化  --- 箭头函数
            inputFunc() {
                this.new_datalist = this.datalist.filter(item => item.indexOf(this.search) >= 0)
            }

        },
        computed: {
            new_datalist() {
                return this.datalist.filter(item => item.indexOf(this.search) >= 0)
            }
        },
    })
</script>

【二】监听属性

【1】详解

在Vue.js中，watch是一种属性，用于监听数据的变化并触发相应的回调函数。
通过watch属性，我们可以监控一个数据的变化，并在数据发生变化时执行一些特定的操作。
- watch属性的使用方式有两种：
- 对象语法和数组语法。

（1）对象语法：

在Vue实例的watch属性中，我们可以以键值对的形式定义需要监听的数据和相应的处理函数。
当被监听的数据发生变化时，Vue会自动调用对应的处理函数。
例如：

watch: {
  // 监听firstName属性变化
  firstName: function (newVal, oldVal) {
    // 在这里执行相关的操作
  },
  
  // 监听lastName属性变化
  lastName: function (newVal, oldVal) {
    // 在这里执行相关的操作
  }
}

上述例子中，watch属性包含两个键值对，分别监听了firstName和lastName属性的变化。
当firstName或lastName属性发生变化时，相应的处理函数将被自动调用。

（2）数组语法：

watch属性还支持数组语法，用于监听多个数据的变化。
当其中任意一个被监听的数据发生变化时，Vue会执行对应的处理函数。
例如：

watch: {
  ['firstName', 'lastName']: function (newVal, oldVal) {
    // 在这里执行相关的操作
  }
}

上述例子中，watch属性以数组形式包含了firstName和lastName两个被监听的属性。
当其中任意一个属性发生变化时，处理函数将被自动调用。

（3）小结

无论是对象语法还是数组语法，处理函数都接收两个参数：新值（newVal）和旧值（oldVal）。
我们可以在处理函数中访问这两个值，并根据需要执行相应的操作。
通过使用watch属性，我们可以轻松地监听Vue实例中数据的变化，从而执行一些特定的操作，例如发送请求、更新页面内容等。

【2】示例

<body>
<div id="app">
    <h1>监听属性</h1>
    <input type="text" v-model="username"> ------> {{username}}
</div>
</body>

<script>
    var vm = new Vue({
            el: '#app',
            data: {
                username: '',

            },
            methods: {},
            // 计算属性
            computed: {},
            // 监听属性
            watch: {
                // 无返回值，当 username 发生变化就会被触发
                username(newValue, oldValue) {
                    console.log("旧值", oldValue)
                    console.log('新值', newValue)
                    console.log("监听到 username 发生了变化")
                }
            },
        }
    )
</script>

posted @ 2023-08-06 22:28 Chimengmeng 阅读(71) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dream-Z

Hope Your Life Is Worth It !

【5.0】Vue之计算属性和监听属性

【一】计算属性

【二】监听属性

【1】详解

（1）对象语法：

（2）数组语法：

（3）小结

【2】示例

公告