全局api及组件
vue3中的全局api改为需要通过import引入，为了支持tree-shaking， 如
import { h, Transition, nextTick } from 'vue'
app.config.globalProperties
Vue.prototype
setup
需要return 出变量才能在其他地方使用
script setup
导入组件直接import就可以，无需放components中
props用defineProps函数接收， 用与组件使用props中的数据
emits用defineEmits函数接收，用于组件触发emit函数
声明的变量函数都可以在模板或其他位置使用
递归组件使用直接引入自身就行
teleport
vue3新增的一个标签， 拥有一个to属性可以将标签中包裹的dom结构插到to属性指定的选择器中，不过在插入前要保证这个选择器可以找到对象dom结构，如果是晚于teleport挂载的如它的父级结构可以先用v-if控制下， 多次在同个节点进行teleport挂载则按顺序进行追加
emits
新增的配置项，值可以是个数组也可以是个对象，类似props， 为对象时key为emit事件名，值为一个function， params为emit传入的值，对emit事件的传值进行验证看是否符合预期，需要返回一个布尔值，如果返回值为false则报一个wraning但没有阻断效果，也不知道异步，在写emit事件时最好是定义一下放到emits中
在vue3中已将native修饰符移除（因为对于原生事件透传绑定组件已经天然支持，无需这个修饰符）
在给组件绑定emit事件的时候的时候最好在emits中声明表示这个事件属于向父组件触发的事件而非原生事件触发， 如果不进行声明当你绑定事件跟原生事件重名时如绑定一个click，在触发是就会触发两次
- 一次来自 $emit()。
- 另一次来自应用在根元素上的原生事件监听器。
v-model
vue3中支持多个v-model，vue3版本中已经不是value跟input的语法糖了而是modelValue与update:modelVlaue来进行更新，并移除的.sync
<ChildComponent v-model="pageTitle" /><!-- 是以下的简写: --><ChildComponent :model Value="pageTitle" @update:modelValue="pageTitle = $event" /><ChildComponent v-model:title="pageTitle" /><!-- 是以下的简写: --><ChildComponent :title="pageTitle" @update:title="pageTitle = $event" /><ChildComponent v-model:title.capiltalize="pageTitle" />// 自定义修饰符，可以在组件中的 props 的 modelModifiers 接收到
modifiers是在子组件中用于收集传入指令的，默认v-model是在modelModifiers中接受，具名的v-model 如 v-model.title 是在titleModifiers中接受，如果有传入修饰符再手动传入titleModifiers则手动传入的不生效，会被内置的取代， 如果没有传入修饰符则可以手动bind一个名为titleModifiers的变量
template + v-for
使用时要把key写在template上
同个元素同时使用v-if 跟v-for时在2.x版本中v-for的优先级会更高，而在3.x版本中v-if总是优先于v-for生效 如果组件时用script setup的则无法通过应用调用组件方法，得是option api形式才行 vue3中通过createApp来实例化一个app实例，代替以前的new Vue创建vue实例，Vue.extend在vue3中已被移除因为vue3已经没有类的概念，而是通过createApp创建一个vue app出来因此 vue3的全局api改动 可以在app实例中使用provide 在vue3中h已改为全局导入，render中不在传入h， 在h中使用组件不能再通过传入组件名字符串的形式，而是需要加多一层resolveComponent包裹不然不生效 vue2.x中的指令周期 vue3.x中的指令周期 data数据的合并为浅层合并 在 Vue 2.x 中，生成的 $data 是： 在 3.0 中，其结果将会是： 监听数组变化除非给数组直接赋值不然都需要加deep选项才能监听到，vue3不能在通过那7个变异方法来触发数组的依赖更新，加deep后即使是通过索引新增值或修改值都可以被监听到 vue3中watch的改变就是数组通过索引新增修改值，对象通过点的方式新增属性现在都能被监听到了（vue2中是不行的，这得益于proxy），只是以前监听数组是不需要deep的而现在要了，行为跟普通对象趋于一致。v-if 与 v-for
修饰符native移除
Ref(引用)
在v-for中使用时ref不在自动处理成一个数组而是不断赋值也就是只会存储最后一个，如果需要收集一整组需要给ref绑定一个函数自己手动收集每一项
使用v-for 循环时, 使用ref总会获取到的是最后的元素, 必须使用函数, 手动通过索引赋值,
不能用push, 会在更新的时候造成bug, 元素会重复<BCom v-for="item in 5" :key="item" :ref="(el) => getBNode(el, item)" :num="item" />
createApp
const Profile = Vue.extend({
template: '<div></div>
})
new Profile().$mouth('#point')
// 以改写为
Vue.createApp({
template: '<div></div>
}).mount('#point')
2.x 全局 API
3.x 实例 API (
app
)
Vue.config
app.config
Vue.config.productionTip
移除
Vue.config.ignoredElements
app.config.compilerOptions.isCustomElement
Vue.component
app.component
Vue.directive
app.directive
Vue.mixin
app.mixin
Vue.use
app.use
Vue.prototype
app.config.globalProperties
Vue.extend
移除，用createApp生成vue实例
Provide/Inject
app.provide('guide', 'vue 3 guide')
h
如果传入的是一个组件对象就可以不需要用resolveComponent包裹// vue2.x
{
render(h){
return h('some-component')
}
}
// vue3.x
import { h, resolveComponent } form 'vue'
{
setup() {
// 可以在setup中返回jsx 注意需要在外层套一层函数， 不然不生效
return () => h(resolveComponent('some-component'))
}
}
directive
mixin
const Mixin = {
data() {
return {
user: {
name: 'Jack',
id: 1
}
}
}
}
const CompA = {
mixins: [Mixin],
data() {
return {
user: {
id: 2
}
}
}
}
{
"user": {
"id": 2,
"name": "Jack"
}
}
{
"user": {
"id": 2
}
}
watch的改变
注：在vue2中即使加deep也无法监听到数组通过索引方式去新增值跟修改值
如何在vue2中使用watch
若有收获，就点个赞吧
0 人点赞
