Vue3开发实例代码分析

<script setup>import { getCurrentInstance } from 'vue'// proxy 就是当前组件实例，可以理解为组件级别的 this，没有全局的、路由、状态管理之类的const { proxy, appContext } = getCurrentInstance()// 这个 global 就是全局实例const global = appContext.config.globalProperties</script>

Vue.prototype.xxx = xxx

// main.jsimport { createApp } from 'vue'import App from './App.vue'const app = createApp(App)// 添加全局属性app.config.globalProperties.name = '沐华'

<script setup>import { getCurrentInstance } from 'vue'const { appContext } = getCurrentInstance()const global = appContext.config.globalPropertiesconsole.log(global.name) // 沐华</script>

<template>    <el-form ref="formRef"></el-form>    <child-component /></template><script setup lang="ts">import ChildComponent from './child.vue'import { getCurrentInstance } from 'vue'import { ElForm } from 'element-plus'// 方法一，这个变量名和 DOM 上的 ref 属性必须同名，会自动形成绑定const formRef = ref(null)console.log(formRef.value) // 这就获取到 DOM 了// 方法二const { proxy } = getCurrentInstance()proxy.$refs.formRef.validate((valid) => { ... })// 方法三，比如在 ts 里，可以直接获取到组件类型// 可以这样获取子组件const formRef = ref<InstanceType<typeof ChildComponent>>()// 也可以这样 获取 element ui 的组件类型const formRef = ref<InstanceType<typeof ElForm>>()formRef.value?.validate((valid) => { ... })</script>

<script setup>import { onMounted } from 'vue'// 请求接口函数const getData = () => {    xxxApi.then(() => { ... })}onMounted(() => {    getData()})</script>

<script setup>import { onBeforeUnmount, onDeactivated } from 'vue'// 组件卸载前，对应 Vue2 的 beforeDestroyonBeforeUnmount(() => {    clearTimeout(timer)    window.removeAddEventListener('...')})// 退出缓存组件，对应 Vue2 的 deactivatedonDeactivated(() => {    clearTimeout(timer)    window.removeAddEventListener('...')})</script>

<template>    <div>{{ count }}</div></template><script setup>import { ref, reactive } from 'vue'const count = ref(1)// 有人这么用 const arr = ref([])console.log(arr.value) // []// 也有人这么用，一个组件里所有的属性全部定义在一个对象里，有点 Vue2 data 的味道const data = reactive({    name: '沐华',    age: 18,    ...})console.log(data.name) // 沐华// 也有人一个组件里 ref 和 reactive 两种都用，随便你</script>

<script setup>import { reactive, toRef, toRefs } from 'vue'const data = reactive({    name: '沐华',    age: 18})// 这样虽然能拿到 name / age，但是会变成普通变量，没有响应式效果了const { name, age } = data// 取出来一个响应式属性const name = toRef(data, 'name')// 这样解构出来的所有属性都是有响应式的const { name, age } = toRefs(data)// 不管是 toRef 还是 toRefs，这样修改是会把 data 里的 name 改掉的// 就是会改变源对象属性，这才是响应式该有的样子name.value = '沐沐华华'</script>

watch: {    userId: 'getData',    userName (newName, oldName) {        this.getData()    },    userInfo: {        handler (newVal, newVal) { this.getData() },        immediate: true,        deep: true    }}

<script setup>import { watch, ref, reactive } from 'vue'const name = ref('沐华')const data = reactive({    age: 18,    money: 100000000000000000000,    children: []})// 监听 ref 属性watch(name, (newName, oldName) => { ... })// 监听其他属性、路由或者状态管理的都这样watch(    () => data.age,     (newAge, oldAge) => { ... })// 监听多个属性，数组放多个值，返回的新值和老值也是数组形式watch([data.age, data.money], ([newAge, oldAge], [newMoney, oldMoney]) => { ... })// 第三个参数是一个对象，为可配置项，有5个可配置属性watch(data.children, (newList, oldList) => { ... }, {    // 这两个和 Vue2 一样，没啥说的    immediate: true,    deep: true,    // 回调函数的执行时机，默认在组件更新之前调用。更新后调用改成post    flush: 'pre', // 默认值是 pre，可改成 post 或 sync    // 下面两个是调试用的    onTrack (e) { debugger }    onTrigger (e) { debugger }})</script>

// 回调函数接收一个参数，为清除副作用的函数watch(key, (newKey, oldKey, onInvalidate) => {    console.log('沐华')    // 获取DOM默认获取到的是更新前的dom，如果是flush: post，可以获取到更新后的dom    console.log('DOM节点：', dom.innterHTML)    onInvalidate(() => {        console.log(2222)    })})

// 停止监听const unwatch = watch('key', callback)const unwatchEffect = watchEffect(() => {})// 需要的时候手动停止监听unwatch()unwatchEffect()

<script setup>import { watchEffect } from 'vue'// 正常使用watchEffect(() => {    // 会自动收集这个函数使用到的属性作为依赖，进行监听    // 监听的是 userInfo.name 属性，不会监听 userInfo    console.log(userInfo.name)})// 有两个参数，参数一是触发监听回调函数，参数二是可选配置项watchEffect(() => {...}, {    // 这里是可配置项，意思和 watch 是一样的，不过这只有3个可配置的    flush: 'pre',    onTrack (e) { debugger }    onTrigger (e) { debugger }})// 回调函数接收一个参数，为清除副作用的函数，和 watch 的同理watchEffect(onInvalidate => {    console.log('沐华')    onInvalidate(() => {        console.log(2222)    })})</script>

watchEffect(() => {...}, {    flush: 'post',})// 和下面这个是一样的watchPostEffect(() => {})-----------------------------watchEffect(() => {...}, {    flush: 'sync',})// 和下面这个是一样的watchSyncEffect(() => {})

<script setup>import { computed } from 'vue'// 获取 url 上的 type 属性const type = computed(() => Number(this.$route.query.type || '0'))// 对象写法const visible = computed({    get () { return this.visible },    set (val) { this.$emit('input', val) }})// computed 第二个参数也是一个对象，调试用的const hehe = computed(参数一上面两种都可， {    onTrack (e) { debugger }    onTrigger (e) { debugger }})</script>

<script setup>import { nextTick} from 'vue'// 方式 一const handleClick = async () => {  await nextTick()  console.log('沐华')}// 方式二nextTick(() => {    console.log('沐华')})// 方式三nextTick().then(() => {    console.log('沐华')  })</script>

// xxx.jsexpport const getData = () => {}export default function unInstance () {    ...    return {...}}// xxx.vueimport unInstance, { getData } from 'xx.js'const { ... } = unInstance()onMounted(() => {    getData()})

// 父组件写法<template>    <child v-model:name="name" v-model:age="age" /></template><script setup>import { ref } from "vue"const name = ref('沐华')const age = ref(18)</script>// 子组件<script setup>const emit = defineEmits(['update:name', 'update:age'])const handleClick = () => {    console.log('点击了')    emit('update:name', '这是新的名字')}</script>

<script setup>import { useRoute, useRouter } from "vue-router"// route 对应 this.$routeconst route = useRoute()// router 对应 this.$routerconst router = useRouter()</script>

<template>    <div>1</div>    <div>2</div></template>

<style scoped>// 这样写不生效的话.el-form {    .el-form-item { ... }}// Vue2 中这样写/deep/ .el-form {    .el-form-item { ... }}// Vue3 中这样写:deep(.el-form) {    .el-form-item { ... }}</style>// 别再这样加一个没有 scoped 的 style 标签了，全都加到全局上去了// <style lang="scss">//  .el-form {//     .el-form-item { ... }//  }// </style>

<template>    <div class="name">沐华</div></template><script setup>import { ref } from "vue"const str = ref('#f00') // 红色</script><style scoped lang="scss">.name {    background-color: v-bind(str); // JS 中的色值变量 #f00 就赋值到这来了}</style>