setup里面 计算属性与监视

• computed函数:

  • 与computed配置功能一致
  • 只有getter
  • 有getter和setter
  • set函数里面value得到的是更新之后的计算值，可以用他来修改依赖的值

•  // 有getter与setter的计算属性
      const fullName2 = computed({
        get () {
          console.log('fullName2 get')
          return user.firstName + '-' + user.lastName
        },
   
        set (value: string) {
          console.log('fullName2 set')
          const names = value.split('-')
          user.firstName = names[0]
          user.lastName = names[1]
        }
      })
  

• watch函数

  • 与watch配置功能一致
  • 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
  • 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
  • 通过配置deep为true, 来指定深度监视
  • 只监视响应式数据，其他数据需要（）=>value

  /* 
    使用watch的2个特性:
      深度监视
      初始化立即执行
    */
    watch(user, () => {
      fullName3.value = user.firstName + '-' + user.lastName
    }, {
      immediate: true,  // 是否初始化立即执行一次, 默认是false
      deep: true, // 是否是深度监视, 默认是false
    })

• watchEffect函数

  • 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
  • 默认初始时就会执行第一次（默认了immediate）, 从而可以收集需要监视的数据
  • 监视数据发生变化时回调

•     /* 
      watchEffect: 监视所有回调中使用的数据
      */
      /* 
      watchEffect(() => {
        console.log('watchEffect')
        fullName3.value = user.firstName + '-' + user.lastName
      }) 
      */