【一】计算属性
-
[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>