vue3.0新特性初体验（二）

const count = ref(0)

watchEffect(() => console.log(count.value))

setTimeout(() => {
  count.value++
}, 100)

const stop = watchEffect(() => {
  /* ... */
})

// later
stop()

const data = ref(null)
watchEffect(async () => {
  data.value = await fetchData(props.id)
})

<template>
  <div>{{ count }}</div>
</template>

<script>
  export default {
    setup() {
      const count = ref(0)

      watchEffect(() => {
        console.log(count.value)
      })

      return {
        count
      }
    }
  }
</script>

onMounted(() => {
  watchEffect(() => {
    // access the DOM or template refs
  })
})

watchEffect(()=> {
//...
}, {
 flush: 'sync'  // 在更新前触发 flush: "pre"
})

watchEffect(
  () => {
    /* side effect */
  },
  {
    onTrigger(e) {
      debugger   // 进行交互式调试
    }
  }
)

// watching a getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// directly watching a ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

import { onMounted, onUpdated, onUnmounted } from 'vue'

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }
}

export default {
  onRenderTriggered(e) {
    debugger
    // inspect which dependency is causing the component to re-render
  }
}

import { provide, inject } from 'vue'

const ThemeSymbol = Symbol()

const Ancestor = {
  setup() {
    provide(ThemeSymbol, 'dark')
  }
}

const Descendent = {
  setup() {
    const theme = inject(ThemeSymbol, 'light' /* optional default value */)
    return {
      theme
    }
  }
}

// in provider
const themeRef = ref('dark')
provide(ThemeSymbol, themeRef)

// in consumer
const theme = inject(ThemeSymbol, ref('light'))
watch(() => {
  console.log(`theme set to: ${theme.value}`)
})

<template>
  <div ref="root"></div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const root = ref(null)

    onMounted(() => {
      // the DOM element will be assigned to the ref after initial render
      console.log(root.value) // <div/>
    })

    return {
      root
    }
  }
}
</script>

<template>
  <div
    v-for="(item, i) in list"
    :ref="el => { divs[i] = el }">
    {{ item }}
  </div>
</template>

<script>
import { ref, reactive, onBeforeUpdate } from 'vue'

export default {
  setup() {
    const list = reactive([1, 2, 3])
    const divs = ref([])

    // make sure to reset the refs before each update
    onBeforeUpdate(() => {
      divs.value = []
    })

    return {
      list,
      divs
    }
  }
}
</script>

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    foo: String
  },
  setup(props) {
    props.foo // <- type: string
  }
})