一.计算属性:computed
1.计算属性中要有return
2.计算属性不能做异步操作,因为他是同步的,异步的不能通过返回值来被处理
3.如果使用修改数据set方法与读取数据get方法,computed({})中的参数需要是对象的形式,其中set会自动获取你设置的值,get中要有return,set中没有return
1.基本使用的代码:
<template>
<h1>计算属性</h1>
<button @click="age = 28">点击</button>
<div>今年:{{age}}</div>
<div>明年:{{nextage}}</div>
</template>
<script>
import { ref, computed } from 'vue'
export default {
name: 'App',
setup () {
const age = ref(18)
const nextage = computed(() =>
age.value + 1
)
return {
age,
nextage
}
}
}
</script>
set与get方法
<template>
<h1>计算属性</h1>
<button @click="age = 28">点击修改今年年龄</button>
<button @click="nextage = 40">点击修改明年年龄</button>
<div>今年:{{age}}</div>
<div>明年:{{nextage}}</div>
</template>
<script>
import { ref, computed } from 'vue'
export default {
name: 'App',
setup () {
const age = ref(18)
const nextage = computed({
get () {
return age.value + 1
},
set (v) {
age.value = v - 1
}
})
return {
age,
nextage
}
}
}
</script>
二.watch函数(侦听器)
侦听器:被真的信息变化时,触发侦听器的回调函数,
典型的场景:路由参数发生变化,重新调用用接口获取组件的数据
1.监听ref定义的响应式数据(简单数据类型用的多)
<template>
<h1>侦听器</h1>
<h2>{{count}}</h2>
<button @click="count += 1">点击</button>
</template>
<script>
import { ref, watch } from 'vue'
export default {
name: 'App',
setup () {
const count = ref(0)
watch(count, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
return {
count
}
}
}
</script>
2.监听reactive定义的响应式数据(复杂数据类型较多)
注意:
1).监听对象中的某一个属性的时候watch里面要使用箭头函数指向对象中的属性
<template>
<h1>侦听器侦听对象</h1>
<h2>{{obj.info}}</h2>
<button @click="handlerClick">点击</button>
</template>
<script>
import { watch, reactive, toRefs } from 'vue'
export default {
name: 'App',
setup () {
const obj = reactive({
info: '中国',
msg: '加纳'
})
const { info } = toRefs(obj)
const handlerClick = () => {
info.value = '中国加油'
}
// 监听对象中的某一个属性的时候watch里面要使用箭头函数指向对象中的属性
watch(() => obj.info, (v, v2) => {
console.log(v, v2)
})
return {
obj,
handlerClick
}
}
}
</script>
2).监听整个对象的时候(如果想看新对象与旧对象的对比可以使用{...obj}浅拷贝来实现)
<template>
<h1>侦听器侦听对象</h1>
<h2>{{obj.info}}</h2>
<button @click="handlerClick">点击</button>
</template>
<script>
import { watch, reactive, toRefs } from 'vue'
export default {
name: 'App',
setup () {
const obj = reactive({
info: '中国',
msg: '加纳'
})
const { info } = toRefs(obj)
const handlerClick = () => {
info.value = '中国加油'
}
// 监听obj整个的时候里面直接写,不用写函数的形式,否则不好使
// watch(obj, (v, v2) => { // 前后对比的v与v2都是一个值,因为他是引用数据类型
// console.log('新值', v)
// console.log('旧值', v2)
// })
watch(() => { return { ...obj } }, (v, v2) => { // 这是能够看到修改之后的前后对比
console.log('新值', v)
console.log('旧值', v2)
})
return {
obj,
handlerClick
}
}
}
</script>
3).监听数值中的多个响应式数据
<template>
<h1>侦听器侦听数组</h1>
<h2>{{n1+"-----"+n2}}</h2>
<button @click="handlerClick">点击</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup () {
const n1 = ref(1)
const n2 = ref(2)
const handlerClick = () => {
n1.value = '从1改变了其他的'
}
// 监听数组的时候,里面直接写也不用写成函数的形式
watch([n1, n2], (v, v2) => {
console.log(v)
console.log(v2)
})
return {
n1,
n2,
handlerClick
}
}
}
</script>
4).监听正个数组
<template>
<h1>侦听器侦听数组</h1>
<!-- <h2>{{n1+"-----"+n2}}</h2>-->
<button @click="handlerClick">点击</button>
</template>
<script>
import { watch, reactive } from 'vue'
export default {
name: 'App',
setup () {
const arr = reactive([1, 2])
const handlerClick = () => {
arr[0] = 2
}
// 监听数组的时候,里面直接写也不用写成函数的形式
// watch(arr, (v, v2) => {
// console.log('新值:', v)
// console.log('旧值:', v2)
// })
// 这可以对比出数组的前后不一样的值,使用浅拷贝
watch(() => [...arr], (v, v2) => {
console.log('新值:', v)
console.log('旧值:', v2)
})
return {
arr,
handlerClick
}
}
}
</script>
3.使用参数(immediate,deep)
<template>
<h1>侦听器中的参数形式</h1>
<div>{{obj.friend.name}}</div>
<button @click="handlerClick">点击</button>
</template>
<script>
import { watch, reactive } from 'vue'
export default {
name: 'App',
setup () {
const obj = reactive({
n1: '哈哈',
n2: '嘿嘿',
friend: {
name: '婷婷',
age: 18
}
})
const handlerClick = () => {
obj.friend.name = '小明'
}
watch(() => obj.friend, (v, v2) => {
console.log('忠于自己')
}, { deep: true })
return {
obj,
handlerClick
}
}
}
</script>