Vue基础 - 计算属性与监听属性

原创 已于 2022-07-04 16:47:33 修改 · 526 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端

于 2021-12-06 11:42:01 首次发布

计算属性(computed)

定义

要用的属性不存在，要通过已有属性计算得来

原理

底层借助了Object.defineproperty方法提供的getter和setter

执行时机

  • 初次读取时会执行一次
  • 当依赖的数据发生改变时会被再次调用

优势

与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

备注

  • 计算属性最终会出现在vm上，直接读取使用即可
  • 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时以来的数据发生变化
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计算属性(computed)</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        全名：<span>{{fullName}}</span>
    </div>
</body>

<script>
    Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '半夏',
            lastName: '天南星'
        },
        computed: {
            fullName: {
                // get的作用：当fullName被读取时，get就会被调用，且返回值就作为fullName的值
                // get什么时候调用：1、初次读取fullName时，2、所依赖的数据发生变化时
                get() {
                    // 此处this是vm
                    return this.firstName + '-' + this.lastName
                },
                // set什么时候调用?当fullName被修改时
                set(value) {
                    const arr = value.split('-');
                    this.firstName = arr[0];
                    this.lastName = arr[1];
                }
            }
        }
    })
</script>

</html>

计算属性简写

computed: {
    fullName: function() {
        return this.firstName + '-' + this.lastName
    }
}

监听属性(watch)

基本使用

  1. 当被监视的属性发生变化时，回调函数自动调用，进行相关操作
  2. 监视的属性必须存在，才能进行监视
  3. 监视的两种写法：
    • new Vue时传入watch配置
    • 通过vm.$watch监视
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>监听属性</title>
        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
        <script src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h3>今天天气很{{info}}</h3>
            <button @click="changeWeather">切换天气</button>
        </div>
    </body>

    <script>
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: '#root',
            data: {
                isHot: true,
            },
            computed: {
                info: function () {
                    return this.isHot ? '炎热' : '凉爽';
                },
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot;
                },
            },
            // 方式一
            watch: {
                isHot: {
                    // 初始化时让handler调用一次
                    immediate: true,
                    // handler何时执行？当isHot发生改变时
                    // handler接收两个参数，newValue：新值  与  oldValue：旧值
                    handler(newValue, oldValue) {
                        console.log(newValue, oldValue);
                    },
                },
            },
        });
        // 方式二
        /* vm.$watch('isHot', {
            // 初始化时让handler调用一次
            immediate: true,
            // handler何时执行？当isHot发生改变时
            // handler接收两个参数，newValue：新值  与  oldValue：旧值
            handler(newValue, oldValue) {
                console.log(newValue, oldValue);
            },
        }); */
    </script>
</html>

深度监视

  1. Vue中的watch默认不监测对象内部值的改变（一层）
  2. 配置deep：true可以监测对象内部值改变（多层）

备注：

  • Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以！
  • 使用watch时根据数据的具体结构，决定是否采用深度监视
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>深度监听</title>
        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
        <script src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h3>a：{{numbers.a}}</h3>
            <button @click="numbers.a++">a值累加</button>
            <h3>b：{{numbers.b}}</h3>
            <button @click="numbers.b++">a值累加</button>
        </div>
    </body>

    <script>
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: '#root',
            data: {
                numbers: {
                    a: 1,
                    b: 1,
                },
            },
            // 方式一
            watch: {
                // 监听多级结构中某个属性的变化
                /* 'numbers.a': {
                    handler(newValue, oldValue) {
                        console.log(newValue, oldValue);
                    },
                }, */
                // 监听多级结构中所有属性的变化
                numbers: {
                    deep: true,  // 开启深度监视，默认为false
                    handler(newValue, oldValue) {
                        console.log('numbers发生变化');
                    },
                },
            },
        });
    </script>
</html>

监听属性简写

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>监听属性-简写</title>
        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
        <script src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h3>今天天气很{{info}}</h3>
            <button @click="changeWeather">切换天气</button>
        </div>
    </body>

    <script>
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: '#root',
            data: {
                isHot: true,
            },
            computed: {
                info: function () {
                    return this.isHot ? '炎热' : '凉爽';
                },
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot;
                },
            },
            // 方式一
            watch: {
                /* isHot: {
                    // 初始化时让handler调用一次
                    // immediate: true,
                    // handler何时执行？当isHot发生改变时
                    // handler接收两个参数，newValue：新值  与  oldValue：旧值
                    handler(newValue, oldValue) {
                        console.log(newValue, oldValue);
                    },
                }, */
                // 简写，简写时，只允许存在一个配置项，即handler
                isHot(newValue, oldValue) {
                    console.log(newValue, oldValue);
                },
            },
        });
    </script>
</html>

计算属性(computed) VS 监听属性(watch)

区别
  1. computed能完成的功能，watch都可以完成
  2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
原则
  1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
  2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象
vue3【计算属性与监听-详】
蜗牛~~
11-17 3666
vue3【计算属性与监听-详】
Vue中的计算属性与监听器
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-27 610
在其众多特性中，计算属性(computed properties)和监听器(watchers)是两个非常重要的概念，它们可以帮助开发者有效地管理复杂的应用状态，并优化应用性能。通过合理的使用这两个特性，可以有效地管理复杂的状态，并提高应用的性能。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。让我们从一个简单的例子开始，创建一个Vue实例，其中包含一个计算属性来展示用户的名字和姓氏的全名。的值发生变化时，监听器就会触发，并打印出变化的信息。
计算属性与监听器 基本使用 方法
Z13955558735的博客
05-23 203
1.计算属性基本使用 <div id="app"> <h2>{{ firstName }}-{{ lastName }}</h2> <h2>{{ getFallName() }}</h2> <h2>{{ fullName }}</h2> <!-- 计算属性在页面渲染时 不需要加() --> </div> <scri
vue基础_5.计算属性与监听属性
qq_44761755的博客
07-18 173
1.计算属性 关键字：computed 计算属性的值会缓存，只有当它所依赖的值发生改变时才会重新计算，所以它又属于响应式的。（在 计算复杂逻辑时 或 数据更新 时采用computed） 注意： 1.computed里属性是自定义的，不能与data里的属性重复 2. computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性 例： <body> <div id="app"> <div>count：
计算属性和深度监控
hk_xxs_net的博客
04-24 1050
todu list .editing :first-child{ display:none; } .content{ margin: 0 auto; } .editing .edit{ display: block; } .edit { display: none; } .view{ width: 90%; border
Vue (3) — 计算属性、监视属性(侦听属性)、深度监视
m0_59897687的博客
11-24 1555
目录 一、计算属性 1.定义 2.原理 3.get函数什么时候执行？ 4.优势 5.备注 6.案例（使用三种方法实现） 1.使用插值语法实现 2.使用methods实现 3.使用计算属性实现 7.计算属性的简写 二、监视属性(即“侦听属性”) 三、深度监视 1.深度监视 2.深度监视的简写 (1).写法一 (1).写法二 3.computed和watch之间的区别 ...
Vue2-计算属性、监视属性（侦听属性）
weixin_56498069的博客
08-10 1416
Vue2-计算属性、监视属性（侦听属性）
谷粒商城实战笔记-40-前端基础-Vue-计算属性、监听器、过滤器
epitomizelu的专栏
07-21 1211
西游记；价格：{{xyjPrice}}，数量：
【Vue】计算属性和监听属性
sishihao的博客
08-22 1288
对于使用ref函数定义的基本数据类型，则直接监听即可，示例代码如下：width += 1;} </ script > < template > < div > < p > 宽度：{{ width }} </ p > < button @click = " onUpdateWidth " > 修改width </ button > </ div > </ template >importwidth += 1;
Vue：深度监听watch 和 计算属性computed
浪里小白龙
08-30 3731
深度监听 watch 通常用于监听某个对象发生改变时，调用需要执行的方法，类似于js里面onchange或者addEventListener的作用。 之前遇到一个问题，公司的日期组件有个bug，把设定的显示值当作默认值，这样就算不操作，日期对象里也会有值，无法用是否为空来判断用户选择过。 于是我加了一个监听，用户进行选择会触发，改变标志位的值。 watch: { startdate: { handler: function (newValue) { this.cli
计算属性（computed）和监听器（watch）的区别
热门推荐
itcast_cs的博客
10-29 1万+
引言 在学习Vue的过程中，我们经常会使用计算属性来作为输出在页面中的数据内容，发现使用计算属性非常方便，但是学到后面我们又会发现一个叫侦听器的东西。 那么问题来了，侦听器和计算属性，哪个更牛逼，哪个更好用？ 不少刚刚学习Vue的小白都会纠结这个问题，但是实际上我想给这些小白同学说，不用纠结，计算属性和侦听器咋一看上去使用方式，结果都差不多，但是理解了他们深层次的原理之后你就会发现，他们其实是用在...
4.Vue-计算属性、监视属性、深度监视、计算属性与监视属性对比
weixin_51351637的博客
08-31 1428
②如果计算属性要被修改，那必须写set函数去响应修改且set中要引起计算时依赖的数据发生改变。开启深度监视，当number中的任何一个配置变了之后，就会运行handler函数。Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以！Vue中的watch默认不监测对象内部值的改变（一层）定义：要用的属性不存在，要通过已有的属性计算得来。最终实现的效果如下，当我们点击“切换天气”的时候，就会改变。因为这才是正统的写法，没有引号的那种是简写形式。监视number中的a的变化。......
【Vue3】计算属性computed和监听属性watch
叶子yes的博客
01-23 3306
监听ref或者reactive定义的对象类型数据中的某个属性时，如果该属性值不是对象类型，需要写成函数的形式，如果是对象类型，可以直接写，也可以写成函数的形式。监视ref定义的对象类型数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视。② watch要明确指出监视的数据，watchEffect不用明确指定监视的数据，用到哪些属性，就监视哪些属性。它需要返回一个值，返回的值就是该计算属性的值。① 都能监听响应式数据的变化，不同的是监听数据变化的方式不同。定义的对象中的属性，
计算属性和监听属性
weixin_64350889的博客
08-06 441
在 Vue.js 中，computed 属性用于定义计算属性。计算属性是基于它们的依赖进行缓存的，只有在相关依赖发生变化时才会重新计算。这使得它们非常适合用于处理复杂的逻辑或数据转换，而不需要在模板中直接进行计算。用于观察 Vue 实例上的数据变动。当被观察的数据变化时，执行特定的回调函数。watch可以用来监听data中的数据，也可以监听computed中的属性，但是如果是变量，watch监听不到2.2监听属性的使用2.2.1不简写形式watch:{//不简写形式a:{
vue计算属性和监听器详解
weixin_45884508的博客
02-23 1832
计算属性通常由一个返回值的getter方法组成，它仅根据输入（依赖的响应式数据）产生输出，不涉及副作用操作。
Vue：计算属性及监听
sssxlxwbwz的博客
05-02 2278
一、计算属性： 1. 定义：计算属性是通过已有属性，计算的来的属性。 2. 原理：计算属性底层借助了Object.defineProperty()方法提供的getter和setter 3. get()函数： get函数在初次读取时会执行一次 当计算属性所依赖的数据发生改变的时候，get()函数会被再次调用 4. 优势：与methods实现相比，计算属性采用了缓存机制，在获取计算属性的属性值时，若所依赖的属性没有发生变化，那么就不会执行get()函数，而是将缓存的计算属性值返回。与methods每次
VUE知识（三）计算属性、监听属性、动画
weixin_65548623的博客
10-21 1206
计算属性，基于依赖项的值进行缓存，依赖的变量不变，都直接从缓存取结果。使用watch配置项，key是要侦听的data/计算属性名。set接收要赋予的值，get里要返回给这个计算属性具体值。计算属性对应函数执行后，会把return值缓存起来。依赖项值变化，函数会“自动”重新执行并缓存新的值。给计算属性变量赋值时，需要用计算属性的完整方法。一个变量的值，依赖另外一些数据计算而来的结果。场景：一个变量的值，需要用另外变量计算而得来。带缓存，只要依赖项不变，都直接从缓存中取。过渡.vue(简写）
Vue基础教程：表单绑定、计算属性与事件监听
"这篇文档是关于Vue.js的基础语法教程，主要涵盖了表单绑定、计算属性、侦听器、过滤器以及Vue的生命周期等关键概念，适合初学者学习。" 在Vue.js中，表单绑定是数据双向绑定的核心，使得DOM元素与Vue实例的数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值