|
↓推荐关注↓
距离Vue3发布已经过去一年多时间了，从Vue2到Vue3是一个不小的升级，包括周边生态等。 虽然目前大多数开发者们在使用的仍旧以 Vue2 为准，但Vue3显然是Vue开发者们未来必须面对的，而且前不久Vue官方也发布了Vue2.7.0，使得Vue2可以兼容Vue3的API，这让开发者可以在项目不升级Vue3的情况下依旧可以使用Vue3的开发方式，这为Vue2开发者学习Vue3提供了一个非常好的过渡途径。 Vue3之于Vue2最大的变化，当属 composition API 了，而除了引入 composition API 外，一些我们在Vue2上经常使用的东西到了Vue3时也发生了不小的变化，本文将介绍一些有Vue2到Vue3中几个比较重要且常用的知识点，欢迎感兴趣的同学阅读。 v-model支持多个v-model 在 Vue3 中，可以通过参数来达到一个组件支持多个 v-model 的能力。 // 父组件 <template> < childv-model= "name"v-model:email= "email"/> < p> 姓名：{{ name }} </ p> < p> 邮箱：{{ email }} </ p> < /template> < lang="ts" setup> import child from './ child.vue ' import { ref } from ' vue ' const name = ref<string>(' 张三 ') const email = ref<string>(' 666@qq.com ') </> // 子组件 <template> <button @click= "updateName">更新name</button> <button @click= "updateEmail">更新email</button> </template> < lang= "ts"setup> // 定义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') } </> 如果 v-model 没有使用参数，则其默认值为 modelValue ，如上面的第一个 v-model ，注意此时不再是像Vue2那样使用 $emit('input') 了，而是统一使用 update:xxx 的方式。 废弃 .sync 在Vue2中，由于一个组件只支持一个 v-model ，当我们还有另外的值也想要实现双向绑定更新时，往往用 .sync 修饰符来实现，而在Vue3中该修饰符已被废弃，因为 v-model 可以支持多个，所以 .sync 也就没有存在的必要了。 watch不同数据类型的监听 基础数据类型的监听： constname = ref<string>( '张三') watch(name, (newValue, oldValue) => { console.log( 'watch===', newValue, oldValue) }) 复杂数据类型的监听： interface UserInfo { name: string age: number } constuserInfo = 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里我们可以少一些不必要的代码了。 constname = ref<string>( '张三') constuserInfo = reactive({ age: 18 }) // 同时监听name和userInfo的age属性 watch([name, => userInfo.age], ([newName, newAge], [oldName, oldAge]) => { // }) watchEffectwatchEffect与watch的区别 相比 Vue2 ， Vue3多 了 watchEffect 这个API， watchEffect 传入一个函数参数，该函数会立即执行，同时会响应式的最终函数内的依赖变量，并在依赖发生改变时重新运行改函数。 constname = ref<string>( '张三') constage = ref<number>( 18) watchEffect( => { console.log( ` ${name.value}： ${age.value}` ) // 张三：18 }) setTimeout( => { name.value = '李四'// 李四：18 }, 3000) setTimeout( => { age.value = 20// 李四：20 }, 5000) 和watch的区别：
建议在大部分时间里使用 watch ，避免一些不必要的重复触发。 $attrs Vue3中， $attrs 包含父组件中除props和自定义事件外的所有属性集合。 不同于 Vue2 ， $attrs 包含了父组件的事件，因此 $listenners 则被移除了。 // 父组件 <template> < childid= "root"class= "test"name= "张三"@ confirm= "getData"/> < /template> < lang="ts" setup> const getData = => { console.log('log') } </ > // 子组件 < template> < div> < span> hello：{{ props.name }} </ span> </ div> </ template> < lang= "ts"> exportdefault{ inheritAttrs: false } </ > < lang= "ts"setup> constprops = defineProps([ 'name']) constattrs = useAttrs console.log( 'attrs', attrs) </ >
使用 v-bind 即可实现组件属性及事件透传： // 父组件 <template> < childcloseable@ close= "onClose"/> < /template> < lang="ts" setup> const onClose = => { console.log('close') } </ > // 子组件 < template> < div> < el-tagv-bind= "attrs"> 标签 </ el-tag> </ div> </ template> 使用 ref 访问子组件 在 Vue2 中，使用 ref 即可访问子组件里的任意数据及方法，但在 Vue3 中则必须使用 defineExpose 暴露子组件内的方法或属性才能被父组件所调用。 // 父组件 <template> < childref= "childRef"/> < /template> < lang="ts" setup> import { ref, onMounted } from 'vue' const childRef = ref onMounted( => { childRef.value.getData }) </ > // 子组件 < lang= "ts"setup> import{ defineExpose } from'vue' constgetData = => { console.log( 'getData') } constname = ref( '张三') defineExpose({ getData, name }) </ > - EOF - 点击标题可跳转 1、 一文掌握 vue3.2 setup 语法糖 2、 微软为 Vue.js 推出 Power BI 组件 3、 面试官问：Vue3 对比 Vue2 有哪些变化？ ↓推荐关注↓ 「大前端技术之路」分享 Web前端，Node.js、React Native等大前端技术栈精选 点赞和在看就是最大的支持 |
