Maison > Article > interface Web > Analyse de code d'exemple de développement Vue3
Analyse de code d'exemple de développement Vue3
- 王林avant
- 2023-05-17 09:44:181677parcourir
Obtenez ceci
Dans chaque composant de Vue2, cela pointe vers l'instance actuelle du composant. Celle-ci contient également des éléments montés globalement. Nous savons tous que this.xxx a toutthis.xxx 啥都有
而 Vue3 中没有 this，如果想要类似的用法有两种，一是获取当前组件实例，二是获取全局实例，如下自己可以去打印出来看看
<script setup>
import { getCurrentInstance } from 'vue'
// proxy 就是当前组件实例，可以理解为组件级别的 this，没有全局的、路由、状态管理之类的
const { proxy, appContext } = getCurrentInstance()
// 这个 global 就是全局实例
const global = appContext.config.globalProperties
</script>全局注册(属性/方法)
Vue2 中我们要往全局上挂载东西通常就是如下，然后在所有组件里都可以通过 this.xxx 获取到了
Vue.prototype.xxx = xxx
而 Vue3 中不能这么写了，换成了一个能被所有组件访问到的全局对象，就是上面说的全局实例的那个对象，比如在 main.js 中做全局注册
// main.js
import { 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.globalProperties
console.log(global.name) // 沐华
</script>获取 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>初始化
Vue2 中进入页面就请求接口，或者其他一些初始化的操作，一般放在 created 或 mounted，而 Vue3 中 beforeCreated 和 created 这俩钩子就不用了，因为 setup 在这俩之前执行，还要这俩的话就多此一举了
所以但凡是以前你用在 beforeCreated / created / beforeMounted / mounted 这几个钩子里的内容，在 Vue3 中要么放在 setup 里，要么放在 onMounted 里
<script setup>
import { onMounted } from 'vue'
// 请求接口函数
const getData = () => {
xxxApi.then(() => { ... })
}
onMounted(() => {
getData()
})
</script>解除绑定
Vue2 中一般清除定时器、监听之类的操作有两种方法：
一是用
$once搭配hook: BeforeDestroy使用，这个 Vue3 不支持了二是用
beforeDestroy / deactivated这俩钩子，Vue3 中只是把钩子函数重命名了一下
<script setup>
import { onBeforeUnmount, onDeactivated } from 'vue'
// 组件卸载前，对应 Vue2 的 beforeDestroy
onBeforeUnmount(() => {
clearTimeout(timer)
window.removeAddEventListener('...')
})
// 退出缓存组件，对应 Vue2 的 deactivated
onDeactivated(() => {
clearTimeout(timer)
window.removeAddEventListener('...')
})
</script>ref 和 reactive
这两都是用于创建响应式对象，ref 通常用于创建基础类型，reactive 通常用于创建响应式，这是官方推荐的，现实中也不尽然，有人也用 ref 来定义数组，也有人一个组件只定义一个 reactive，所有数据都放里面，就像 Vue2 的 data 一样，也有人都用
需要知道的有两点：
ref如果传入的是引用类型，内部源码也是调用reactive来实现的ref返回的属性在template中使用，直接用就是了，但是在 JS 中使用，需要通过.value获取，如下。因为 ref 返回的是一个包装对象
<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>为什么 ref 要返回一个包装对象？Vue2 中 data 都是返回一个对象这都知道
因为对象引用类型，可以用来做代理或劫持，如果只返回基础类型的话，存储在栈中，执行栈里执行完就回收了，没有办法添加代理或劫持，自然就没办法追踪后续的变化，所以不得不返回一个对象，这样才能有响应式
toRef 和 toRefs
这两共同点就是用来创建响应式的引用的，主要用来取出响应式对象里的属性，或者解构响应式对象，解构出来的属性值依然是响应式属性，如果不用这两直接解构的话是会丢失响应式效果的
主要就是方便我们使用直接变量 xxx，而不需要 data.xxx。并且我们修改 xxx 的时候也是直接修改源对象属性的
这两的区别：带 s 和不带 s，就是单数和复数嘛，意思就是取一个和取一堆咯
<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
watch 就是用来监听一个已有属性，发生变化的时候做某些操作，Vue2 中常用有如下三种写法
watch: {
userId: 'getData',
userName (newName, oldName) {
this.getData()
},
userInfo: {
handler (newVal, newVal) { this.getData() },
immediate: true,
deep: true
}
}而 Vue3 中监听的写法就丰富得多了
Vue3 的 watch 是一个函数，能接收三个参数，参数一是监听的属性，参数二是接收新值和老值的回调函数，参数三是配置项
<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 触发更新时会先打印 222 再打印 沐华，如果需要在更新之后调用，可以在 watch 第三个配置项中添加 flush: post
// 回调函数接收一个参数，为清除副作用的函数
watch(key, (newKey, oldKey, onInvalidate) => {
console.log('沐华')
// 获取DOM默认获取到的是更新前的dom，如果是flush: post，可以获取到更新后的dom
console.log('DOM节点：', dom.innterHTML)
onInvalidate(() => {
console.log(2222)
})
})Enregistrement global (propriété/méthode). )Dans Vue2, nous avons besoin de monter les choses globalement comme suit, puis cela peut être obtenu via this.xxx dans tous les composants// 停止监听
const unwatch = watch('key', callback)
const unwatchEffect = watchEffect(() => {})
// 需要的时候手动停止监听
unwatch()
unwatchEffect()
Cependant, cela ne peut pas être écrit dans Vue3, et cela. est remplacé par un objet accessible à tous les composants. L'objet global que vous obtenez est l'objet de l'instance globale mentionnée ci-dessus. Par exemple, effectuez un enregistrement global dans main.js<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>CallwatchEffect(() => {...}, {
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>Initialisationcreated ou monté code>, tandis que dans Vue3, <code>beforeCreated et created Ces deux hooks ne sont pas nécessaires, car l'installation est exécutée avant ces deux hooks. Si vous avez toujours besoin de ces deux hooks, ce sera superfluDonc tant que vous l'avez utilisé dans beforeCreated /created/beforeMounted / code> Le contenu de ces hooks est soit placé dans setup ou onMounted dans Vue3🎜<script setup>
import { nextTick} from 'vue'
// 方式 一
const handleClick = async () => {
await nextTick()
console.log('沐华')
}
// 方式二
nextTick(() => {
console.log('沐华')
})
// 方式三
nextTick().then(() => {
console.log('沐华')
})
</script>🎜Unbinding🎜🎜Généralement effacé dans Vue2 Il existe deux méthodes pour les opérations telles que les minuteries et la surveillance : 🎜🎜🎜🎜La première consiste à utiliser $once avec hook : BeforeDestroy, qui n'est plus supporté par Vue3🎜🎜🎜 🎜La seconde consiste à utiliser les deux hooks beforeDestroy / deactivated Dans Vue3, la fonction hook est simplement renommée🎜🎜<.>// xxx.js
expport const getData = () => {}
export default function unInstance () {
...
return {...}
}
// xxx.vue
import unInstance, { getData } from 'xx.js'
const { ... } = unInstance()
onMounted(() => {
getData()
})🎜ref et reactive🎜🎜tous deux sont utilisés pour créer un objet réactif, ref est généralement utilisé pour créer des types de base et reactive est généralement utilisé pour créer des types réactifs . Ceci est officiellement recommandé, mais ce n'est pas toujours le cas dans la réalité. Certaines personnes utilisent également ref pour définir un tableau, certaines personnes ne définissent qu'un seul réactif pour chaque composant, et toutes les données y sont placées, tout comme les data de Vue2, certaines personnes l'utilisent 🎜🎜 Il y a deux choses que vous devez savoir : 🎜🎜🎜🎜ref Si un type de référence est transmis, le code source interne est également implémenté en appelant reactive 🎜🎜🎜🎜ref Les attributs renvoyés sont utilisés dans template et peuvent être utilisés directement. Cependant, lorsqu'ils sont utilisés dans JS, ils doivent être obtenus via .value, comme suit. Parce que ref renvoie un objet wrapper🎜🎜
// 父组件写法
<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>🎜Pourquoi ref renvoie-t-il un objet wrapper ? Nous savons tous que les données dans Vue2 renvoient un objet🎜🎜Parce que le type de référence d'objet peut être utilisé comme proxy ou détournement, si seul le type de base est renvoyé, il est stocké dans la pile et est recyclé après exécution dans la pile d'exécution. Il n'y a aucun moyen de l'ajouter par proxy ou détournement, naturellement il n'y a aucun moyen de suivre les modifications ultérieures, vous devez donc retourner un objet, pour pouvoir avoir du responsive 🎜🎜toRef et toRefs🎜🎜. pour créer des références réactives, principalement utilisées pour les récupérer. Attributs dans des objets réactifs, ou déconstruire des objets réactifs, les valeurs d'attribut déconstruites sont toujours des attributs réactifs. Si vous n'utilisez pas ces deux déconstructions directes, vous perdrez l'effet réactif🎜. 🎜C'est principalement pour nous faciliter l'utilisation de variables directes xxx, au lieu de data.xxx. Et lorsque nous modifions xxx, nous modifions également directement les attributs de l'objet source. La différence entre les deux : avec s et sans s, c'est le singulier et le pluriel, ce qui signifie en prendre un et en prendre un tas 🎜. <script setup>
import { useRoute, useRouter } from "vue-router"
// route 对应 this.$route
const route = useRoute()
// router 对应 this.$router
const router = useRouter()
</script>🎜watch🎜🎜watch est utilisé pour surveiller une propriété existante et effectuer certaines opérations lorsqu'elle change. Il existe trois méthodes d'écriture couramment utilisées dans Vue2🎜<template>
<div>1</div>
<div>2</div>
</template>🎜Et les méthodes d'écriture de surveillance dans Vue3 sont beaucoup plus riches🎜🎜Vue3 watch est une fonction. qui peut recevoir trois paramètres. Le premier paramètre est l'attribut surveillé, le deuxième paramètre est la fonction de rappel qui reçoit la nouvelle valeur et l'ancienne valeur, et le troisième paramètre est l'élément de configuration🎜<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>🎜 Concernant les effets secondaires, dans le rappel de la montre. fonction Il peut recevoir le troisième paramètre, qui est une fonction pour effacer les effets secondaires. Son mécanisme d'exécution est appelé par défaut avant la mise à jour. Par exemple, dans le code suivant, lorsque la clé déclenche la mise à jour, elle imprimera d'abord 222. puis imprimez Muhua , si vous devez l'appeler après la mise à jour, vous pouvez ajouter flush: post dans le troisième élément de configuration de watch, 🎜<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>🎜 La surveillance n'est pas encore terminée🎜🎜Youda : Hehe~🎜🎜watchEffect 🎜🎜En plus de regarder, Vue3 ajoute également un watchEffect. La différence est la suivante : 🎜🎜🎜🎜watch consiste à surveiller une ou plusieurs valeurs transmises. Lorsqu'elle est déclenchée, elle renverra la nouvelle valeur et l'ancienne valeur, et ne sera pas exécutée pour la première fois par défaut 🎜🎜🎜. 🎜watchEffect consiste à transmettre une valeur et à l'exécuter immédiatement, elle sera donc exécutée pour la première fois par défaut et il n'est pas nécessaire de transmettre le contenu de surveillance. Il collectera automatiquement les sources de données dans la fonction. dépendances. Lorsque les dépendances changent, la fonction sera réexécutée (un peu comme calculée), et elle ne renverra ni la nouvelle valeur ni l'ancienne valeur 🎜清除副作用和副作用的刷新时机是一样的，区别是 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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment résoudre le problème selon lequel une fois le projet vue3 empaqueté et publié sur le serveur, la page d'accès s'affiche videArticle suivant：Comment résoudre le problème selon lequel une fois le projet vue3 empaqueté et publié sur le serveur, la page d'accès s'affiche vide
Articles Liés
Voir plus- À propos de vue utilisant le validateur : VeeValidate3
- Quelles sont les différences entre calculé et méthode dans Vue ?
- Introduction à la méthode de désactivation de la vérification Eslint dans le projet vue
- Introduction à plusieurs méthodes de définition de modèles de composants dans Vue.js
- Quatre endroits pour implémenter AJAX dans les applications Vue