共计 3373 个字符,预计需要花费 9 分钟才能阅读完成。
Vue 3 曾经稳固了相当长一段时间了。许多代码库都在生产环境中应用它,其他人最终都将不得不迁徙到 Vue 3。我当初有机会应用它并记录了我的谬误,上面这些谬误你可能想要防止。
应用 Reactive 申明原始值
数据申明在过来都是十分间接的,然而当初有很多帮忙函数供咱们应用。目前的规定是:
- 应用
reactive
申明Object, Array, Map, Set
- 应用
ref
申明String, Number, Boolean
为一个原始值应用 reactive
会返回一个正告,并且该值不会成为可响应式数据。
/* DOES NOT WORK AS EXPECTED */
<script setup>
import {reactive} from "vue";
const count = reactive(0);
</script>
矛盾的是,另一种形式是可行的。例如,应用 ref
来申明一个 Array
会在外部调用reactive
。
解构响应式数据
假如你有一个响应式对象领有 count
属性,并且有一个按钮来递增count
。
<template>
Counter: {{state.count}}
<button @click="add">Increase</button>
</template>
<script>
import {reactive} from "vue";
export default {setup() {const state = reactive({ count: 0});
function add() {state.count++;}
return {
state,
add,
};
},
};
</script>
上述逻辑相当间接,而且如预期的那样工作,但你可能会利用 javascript 的解构来做以下事件:
/* DOES NOT WORK AS EXPECTED */
<template>
<div>Counter: {{count}}</div>
<button @click="add">Increase</button>
</template>
<script>
import {reactive} from "vue";
export default {setup() {const state = reactive({ count: 0});
function add() {state.count++;}
return {
...state,
add,
};
},
};
</script>
代码看起来是一样的,而且依据咱们以前的教训应该是可行的,但事实上,Vue 的响应式跟踪是通过属性拜访进行的。这意味着咱们不能赋值或解构一个响应式对象,因为与第一个援用的响应式连贯曾经断开。这就是应用响应式帮忙函数的局限性之一。
对.value 感到困惑
同样的,应用 ref
的一个怪异模式可能也很难习惯。
Ref
接管一个值,并返回响应式对象。该值在对象外部的 .value
属性下可用。
const count = ref(0)
console.log(count) // {value: 0}
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
然而 ref
在模板文件中应用时会被解包,并且不须要.value
。
<script setup>
import {ref} from 'vue'
const count = ref(0)
function increment() {count.value++}
</script>
<template>
<button @click="increment">
{{count}} // no .value needed
</button>
</template>
然而要小心了!解包只在顶级属性中失效。上面的代码片段会生成[object Object]
。
// DON'T DO THIS
<script setup>
import {ref} from 'vue'
const object = {foo: ref(1) }
</script>
<template>
{{object.foo + 1}} // [object Object]
</template>
正确地应用 .value
须要工夫。只管某些时候我会遗记如何应用,然而应用它的频率越来越高。
触发事件
自从 Vue 的最后公布以来,子组件就能够与父组件应用 emit
来通信。你只须要增加自定义事件监听器来监听一个事件。
// 子组件
this.$emit('my-event')
// 父组件
<my-component @my-event="doSomething" />
当初,emit
须要应用 defineEmits
来进行申明。
<script setup>
const emit = defineEmits(['my-event'])
emit('my-event')
</script>
另一件要记住的事件是,defineEmits
和 defineProps
都不须要被导入。它们在应用 script setup
时主动可用。
<script setup>
const props = defineProps({foo: String})
const emit = defineEmits(['change', 'delete'])
// setup code
</script>
最初,因为事件当初必须被申明,所以不须要应用 .native
修饰符,事实上它曾经被移除了。
申明附加选项
Options API 办法有几个属性在 script setup
中是不被反对的。
name
inheritAttrs
- 插件或库所需的自定义选项
解决办法是依照script setup
RFC 的定义,在同一个组件中设置两个不同的脚本。
<script>
export default {
name: 'CustomName',
inheritAttrs: false,
customOptions: {}}
</script>
<script setup>
// script setup logic
</script>
应用响应式转换
Reactivity Transform 是 Vue 3 的一个实验性但有争议的性能,目标是简化组件的申明形式。它的想法是利用编译时的转换来主动解包一个 ref
,并使.value
过期。但当初它被放弃了,并将在 Vue 3.3 中被删除。它依然能够作为一个包应用,但因为它不是 Vue 外围的一部分,所以最好不要在它身上投入工夫。
定义异步组件
以前的异步组件是通过将其蕴含在一个函数中来申明的。
const asyncModal = () => import('./Modal.vue')
从 Vue 3 开始,异步组件须要应用 defineAsyncComponent
帮忙函数来显式地定义。
import {defineAsyncComponent} from 'vue'
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))
在模板中应用多余的包裹元素
在 Vue 2 中,组件模板须要一个繁多的根元素,这有时会引入不必要的包裹元素。
<!-- Layout.vue -->
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>
当初不再须要这样了,因为当初反对多个根元素。🥳
<!-- Layout.vue -->
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
应用谬误的生命周期
所有的组件生命周期事件都被重新命名,要么增加 on
前缀,要么齐全扭转名称。你能够在上面的图表中查看所有的变动。
不看文档
最初,官网文档曾经进行了批改以反映新的 API,并包含许多有价值的阐明、指南和最佳实际。即便你是一个经验丰富的 Vue 2 工程师,你也肯定会通过浏览文档学到一些新货色。
总结
每个框架都有一个学习曲线,而 Vue 3 的学习曲线无疑比 Vue 2 的更平缓。我依然不置信两个版本之间的迁徙工作是正当的,但组合式 API 要整洁得多,在你把握了它之后会感觉很天然。
最初,请记住:
犯错比什么都不做要好得多。
Making mistakes is a lot better than not doing anything.
以上就是本文的全部内容。如果对你有所帮忙,欢送点赞、珍藏、转发~