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>