Rumah > Artikel > hujung hadapan web > Analisis kod contoh pembangunan Vue3
Analisis kod contoh pembangunan Vue3
- 王林ke hadapan
- 2023-05-17 09:44:181677semak imbas
Dapatkan ini
Menggunakan ini dalam setiap komponen dalam Vue2 menunjukkan contoh komponen semasa Ini juga mengandungi perkara yang dipasang secara global this.xxx semuanya disertakan
Tiada ini dalam Vue3. Jika anda mahukan penggunaan yang serupa, terdapat dua cara Satu ialah mendapatkan contoh komponen semasa, dan satu lagi adalah untuk mendapatkan contoh global Anda boleh mencetaknya dan lihat di bawah
<script setup>
import { getCurrentInstance } from 'vue'
// proxy 就是当前组件实例，可以理解为组件级别的 this，没有全局的、路由、状态管理之类的
const { proxy, appContext } = getCurrentInstance()
// 这个 global 就是全局实例
const global = appContext.config.globalProperties
</script>Pendaftaran global (harta/kaedah) )
Dalam Vue2, perkara yang perlu kita pasang secara global biasanya seperti berikut, dan kemudian dalam semua komponen, kita boleh mendapatkan this.xxx
Vue.prototype.xxx = xxxmelalui
Tetapi dalam Vue3 , kita tidak boleh menulisnya seperti ini Ubah Ia menjadi objek global yang boleh diakses oleh semua komponen, yang merupakan objek contoh global yang disebutkan di atas Sebagai contoh, daftar main.js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 添加全局属性
app.config.globalProperties.name = '沐华' secara global dalam dan panggil
<script setup>
import { getCurrentInstance } from 'vue'
const { appContext } = getCurrentInstance()
const global = appContext.config.globalProperties
console.log(global.name) // 沐华
</script>Dapatkan DOM<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>
PermulaanDalam Vue2, apabila memasuki halaman, minta antara muka atau beberapa operasi permulaan lain, biasanya diletakkan. dalam atau created, manakala dalam Vue3, mounted dan beforeCreated Kedua-dua cangkuk ini tidak diperlukan lagi, kerana persediaan dilaksanakan sebelum kedua-dua ini, dan ia akan menjadi berlebihan jika anda masih memerlukannya created
beforeCreated / created / beforeMounted / mountedsetup Pertama, gunakan onMounted dengan
dua Cangkuk ini, dalam Vue3 hanya menamakan semula fungsi cangkuk
<script setup> import { onMounted } from 'vue' // 请求接口函数 const getData = () => { xxxApi.then(() => { ... }) } onMounted(() => { getData() }) </script>ref dan reaktif
biasanya digunakan Untuk mencipta jenis asas,$oncehook: BeforeDestroy, yang kedua-duanya digunakan untuk mencipta objek responsif, biasanya digunakan untuk mencipta jenis responsif Ini secara rasmi disyorkan, tetapi ia tidak selalunya berlaku dalam realiti > untuk mentakrif tatasusunan, dan sesetengah orang hanya mentakrifkan satu - untuk komponen, dan semua data diletakkan di dalam, sama seperti
Vue2, sesetengah orang juga menggunakan
. Terdapat dua perkara yang anda perlukan untuk mengetahui:beforeDestroy / deactivated
Jika rujukan dihantar dalam Jenis, kod sumber dalaman juga dilaksanakan dengan memanggil ref reactiverefreactivedata
, hanya gunakannya secara langsung, tetapi apabila digunakan dalam JS, anda perlu lulus
Dapatkan, seperti berikut. Kerana ref mengembalikan objek pembalut<script setup> import { onBeforeUnmount, onDeactivated } from 'vue' // 组件卸载前，对应 Vue2 的 beforeDestroy onBeforeUnmount(() => { clearTimeout(timer) window.removeAddEventListener('...') }) // 退出缓存组件，对应 Vue2 的 deactivated onDeactivated(() => { clearTimeout(timer) window.removeAddEventListener('...') }) </script>refMengapa perlureactivemengembalikan objek pembalut? Kita semua tahu bahawa data dalam Vue2 mengembalikan objek Oleh kerana jenis rujukan objek boleh digunakan sebagai proksi atau rampasan, jika hanya jenis asas dikembalikan, ia disimpan dalam tindanan dan dikitar semula selepas pelaksanaan dalam execution stack , tiada cara untuk menambah proksi atau rampasan, dan secara semula jadi tiada cara untuk menjejaki perubahan seterusnya, jadi kita perlu mengembalikan objek, supaya kita boleh mempunyai -
toRef dan toRefs
dan bukannyaref. Kedua-dua perkara biasa ini digunakan Untuk membuat rujukan responsif, ia digunakan terutamanya untuk mengekstrak atribut daripada objek responsif, atau menyahkonstruk nilai atribut yang telah dinyahbina masih merupakan atribut responsif dua dekonstruksi langsung, kesan responsif akan hilangtemplate.valueterutamanya untuk memudahkan kita menggunakan pembolehubah langsung . Dan apabila kita mengubah suai
ref Perbezaan antara keduanya: dengan s dan tanpa s, ia bermaksud tunggal dan jamak, yang bermaksud mengambil satu dan mengambil satu. bunch
<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>watch
watch digunakan untuk memantau sifat sedia ada dan melakukan operasi tertentu apabila ia berubah Terdapat tiga kaedah penulisan yang biasa digunakan dalam Vue2:
<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>dan pemantauan. dalam Vue3 Cara penulisan adalah lebih kaya
Jam tangan Vue3 ialah fungsi yang boleh menerima tiga parameter Parameter pertama ialah atribut yang dipantau, dan parameter kedua ialah fungsi panggil balik yang menerima nilai baharu dan lama nilai. Parameter Ketiga ialah item konfigurasi xxx
watch: {
userId: 'getData',
userName (newName, oldName) {
this.getData()
},
userInfo: {
handler (newVal, newVal) { this.getData() },
immediate: true,
deep: true
}
}data.xxx Mengenai kesan sampingan, fungsi panggil balik jam tangan boleh menerima parameter ketiga, iaitu fungsi untuk mengosongkan kesan sampingan Mekanisme pelaksanaannya dipanggil sebelum mengemas kini secara lalai. seperti kod berikut, apabila kunci mencetuskan kemas kini akan mencetak xxx dahulu dan kemudian Jika anda perlu memanggilnya selepas kemas kini, anda boleh menambah dalam item konfigurasi ketiga jam tangan >
<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>Pemantauan belum selesai lagiYou Da: Hehe~watchEffectSelain menonton, Vue3 juga menambah watchEffect. Perbezaannya ialah:
222watch memantau satu atau lebih nilai masuk Apabila dicetuskan, ia akan mengembalikan nilai baharu dan nilai lama, dan tidak akan dilaksanakan buat kali pertama secara lalai <.> 沐华flush: post
清除副作用和副作用的刷新时机是一样的，区别是 watch 中会作为回调的第三个参数传入，watchEffect 中是回调函数的第一个参数
正常情况下组件销毁/卸载后这两都会自动停止监听，但也有例，比如异步的方式在 setTimeout 里创建的监听就都需要手动停止监听，停止方式如下
// 停止监听
const unwatch = watch('key', callback)
const unwatchEffect = watchEffect(() => {})
// 需要的时候手动停止监听
unwatch()
unwatchEffect()watchEffect 使用：
<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 或 sync 时，可以直接使用别名，如下
watchEffect(() => {...}, {
flush: 'post',
})
// 和下面这个是一样的
watchPostEffect(() => {})
-----------------------------
watchEffect(() => {...}, {
flush: 'sync',
})
// 和下面这个是一样的
watchSyncEffect(() => {})computed
Vue2 中 computed 最见的使用场景一般有： mapGetters/mapState 获取状态管理的属性、 获取 url 上的属性、条件判断、类型转换之类的，支持函数和对象两种写法
而 Vue3 中 computed 不再是一个对象，而是一个函数，用法其实基本差不多，函数第一个参数是侦听器源，用于返回计算的新值，也支持对象写法，第二个参数可用于调试
<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>nextTick
nextTick 的使用方法，除了不能用 this 其他的和 Vue2 一模一样，还是三种方式
<script setup>
import { nextTick} from 'vue'
// 方式 一
const handleClick = async () => {
await nextTick()
console.log('沐华')
}
// 方式二
nextTick(() => {
console.log('沐华')
})
// 方式三
nextTick().then(() => {
console.log('沐华')
})
</script>mixins 和 hooks
Vue2 中逻辑的抽离复用一般用 mixins，缺点有三：
没有独立命名空间，mixins 会和组件内部产生命名冲突
不去翻代码不知道引入的 mixins 里面有啥
引入多个 mixins 时不知道自己使用的是来自哪一个 mixins 的
在Vue3中，逻辑可重用的hooks语法实际上是一个函数，可以接受参数并返回值，从而被使用。在Vue3中，编写封装公共方法的方法与平时相同
// xxx.js
expport const getData = () => {}
export default function unInstance () {
...
return {...}
}
// xxx.vue
import unInstance, { getData } from 'xx.js'
const { ... } = unInstance()
onMounted(() => {
getData()
})关于 hooks 如何写出更优雅的代码，还个需要多写，多实践
组件通信
Vue3 组件通信的方式，有如下几种
props + defineProps
defineEmits
defineExpose / ref
useAttrs
v-model(支持多个)
provide / inject
Vuex / Pinia
关于 Vue 组件通信的使用方式，去年我写过一篇文章，上面都罗列的很详细了，就不搬过来了
Vue3的8种和Vue2的12种组件通信
多个 v-model
Vue2 中每个组件上只能写一个 v-model，子组件没有写 model 的话，默认在 props 接收 value 即可，修改就是用 this.$emit('input') 事件
Vue3 中每个组件每个组件上支持写多个 v-model，没有了 .sync 和 model 重命名的操作，也不需要了，写v-model 的时候就需要把命名一起写上去了，如下：
// 父组件写法
<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>状态管理
Vuex 会的就不用说了，不会的就直接学 Pinia 吧
Pinia 的使用方式，我之前也写过一篇文章，也不搬过来了
上手 Vue 新的状态管理 Pinia，一篇文章就够了
路由
Vue2 中的 $route 和 $router 如下，可以自己打印出来看一下
<script setup>
import { useRoute, useRouter } from "vue-router"
// route 对应 this.$route
const route = useRoute()
// router 对应 this.$router
const router = useRouter()
</script>template
Vue2 中只能有一个根节点，而 Vue3 中支持多个根节点，这个大家都知道
其实本质上 Vue3 每个组件还是一个根节点，因为 DOM 树只能是树状结构的，只是 Vue3 在编译阶段新增了判断，如果当前组件不只一个根元素，就添加一个 fragment 组件把这个多根组件的给包起来，相当于这个组件还是只有一个根节点
<template>
<div>1</div>
<div>2</div>
</template>CSS 样式穿透
Vue2 中在 scoped 中修改子组件或者组件库中的组件样式，改不了的情况下，就可以用样式穿透，不管是 Less 还是 SASS 都是用 /dee/ .class {} 来做样式穿透，而 Vue3 中就不支持 /deep/ 的写法了，换成 :deep(.class)
<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>CSS 绑定 JS 变量
就是 CSS 中可以使用 JS 的变量来赋值，如下
<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>Atas ialah kandungan terperinci Analisis kod contoh pembangunan Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!