Vue的计算属性和监听器

落日映苍穹つ 2021-07-25 01:05 314阅读 0赞

**目录**

一 点睛

1 什么是计算属性

2 watch的用法

二 代码

三 效果

--------------------

# 一 点睛 #

## 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>

# **三 效果** #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/599c12a8652b4d2bbbfd61f8e148044e.png