在setup函数中使用计算属性函数
根据现有响应式数据经过一定的计算得到全新的数据
有两种方式:
方式一:
import {computed} from 'vue'
export default {
setup() {
const filterList = computed(() => {
return ... //return 计算后的值
})
return {
filterList
}
}
方式二:
import {computed} from 'vue'
export default {
setup() {
const filterList = computed({
get(){//设置值
return 计算后的值
},
set(val){//获取值 val就是filterList的当前状态
}
})
return {
filterList
}
}
注意:要从vue实例中引入computed
在setup函数中使用watch侦听器
基于响应式数据的变化执行回调逻辑,和vue2中的watch的功能完全一致
使用步骤
- 从vue框架中导入watch函数
import { ref,watch } from 'vue'
- 在setup函数中执行watch函数开启对响应式数据的监听
export default {
setup() {
const age = ref(18)
watch(() => {
// 返回你想要监听的响应式属性(ref产生的对象必须加.value)
return age.value
}, () => {
// 数据变化之后的回调函数
console.log('age发生了变化')
})
return {
age
}
}
- watch函数接收三个常规参数:(第一个参数为函数,返回你要监听变化的响应式数据,第二个参数为响应式数据变化之后要执行的回调函数,第三个参数为一个对象,在里面配置是否开启立刻执行或者深度监听)
export default {
setup() {
const age = ref(18)
watch(() => {
// 返回你想要监听的响应式属性(ref产生的对象必须加.value) 监听谁,返回谁
return age.value
}, () => {
// 数据变化之后的回调函数
console.log('age发生了变化')
},{
immediate: true, // 页面进入就执行一次监听
deep:true // 开启深度监听
})
return {
age
}
}
使用watch的时候,尽量详细的表明你到底要监听哪个属性,避免使用deep引起的性能问题,如:监听多个对象嵌套的属性: return obj.obj.item 详细指定到具体侦听的属性