Vue3开发实例代码分析
获取 this
Vue2 中每个组件里使用 this 都指向当前组件实例,this 上还包含了全局挂载的东西,都知道 this.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) }) })
监听还没完呢
尤大:嘿嘿~
watchEffect
Vue3 中除了 watch 还增加了一个 watchEffect。区别是:
watch 是对传入的一个或多个值进行监听,触发时会返回新值和老值,且默认第一次不会执行
watchEffect 是传入一个立即执行函数,所以默认第一次就会执行,且不需要传入监听内容,会自动收集函数内的数据源作为依赖,当依赖发生变化时会重新执行函数(有点像computed的味道),而且不会返回新值和老值
清除副作用和副作用的刷新时机是一样的,区别是 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>
以上就是Vue3开发实例代码分析的详细内容,更多请关注www.sxiaw.com其它相关文章!