computed 是计算属性，它会根据响应式数据的变化⾃动计算出新的值，并缓存结果，只有在计算属性所依赖的响应式数据发⽣改变时才会重新计算。
computed 适⽤于需要根据响应式数据计算得出结果的场景，例如根据商品的数量和单价计算商品的总价，或者根据选中的过滤条件过滤出数据列表。
computed 基础语法
<template>
<div>
<div>
性：<input v-model="firstName" type="text">
</div>
<div>
名：<input v-model="lastName" type="text">
</div>
<div>
全名：<input v-model="fullName" type="text">
</div>
<button @click="changeName">changeName</button>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
let firstName = ref('zhang')
let lastName = ref('san')
// 1.选项式写法 支持一个对象传入getter和setter自定义操作
let fullName = computed<string>({
get () {
return firstName.value + '-' + lastName.value
},
set(newVal) {
// newVal.split('-') 此时没有 .value
console.log(newVal.split('-'));
//
[firstName.value,lastName.value] = newVal.split('-')
}
})
const changeName = () => [
fullName.value = 'xiao-hu'
]
//2.函数式写法，只能支持一个getter函数，不可以修改值
// let fullName = computed(() => firstName.value + '-' + lastName.value)
// 不可以修改，以下这个函数会报错
// const changeName = () => {
// fullName.value = 'xiao-hu'
// }
</script>
<style lang="scss" scoped></style>
computed 作为函数也可以直接传入参数使用：
@click="getPagePath(item)"
// ....
const getPagePath = computed(() => {
return (item: INavBars) => {
let path = '/'
if (item.type !== 'oppo') {
path += item.type
}
return path
}
})
Vue2：
- computed配置项和data配置项是同级的
- computed中的计算属性虽然是函数的写法，但他依然是个属性，即模板语法中可以直接使用数据属性
- js中使用计算属性： this.计算属性
- 模板中使用计算属性：{{计算属性}}
- computed中的计算属性不能和data中的属性同名
- 使用computed中的计算属性和使用data中的属性是一样的用法
- computed中计算属性内部的this依然指向的是Vue实例
Vue2:
methods
作用：给Vue实例提供一个方法，调用以处理业务逻辑。
语法：
- 写在methods配置项中
- 作为方法调用
- js中调用：this.方法名()
- 模板中调用 {{方法名()}} 或者 @事件名=“方法名”
watch:是监听，数据或者路由发生了改变才可以响应（执行）
computed计算某一个属性的改变，如果某一个值改变了，计算属性会监听到进行返回
watch:是当前监听到数据改变了，才会执行内容
购物车小案例
未使用computed优化
<template>
<div>
<input placeholder="搜索" type="text">
</div>
<div style="margin-top: 20px">
<table border width="600" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>物品名称：</th>
<th>物品单价：</th>
<th>物品数量：</th>
<th>物品总价：</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in data">
<td align="center">{{ item.name }}</td>
<td align="center">{{ item.price }}</td>
<td align="center"><button @click="item.num>1 ? (item.num--, total()) : null">-</button>{{ item.num }}<button @click="item.num < 99 ? (item.num++, total()) : null">+</button></td>
<td align="center">{{ item.num * item.price }}</td>
<td align="center"><button @click="del(index)">del</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" align="right">
总价:{{ $total }}
</td>
</tr>
</tfoot>
</table>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
let $total = ref<number>(0)
interface Data {
name: string,
price: number,
num: number,
}
let data = reactive<Data[]>([
{
name: '手机',
price: 100,
num: 1
},
{
name: '电脑',
price: 200,
num: 2
},
{
name: '笔记本',
price: 300,
num: 3
}
])
const total = () => {
$total.value = data.reduce((prev:number, next: Data) => {
return prev + next.num * next.price
},0)
}
total()
const del = (index:number) => {
data.splice(index, 1)
total()
}
</script>
<style lang="scss" scoped></style>
使用computed优化
<template>
<div>
<input v-model="keyWord" placeholder="搜索" type="text">
</div>
<div style="margin-top: 20px">
<table border width="600" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>物品名称：</th>
<th>物品单价：</th>
<th>物品数量：</th>
<th>物品总价：</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in searchData">
<td align="center">{{ item.name }}</td>
<td align="center">{{ item.price }}</td>
<td align="center"><button @click="item.num > 1 ? item.num-- : null">-</button>{{ item.num }}<button
@click="item.num < 99 ? item.num++ : null">+</button></td>
<td align="center">{{ item.num * item.price }}</td>
<td align="center"><button @click="del(index)">del</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" align="right">
总价:{{ total }}
</td>
</tr>
</tfoot>
</table>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
let keyWord = ref<string>('')
interface Data {
name: string,
price: number,
num: number,
}
let data = reactive<Data[]>([
{
name: '手机',
price: 100,
num: 1
},
{
name: '电脑',
price: 200,
num: 2
},
{
name: '笔记本',
price: 300,
num: 3
}
])
// const total = () => {
// $total.value = data.reduce((prev:number, next: Data) => {
// return prev + next.num * next.price
// },0)
// }
const total = computed(() => {
return data.reduce((prev: number, next: Data) => {
return prev + next.num * next.price
}, 0)
})
const searchData = computed(() => {
return data.filter((item: Data) => {
return item.name.includes(keyWord.value)
})
})
// 使用 searchData 搜索后的总价有bug，不会随 searchData 的数据改变（抽空再改啦~~）
const del = (index: number) => {
data.splice(index, 1)
}
</script>
<style lang="scss" scoped></style>
watch 和 computed 的区别：
计算属性 computed :
- 支持缓存，只有依赖数据发生改变，才会重新进行计算
- 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
- computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
- 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
- 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
computed: {
// 一个计算属性的 getter
publishedBooksMessage() {
// `this` 指向当前组件实例
return this.author.books.length > 0 ? 'Yes' : 'No'
}
}
侦听属性watch：
- 不支持缓存，数据变，直接会触发相应的操作；
- watch支持异步；
- 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
- 当一个属性发生变化时，需要执行对应的操作；一对多；
- 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
- immediate：组件加载立即触发回调函数执行，
- deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。
watch: {
// 每当 question 改变时，这个函数就会执行
question(newQuestion, oldQuestion) {
if (newQuestion.includes('?')) {
this.getAnswer()
}
}
},
watch: {
someObject: {
handler(newValue, oldValue) {
// 注意：在嵌套的变更中，
// 只要没有替换对象本身，
// 那么这里的 `newValue` 和 `oldValue` 相同
},
deep: true
}
}
扫一扫
1167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
