3 posts tagged with "vue3"

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    title: String
  },
  setup(props, context) {
    // props 是响应式的，但不要解构它
    console.log(props.title)
    
    // context 包含 attrs, slots, emit 等
    const { attrs, slots, emit } = context
    
    return {
      // 返回的内容会暴露给模板
    }
  }
})

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    // ref 用于基本类型的响应式
    const count = ref(0)
    
    // 访问 ref 的值需要使用 .value
    console.log(count.value) // 0
    
    // 在模板中会自动解包，不需要 .value
    const increment = () => {
      count.value++
    }
    
    // watchEffect 会自动追踪依赖
    watchEffect(() => {
      console.log('count is:', count.value)
    })
    
    return {
      count,
      increment
    }
  }
}

import { reactive, computed, watch } from 'vue'

export default {
  setup() {
    // reactive 用于对象的响应式
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2),
      history: []
    })
    
    // 监听单个属性
    watch(
      () => state.count,
      (newValue, oldValue) => {
        state.history.push({
          newValue,
          oldValue,
          timestamp: new Date()
        })
      }
    )
    
    // 深度监听对象
    watch(
      () => state,
      (newValue) => {
        console.log('state changed:', newValue)
      },
      { deep: true }
    )
    
    return {
      state
    }
  }
}

import { 
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured
} from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      console.log('组件挂载前')
    })
    
    onMounted(() => {
      console.log('组件已挂载')
      // 可以在这里进行 DOM 操作
    })
    
    onBeforeUpdate(() => {
      console.log('组件更新前')
    })
    
    onUpdated(() => {
      console.log('组件已更新')
    })
    
    onBeforeUnmount(() => {
      console.log('组件卸载前')
    })
    
    onUnmounted(() => {
      console.log('组件已卸载')
      // 可以在这里清理定时器、事件监听等
    })
    
    onErrorCaptured((err, instance, info) => {
      console.error('捕获到错误:', err)
      return false // 阻止错误继续传播
    })
  }
}

import { reactive, toRefs, toRef } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      name: 'Vue3'
    })
    
    // toRefs 将整个对象转换为响应式引用
    const { count, name } = toRefs(state)
    
    // toRef 创建单个属性的响应式引用
    const countRef = toRef(state, 'count')
    
    // 这些引用都是响应式的
    console.log(count.value) // 0
    console.log(name.value) // 'Vue3'
    
    return {
      count,
      name,
      countRef
    }
  }
}

import { 
  isRef,
  unref,
  isReactive,
  isReadonly,
  markRaw
} from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    // 检查是否是 ref
    console.log(isRef(count)) // true
    
    // 获取 ref 的值，如果不是 ref 则返回原值
    console.log(unref(count)) // 0
    
    const state = reactive({})
    // 检查是否是响应式对象
    console.log(isReactive(state)) // true
    
    // 检查是否是只读对象
    console.log(isReadonly(readonly(state))) // true
    
    // 标记对象为非响应式
    const raw = markRaw({ count: 0 })
  }
}

import { shallowRef, shallowReactive, markRaw } from 'vue'

export default {
  setup() {
    // 浅层响应式，只跟踪顶层属性
    const shallowState = shallowReactive({
      user: {
        name: 'Vue3',
        address: {
          city: 'Beijing'
        }
      }
    })
    
    // 浅层 ref，只跟踪 .value 的变化
    const shallowRef = shallowRef({
      count: 0
    })
    
    // 标记为非响应式
    const staticData = markRaw({
      config: {
        theme: 'dark'
      }
    })
  }
}

import { defineAsyncComponent } from 'vue'

export default {
  components: {
    // 异步组件
    AsyncComponent: defineAsyncComponent(() => 
      import('./AsyncComponent.vue')
    ),
    
    // 带加载状态的异步组件
    AsyncComponentWithLoading: defineAsyncComponent({
      loader: () => import('./AsyncComponent.vue'),
      loadingComponent: LoadingComponent,
      errorComponent: ErrorComponent,
      delay: 200,
      timeout: 3000
    })
  }
}

import { onRenderTracked, onRenderTriggered } from 'vue'

export default {
  setup() {
    onRenderTracked((event) => {
      console.log('组件渲染追踪:', {
        target: event.target,
        type: event.type,
        key: event.key
      })
    })
    
    onRenderTriggered((event) => {
      console.log('组件渲染触发:', {
        target: event.target,
        type: event.type,
        key: event.key,
        newValue: event.newValue,
        oldValue: event.oldValue
      })
    })
  }
}

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    let startTime
    
    onMounted(() => {
      startTime = performance.now()
    })
    
    onUnmounted(() => {
      const endTime = performance.now()
      console.log(`组件生命周期: ${endTime - startTime}ms`)
    })
  }
}

// composables/useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const double = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }
  
  function decrement() {
    count.value--
  }
  
  return {
    count,
    double,
    increment,
    decrement
  }
}

// components/Counter.vue
import { useCounter } from '../composables/useCounter'

export default {
  setup() {
    const { count, double, increment, decrement } = useCounter()
    
    return {
      count,
      double,
      increment,
      decrement
    }
  }
}

// store/counter.js
import { reactive } from 'vue'

export const store = reactive({
  count: 0,
  increment() {
    this.count++
  }
})

// components/Counter.vue
import { store } from '../store/counter'

export default {
  setup() {
    return {
      store
    }
  }
}