vue3与vue2的区别
全局属性
vue2
- 对于一些第三方插件，vue2中通常使用prototype原型来挂载到vue对象中
import Vue from 'vue'
Vue.prototype.$http=Axiox
Vue.prototype.$echart= Echart
vue3
- vue3中提供了一个名为
globalProperties的全局属性配置，可以代替vue2中的prototype
app.config.globalProperties.$http = Axios
app.config.globalProperties.$echart = Echart
- 使用$http
import {getCurrentInstance} from 'vue'
setup () {
const { ctx } = getCurrentInstance();
onMounted(() => {
console.log(ctx.$http)
})
.......
}
ref与v-for的生成
vue2
vue2中v-for与ref一起使用，批量模板引用的时候，获取的ref为一个数组
<div v-for="i in 3" ref="setItemRef" :key="i">{{i}}</div> //这里是数组
mounted() {
console.log(this.$refs.setItemRef)
},
vue3
vue3 中ref绑定的是一个函数，
<div v-for="item in 3" :ref="setItemRef"></div> //这里绑定的是函数
setup(){
let itemRefs = []
const setItemRef = el => {
itemRefs.push(el)
}
onMounted(() => {
console.log(itemRefs)
})
}
二者获取ref的dom方式有变化，但是获取的结果相同
异步组件
在路由中，常常使用懒加载的方式来引入组件
vue2
component: () => import('@/views/homePage/index.vue'),
vue3
在vue3中引入了一个新的方法 --->defineAsyncComponent定义异步组件，来包裹vue2引入方式里面的内容
import { defineAsyncComponent } from 'vue'
component: defineAsyncComponent(() => import('./NextPage.vue'))
自定义指令
改变钩子函数的命名
vue2
vue2中绑定的钩子函数为
- bind - 指令绑定到元素后发生。只发生一次。
- inserted - 元素插入父 DOM 后发生。
- update - 当元素更新，但子元素尚未更新时，将调用此钩子。
- componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。
- unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。
vue3
将钩子函数的命名与生命周期的钩子函数命名相一致
- bind → beforeMount
- inserted → mounted
- beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。
- componentUpdated → updated
- beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
- unbind -> unmounted
在钩子函数中引用组件实例的方式
某些情况下需要去获取组件中实例的某些属性
vue2
- 需要通过vnod来获取实例
Vue.directive('has', {
inserted: (el, binding, vnode) => checkPermission(el, binding, vnode),
});
export const checkPermission = (el, binding, vnode) => {
...
const permissionArr = vnode.context.$store.state.permissionId //所拥有的所有权限id
...
}
vue3
- 从binding中去获取对象
export const checkPermission = (el, binding, vnode) => {
...
const permissionArr =binding.instance.$store.state.permissionId //所拥有的所有权限id
...
}
v-bind="$attrs"
占坑
自定义元素元素的交互
is的用法
vue2
- 组件：
<component :is="currentTabComponent"></component>
- html标签
<table>
<tr is="blog-post-row"></tr>
</table>
vue3
- 组件
<component is="currentTabComponent"></component>
- html标签
<table>
<tr v-is="'blog-post-row'"></tr> // v-is类似绑定一个变量，而我们需要组件名，为字符串，所以用单引号包裹
</table>
事件
- vue3中去除了
$on、$off、$once、三种方法，仅保留$emit。
过滤器
vue3中移除了过滤器的功能，建议使用methods或者computed 来代替，实际上在vue2中也完全可以这两种方式实现
局部过滤器
vue2
<p>{{message|toLower}}</p>
data() {
return {
message: 'ABC'
}
},
filters: {
toLower(value) {
return value.toLowerCase()
}
}
vue3
- vue3用computed或者methods来定义
<p>{{messageToLower}}</p>
import {
computed,
ref,
} from 'vue';
setup(){
let message = ref('ABC')
let messageToLower = computed(() => {
// console.log(message)
return message.value.toLowerCase()
})
return{
messageToLower,
}
}
全局过滤器
vue2
Vue.filter('toLower', (value)=> {
return value.toLowerCase()
})
vue3
- 在main.js中注册
const app =createApp(App)
app.config.globalProperties.$filter={
toLower(value){
return value.toLowerCase()
}
}
- 使用
<p>{{$filters.toLower(message)}}</p>
根节点
vue2
- vue2的
template中只能存在一个根节点
<template>
<div id="app">
...
</div>
</template>
vue3
- vue3中可以存在多个节点
<template>
<div>...</div>
<a>...</a>
<p>...</p>
</template>
函数式组件
占坑
全局API
占坑
内联模板
vue2
-
利用inline-template属性
-
在vue2中文档提示了这么一段话，所以几乎没有用过
不过，
inline-template会让模板的作用域变得更加难以理解。所以作为最佳实践，请在组件内优先选择template选项或.vue文件里的一个<template>元素来定义模板。>
vue3
移除了此功能，
唯一的key
v-if中的key
vue2
- 在vue2中，v-if，v-else中的key是为了控制某个组件或者元素的复用
- 不带key的话会复用，< hello-world >组件只创建一次
<!---->
<template v-if="loginType === 'username'">
<hello-world title="username"></hello-world>
</template>
<template v-else>
<hello-world title="email"></hello-world>
</template>
<button @click="changeType">切换</button>
- 带key的话每次切换都会重新去渲染组件（前提是key不同）
<template v-if="loginType === 'username'">
<hello-world title="username" key="a"></hello-world>
</template>
<template v-else>
<hello-world title="email" key="b"></hello-world>
</template>
<button @click="changeType">切换</button>
vue3
vue3中默认是带有key的，这个key始终保持唯一，与其他的key不同，不能通过故意使用相同的 key 来强制重用分支。
<div v-if="condition">Yes</div>
<div v-else>No</div>
template中v-for的key
vue2
vue2中，在template标签上，可以使用v-for指令，但是不能绑定key，只能在子节点上面去绑定唯一的key
<template v-for="item in list">
<div :key="item.id">...</div>
</template>
vue3
vue3中可以将key绑定到template上
<template v-for="item in list" :key="item.id">
<div>...</div>
</template>
