computed的两种用法

computed就是当依赖的属性发生改变的时候，就会触发他的更新，如果他依赖的值没有发生改变，那就会使用缓存中的一个值

通过例子来说明，第一种选项式写法，支持一个对象的传入，要求去实现一个get函数比及set函数，去自定义这个操作

get用来读取值，set用来赋值

let change = computed<string>({
  get() {
    return myname.value + ',' + weather.value
  },
  set(newval) {
    weather.value = newval;
  }
})

第二种就是函数式的，只支持get函数,

let change = computed<string>(() => {
  return myname.value + ',' + weather.value
})

watch

wacth也叫监听器，用来监听响应式的数据，只有ref或者reactive所包裹的数据才会被监听到，第一个参数就是侦听的数据源，第二个参数就是一个回调函数callback，返回两个参数，新值和旧值

let  myname = ref<string>('小石');

  watch(myname, (newVal, oldVal) => {
    console.log(newVal, oldVal);
  })

也可以监听多个源，用数组包裹，返回的也是数组

let  myname = ref<string>('小石');
let  myname1 = ref<string>('您好');

  watch([myname,myname1], (newVal, oldVal) => {
    console.log(newVal, oldVal);
  })

当ref定义多层级对象的时候，watch就需要开启配置项 deep: true（深度监听），用reactive定义的数据，则不需要开启deep

  watch(myname, (newVal, oldVal) => {
    console.log(newVal, oldVal);
  })

只想侦听其中某个属性，侦听源可以变成一个函数的方式来进行

  watch(() => myname.foo.bar.name, (newVal, oldVal) => {
    console.log(newVal, oldVal);
  })

watch配置项

deep 深度监听
immediate watch首次先运行一次，立即执行一次
flush 三个值控制watch的执行顺序，用的不是很多

pre 组件更新之前调用
sync 同步执行
post 组件更新之后

V3的computed和watch

computed的两种用法

watch