使用computed,watch,watchEffect, 一定记得先引入
import { reactive , computed,toRefs,watch,watchEffect} from "vue";
1.computed属性(和vue2中的配置功能一致)
使用 getter 函数,并为从 getter 返回的值返回一个不变的响应式 ref 对象。
如图所示,案例:
<p>原来值:{{ count }}</p>
<p>计算属性更改的值:{{ twoNumber }}</p>
//引用ref函数 可以实时更新数据
import { defineComponent, reactive , computed,toRefs,watch} from "vue";
export default defineComponent({
name: "HelloWorld",
setup() {
const state: any = reactive({
count: 1,
twoNumber: computed(() => state.count*2)
});
//暴露出去给外界使用
//使用toRefs解构响应式对象数据,实现实时更新
return {
...toRefs(state),
};
},
2.watch属性 与 vue2中的 this.$watch (以及相应的 watch 选项) 完全等效。
watch(()=>state.count,(newValue, oldValue) => {
console.log('改变了');
console.log('我是新的值',newValue);
console.log('我是旧的值',oldValue);
})
注意:
有俩个小坑: 1)监视reactive自定义响应式数据的时候,oldValue无法获取,强制开启深度监听失效(deep:true)
2)监视reactive定义的响应式数据中某个属性时,deep配置有效
watch 三个参数,第一个要监听的对象(可以是函数或者对象),第二个函数,第三个是配置项(immediate:true,deep:true)
watch(person,(newVal,oldVal)=>{
console.log('person变化了',newVal,oldVal)
},{immediate:true})
3.watchEffect函数
watch的套路是:既要指明监视的属性,也要指明监视的回调
watchEffect的套路是:不用指明监视哪个属性,监视回调中用到哪个属性,就监视哪个属性
watchEffect的特点有点像computed:
但computed注重的是计算出来的值(回调函数的返回值),所以必须要写返回值。
而watchEffect
更注重的是过程(回调函数的函数体),所以不用写返回值。
watchEffect(()=>{
person.firstName = 'hahah'
console.log('我是监听的数据',person)
})