Vue的计算属性和监听器

最新推荐文章于 2022-11-03 11:48:21 发布

chengqiuming

最新推荐文章于 2022-11-03 11:48:21 发布

阅读量186

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/chengqiuming/article/details/102749508

版权

Vue 专栏收录该内容

161 篇文章 16 订阅

订阅专栏

一点睛

1 什么是计算属性

计算属性的重点突出在属性两个字上，首先它是个属性（属性是名词），其次这个属性有计算（计算是动词）的能力，这里的计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成静态的属性）。

一些常用的函数，可以缓存起来，在调用时直接使用缓存中的结果，以此来提高效率。

注意：computed里虽然存放的是函数。但在调用时，computed里的东西是一个属性。所以我们在调用时不能使用()，因为()是在调用函数，而不是在调用属性。

2 watch的用法

watch用于监控参数的变化，并调用函数，newVal是能获得参数新的值，oldVal是参数来的值。

在 watch 中给属性（普通属性或计算属性）绑定函数，当属性的值发生变化时，该函数就会自动被调用。调用时可以接收两个参数，第一个参数是属性改变后的值，第二个参数是属性改变前的值。

二代码

<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <meta charset="utf-8">
    <title>计算属性与监听器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>    
</head>
<body>
    <!-- 挂载点 -->
    <div id="root">
        <div>姓：<input v-model="firstname"></input></div>
        <div>名：<input v-model="lastname"></input></div>
        <div>{{fullname}}</div>
        <div>{{count}}</div>
    </div>
    
    <script type="text/javascript">
        // 实例
        new Vue({
            el: "#root",
            data: {
                firstname: "",
                lastname: "",
                count: 0,
            },
            // 定义计算属性
            computed: { // 依赖属性发生变化才会重新计算，当firstname或lastname发送变化时才重新计算computed
                fullname: function(){
                    return this.firstname+" "+this.lastname
                }
            },
            // 定义一个监听器，当某个数据发生变化，触发监听器函数执行
            watch: {
                // firstname: function(){
                //  this.count++
                // },
                // lastname: function(){
                //  this.count++
                // }
                fullname: function(){ // 可以监听计算属性的变化，当fullname发送变化时，触发函数执行
                    this.count++
                }
            }
        })
    </script>
</body>
</html>

三效果

chengqiuming

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的计算属性和监听器

一代码<!DOCTYPE html><html lang="en"><html><head> <meta charset="utf-8"> <title>计算属性与监听器</title> <script src="https://cdn.jsdelivr.net/npm/...
复制链接

扫一扫