Vue3之于Vue2最大的变化,当属composition API了,而除了引入composition API外,一些我们在Vue2上经常使用的东西到了Vue3时也发生了不小的变化,本文将介绍一些有Vue2到Vue3中几个比较重要且常用的知识点。
Options API与Composition API
Options API是把代码分类写在几个Option中:
export default {components: {},data() {},computed: {},watch: {},mounted() {},
}
Composition API没有固定的代码分类,可以自由按自己的逻辑组织代码结构。
当组件比较简单只有一个逻辑的时候,option模式可以很快浏览组件代码,可读性非常高,新手友好。但如果组件代码庞大复杂,option的缺陷就很明显,需要在各Option中横跳才能分清功能模块。这时Composition 模式就更有优势,处理同一个模块的自行组织或者提取hook,而这个需要开发者的自觉,优点即缺点,代码组织不规范就会造成混乱。
文中代码示例使用setup语法糖 + ts
v-model
支持多个v-model
在Vue3
中,可以通过参数来达到一个组件支持多个v-model
的能力。
// 父组件
<template><child v-model="name" v-model:email="email" /><p>姓名:{{ name }}</p><p>邮箱:{{ email }}</p>
</template><script lang="ts" setup>
import child from './child.vue'
import { ref } from 'vue'const name = ref<string>('张三')
const email = ref<string>('666@qq.com')
</script>
// 子组件
<template><button @click="updateName">更新name</button><button @click="updateEmail">更新email</button>
</template><script lang="ts" setup>
import {defineEmits} form 'vue'
// 定义emit
const emits = defineEmits<{(e: 'update:modelValue', value: string): void(e: 'update:email', value: string): void
}>()const updateName = () => {emits('update:modelValue', '李四')
}const updateEmail = () => {emits('update:email', '123456@qq.com')
}
</script>
如果v-model
没有使用参数,则其默认值为modelValue
,如上面的第一个v-model
,注意此时不再是像Vue2那样使用$emit('input')
了,而是统一使用update:xxx
的方式。
废弃.sync
在Vue2中,由于一个组件只支持一个v-model
,当我们还有另外的值也想要实现双向绑定更新时,往往用.sync
修饰符来实现,而在Vue3中该修饰符已被废弃,因为v-model
可以支持多个,所以.sync
也就没有存在的必要了。
watch
不同数据类型的监听
基础数据类型的监听:
const name = ref<string>('张三')
watch(name, (newValue, oldValue) => {console.log('watch===', newValue, oldValue)
})
复杂数据类型的监听:
interface UserInfo {name: stringage: number
}const userInfo = reactive<UserInfo>({name: '张三',age: 10
})
// 监听整个对象
watch(userInfo, (newValue, oldValue) => {console.log('watch userInfo', newValue, oldValue)
})// 监听某个属性
watch(() => userInfo.name, (newValue, oldValue) => {console.log('watch name', newValue, oldValue)
})
支持监听多个源
在Vue3
里,watch
多了一个特性,可以传入一个数组同时侦听多个数据,这比起Vue2
确实优雅多了,以往在Vue2
中为了实现同时监听多个数据,往往需要借助computed,现在在Vue3里我们可以少一些不必要的代码了。
const name = ref<string>('张三')
const userInfo = reactive({age: 18
})// 同时监听name和userInfo的age属性
watch([name, () => userInfo.age], ([newName, newAge], [oldName, oldAge]) => {//
})
watchEffect
watchEffect与watch的区别
相比Vue2
,Vue3多
了watchEffect
这个API,watchEffect
传入一个函数参数,该函数会立即执行,同时会响应式的最终函数内的依赖变量,并在依赖发生改变时重新运行改函数。
const name = ref<string>('张三')
const age = ref<number>(18)watchEffect(() => {console.log(`${name.value}:${age.value}`) // 张三:18
})setTimeout(() => {name.value = '李四' // 李四:18
}, 3000)setTimeout(() => {age.value = 20 // 李四:20
}, 5000)
和watch的区别:
- 运行时机不同,
watchEffect
会立即执行,相当于设置了immediate: true
的watch
。 -
watchEffect
无法获取改变前后的值。 - 与
watch
显示的指定依赖源不同,watchEffect
会自动收集依赖源。
$attrs
Vue3中,$attrs
包含父组件中除props和自定义事件外的所有属性集合。
不同于Vue2
,$attrs
包含了父组件的事件,因此$listenners
则被移除了。
// 父组件
<template><child id="root" class="test" name="张三" @confirm="getData" />
</template><script lang="ts" setup>
const getData = () => {console.log('log')
}
</script>// 子组件
<template><div><span>hello:{{ props.name }}</span></div>
</template><script lang="ts">
export default {inheritAttrs: false
}
</script><script lang="ts" setup>
import { defineProps, useAttrs} from 'vue'
const props = defineProps(['name'])const attrs = useAttrs()
console.log('attrs', attrs)
</script>
使用v-bind
即可实现组件属性及事件透传:
// 父组件
<template><child closeable @close="onClose" />
</template><script lang="ts" setup>
const onClose = () => {console.log('close')
}
</script>// 子组件
<template><div><el-tag v-bind="attrs">标签</el-tag></div>
</template>
<script lang="ts" setup>
import {useAttrs} from 'vue'
const attrs = useAttrs()
</script>
使用ref
访问子组件
在Vue2
中,使用ref
即可访问子组件里的任意数据及方法,但在Vue3
中则必须使用defineExpose
暴露子组件内的方法或属性才能被父组件所调用。
// 父组件
<template><child ref="childRef" />
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue'const childRef = ref()onMounted(() => {childRef.value.getData()
})
</script>// 子组件
<script lang="ts" setup>
import { defineExpose } from 'vue'const getData = () => {console.log('getData')
}
const name = ref('张三')defineExpose({getData,name
})
</script>
完毕~
学习参考:
vue3文档:https://cn.vuejs.org/guide/introduction.html
https://juejin.cn/post/7139721466722910245#heading-9
喜欢的朋友记得点赞、收藏、关注哦!!!