关于vue那些事（二）Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情 1.谈谈属性 set

Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情

1.谈谈属性

setup
ref
reactive
toRefs
computed
watchEffet
watch

setup
setup的参数有两个：props,ctx；
props:这个主要就是父组件和子组件之间传值之间的通讯。
ctx:(attrs,slots,emit,expose)

attrs：获取props没有接收的属性对象。
slots：获取插槽内容的对象。
emit：触发父组件的分发事件。
expose：返回属性里面的函数内容

ref 该属性主要是用于单个基本类型的响应式数据，他返回的是一个ref对象指向他里面的value。
reactive 和 toRefs
该属性主要用于多个复杂数据类型/引用数据类型的数据返回，然后通过 toRefs 来进行解析返回响应式数据。

computed
只读的计算属性：

可读可设置的计算属性：

watchEffet 和 watch
watch侦听特别的数据源，但是他具有懒惰性，需要配置属性执行。
watch侦听单个数据源：

watch侦听多个数据源：

setup() {
  const number = ref('1')
  const state = reactive({
    text: '测试',
    count: '2'
  })
  const watchData = watch([()=>state.count,number],([newCount,newNumber],[oldCount,oldNumber])=>{
    console.log(newCount,newNumber)
    console.log(oldCount,oldNumber)
  },{
    immediate:true,deep:true
  })
  return {
    ...toRefs(state),
    number,
    watchData
  }
}

watchEffet:立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数

setup() {
  const number = ref('1')
  const state = reactive({
    text: '测试',
    count: '2'
  })
  const watchData = watchEffect(() => {
    console.log(state.count)
  })
  return {
    ...toRefs(state),
    number,
    watchData
  }
}

watchEffect 不需要手动传入依赖
watchEffect 会先执行一次用来自动收集依赖
watchEffect 无法获取到变化前的值，只能获取变化后的值

2.结语

这里只是列举了部分的属性说明，更加具体的大家可以去查看文档资料，后续如果有时间再补充。