Vue入门到关门之计算属性与监听属性

一、计算属性

1、什么是计算属性

计算属性是基于其它属性计算得出的属性，就像Python中的property，可以把方法/函数伪装成属性，在模板中可以像普通属性一样使用，但它们是基于响应式依赖进行缓存的。这意味着只有在依赖的响应式数据发生改变时，计算属性才会重新计算，否则会直接返回缓存的结果。

2、计算属性的特点

计算属性的主要作用是对数据进行处理和转换，以便在模板中进行展示或其他逻辑操作。相⽐于在模板中直接使用方法来处理数据，计算属性具有以下优势：

缓存结果： 计算属性的值会被缓存起来，只有在依赖的数据发生变化时才会重新计算。这样可以避免不必要的重复计算，提高性能。
响应式更新： 计算属性会自动追踪依赖的数据，当依赖的数据发生变化时，计算属性会自动重新计算，保持数据的实时性。
依赖性：计算属性会自动追踪依赖关系，确保在依赖数据变化时重新计算。
简化模板逻辑： 通过使用计算属性，可以将复杂的逻辑处理和转换操作放在计算属性中，简化模板中的代码，使模板更加清晰和易读。

3、计算属性的使用

（1）计算属性的定义方式

基础定义方式

js 复制代码

computed: {
 	// 计算属性的名称
 	propertyName: function() {
 	// 计算属性的逻辑处理
 	// 返回计算结果
 	return result;
	}
}

（2）首字母变大写

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./JS/vue.js"></script>
    <script src="./JS/axios.js"></script>

</head>
<body>
<div id="app">
    <h1>首字母变大写</h1>
<!--    <input type="text" v-model="name">-&ndash;&gt; {{name.substring(0, 1).toUpperCase() + name.substring(1)}}-->
<!--    <br>-->
<!--    <input type="text" v-model="name">-&ndash;&gt; {{getName()}}-->
<!--    <br>-->
<!--&lt;!&ndash;    当我执行下面的input框的时候，getName方法也在执行，这就不对了，所以这时候需要计算属性&ndash;&gt;-->
<!--只要页面发生变化，函数都会重新运算，但是计算属性中的属性只针对所依赖的东西发生变化，与其他东西无关-->
    <!--    <input type="text" v-model="name1">-&ndash;&gt; {{name1}}-->
    <br>
    <input type="text" v-model="name">---> {{newName}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            name1: ''
        },
        methods: {
            getName() {
                console.log('我执行了')
                return name.substring(0, 1).toUpperCase() + name.substring(1)
            }
        },
        computed: {
            newName() {
                return name.substring(0, 1).toUpperCase() + name.substring(1)
            }
        }
    })
</script>
</html>

第一步，加载页面，普通函数和计算属性触发

第二步，普通函数输入abc，触发三次，其他两个没有被触发

第三步，普通输入框输入abc，普通函数触发了，计算属性并没有被触发

第四步，计算属性输入abc，普通函数和计算属性都触发了

总结：当我执行普通的并没有调用函数的input框的时候，getName方法也执行了，这就不对了，所以这时候就需要使用计算属性。我们要知道只要页面发生变化，函数都会重新运算，但是计算属性中的属性只针对所依赖的东西发生变化，其他没有调用计算属性的不会对其造成影响。

（3）重写过滤案例

通过计算属性重写过滤属性会使我们将代码写的更简单

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./JS/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>过滤案例</h2>
    <input type="text" v-model="search" >
    <ul>
        <li v-for="item in newDataList">{{item}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            dataList: ['a', 'ac', 'bdsfc', 'ffaw', 'casdad', 'atnefk', 'fwead', 'fewfe'],
        },
        computed: {
            newDataList(){
                return this.dataList.filter(item => item.indexOf(this.search) >= 0)
            }
        }
    })
</script>
</html>

二、监听属性（侦听器）

1、什么是监听属性

监听属性是Vue中的⼀种特殊属性，用于监测数据的变化并触发相应的回调函数。通过监听属性，我们可以在数据发生改变时执行一些额外的逻辑操作。

2、监听属性的特点

监听属性的作用是在数据发生变化时，执行一些操作或触发其他的逻辑。它可以用于响应数据的变化并进行相应的处理，比如数据的验证、异步操作、触发其他组件的更新等。

更灵活：与计算属性不同，监听属性更适用于执行异步操作或需要更多控制的情况。
侦听任何数据变化：你可以监听任何数据的变化，而不仅限于计算属性所依赖的数据。

3、监听属性的使用

（1）监听属性的定义方式

在watch对象中，可以定义多个属性的监听器，每个属性对应一个回调函数。当被监听的属性发生变化时，Vue会自动调用对应的回调函数，并传递新值和旧值作为参数。

监听对象定义方式

js 复制代码

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

监听数组定义方式

js 复制代码

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

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

（2）示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./JS/vue.js"></script>
    <script src="./JS/axios.js"></script>
    <style>
        .item{
            width: 150px;
            height: 50px;
            background-color: red;
            font-size: 25px;
             margin: 10px;
            display: flex;
            justify-content: center;
            align-content: center;
        }
        .top{
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>监听属性</h1>
    <div class="top">
        <div class="item" @click="course_type='java'">
            <span>java</span>
        </div>
        <div class="item" @click="course_type='python'">
            <span>python</span>
        </div>
        <div class="item" @click="course_type='go'">
            <span>go</span>
        </div>
    </div>
    <div>
        内容部分：{{content}}
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            content:'java',
            course_type:'java'
        },
        watch:{
            course_type(newValue,oldValue){
                console.log(newValue,oldValue)
                this.content = 'niubi'+this.course_type+'666'
            }
        }
    })
</script>
</html>

三、computed和watch的区别

在Vue.js中，计算属性（Computed Properties）和侦听器（Watchers）是用来处理数据响应式更新的两个重要工具，它们之间存在一些明显的区别：

计算属性：
- 基于Vue实例的数据状态计算得出的属性。
- 会根据依赖的数据发生变化而变化，但只有在依赖数据发生改变时才会重新计算。
- 具有缓存特性，只有在依赖发生变化时才会重新计算，否则会返回之前缓存的结果。
- 适合处理简单的逻辑计算，避免模板过于臃肿。
- 用于根据多个响应式数据计算出一个新的值。
侦听器：
- 允许在数据变化时执行异步或开销较大的操作。
- 更通用，适合执行异步操作或执行较为复杂的操作。
- 可以监听任何数据的变化，而不仅限于计算属性依赖的数据。
- 用于监听某个数据的变化并做出相应的处理，或者在需要执行异步操作或开销较大的操作时使用。

但只有在依赖数据发生改变时才会重新计算。

具有缓存特性，只有在依赖发生变化时才会重新计算，否则会返回之前缓存的结果。
适合处理简单的逻辑计算，避免模板过于臃肿。
用于根据多个响应式数据计算出一个新的值。

侦听器 ：
- 允许在数据变化时执行异步或开销较大的操作。
- 更通用，适合执行异步操作或执行较为复杂的操作。
- 可以监听任何数据的变化，而不仅限于计算属性依赖的数据。
- 用于监听某个数据的变化并做出相应的处理，或者在需要执行异步操作或开销较大的操作时使用。

总的来说，计算属性适合处理简单的逻辑计算，具有缓存特性，适用于基于响应式数据生成的属性；而侦听器更适合处理更复杂的逻辑，可以监听任何数据的变化并执行相应的操作，适用于需要执行异步操作或开销较大的操作的场景。