全局属性

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>

vue3与vue2的区别的更多相关文章

  1. 想知道Vue3与Vue2的区别?五千字教程助你快速上手Vue3!

    从Vue3发布以来,我就一直对其非常感兴趣,就一直想着将其投入公司的生产中,但是开始考虑到很多不确定性就暂时对一些很小的功能进行一些尝试:慢慢的发现组合式Api的形式非常适合开发(个人感觉),尤其是V ...

  2. vue2升级vue3:vue2 vue-i18n 升级到vue3搭配VueI18n v9

    项目从vue2 升级vue3,VueI18n需要做适当的调整.主要是Vue I18n v8.x 到Vue I18n v9 or later 的变化,其中初始化: 具体可以参看:https://vue- ...

  3. vue2.0 与 vue3.0 配置的区别

    提示:要了解vue2.0与vue3.0区别,首先你要熟悉vue2.0 从最明显最简单的开始 项目目录结构 可以明显的看出来,vue2.0与3.0在目录结构方面,有明显的不同(vue3.0我是安装了cs ...

  4. vue2和vue3生命周期的区别

    概念 首先,我们了解一下"生命周期"这个词.通俗的来说,生命周期就是一个事务从出生到消失的过程.例如,一个人从出生到去世.在vue中,vue的生命周期是指,从创建vue对象到销毁v ...

  5. 第三十一篇:vue3和vue2的不同

    好家伙 1.为什么会有vue3? Vue2和Vue3的区别 - 简书 (jianshu.com) 貌似是因为他的对手太优秀,所以他也必须进步 2.什么是api? 从文件操作开始谈API. 以C语言为例 ...

  6. Vue3 相比 vue2

    Vue3 使用Proxy替代了defineProperty. Proxy 相比于 defineProperty 的优势 Object.defineProperty() 的问题主要有三个: 不能监听数组 ...

  7. vue-cli实现异步请求返回mock模拟数据

    在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先 ...

  8. Vue2与Vue3的组件通讯对比

    Vue2 父传子 父传子比较简单, 主要通过以下步骤实现 父在template中为子绑定属性 <Child :childData='pMsg'/> <!-- 也可以写死 --> ...

  9. uniapp项目vue2升级vue3简单记录

    看到好多开源项目都升级了vue3,看文章说vue3性能升级很多,而且组合式api很香,遂把最近开发的自助洗车app升级下,在此记录下出现的问题. uniapp升级vue3官方指南 我是先去vue官网看 ...

随机推荐

  1. BZOJ2882 工艺【SAM】 最小循环串

    BZOJ2882 工艺 给出一个串,要求其循环同构串中字典序最小的那个 串翻倍建\(SAM\)然后从起点开始贪心的跑\(n\)次即可 当然也能用最小表示法来做 #include<bits/std ...

  2. Educational Codeforces Round 88 (Rated for Div. 2) D. Yet Another Yet Another Task(枚举/最大连续子序列)

    题目链接:https://codeforces.com/contest/1359/problem/D 题意 有一个大小为 $n$ 的数组,可以选取一段连续区间去掉其中的最大值求和,问求和的最大值为多少 ...

  3. KMP(算法描述)

    #include<iostream> using namespace std; const int N=10010,M=100010; int n,m; char p[N],s[M]; i ...

  4. Codeforces Round #653 (Div. 3) B. Multiply by 2, divide by 6 (数学)

    题意:有一个数\(n\),每次操作可以使\(n*=2\)或\(n/=6\)(如果能被整除),求最少操作次数使得\(n=1\),如果不满足,输出\(-1\). 题解:我们只要看\(n\)的质因子即可,如 ...

  5. 牛客编程巅峰赛S1第5场 - 青铜&白银 C.排队 (优先队列,归并排序)

    题意:有\(m\)个窗口,\(n\)个人排队,每个人都有各自的办理时间,只有办理完成窗口才能空出来,后面的人开始办理,求有多少人比后面的人开始办理的早但完成的晚. 题解:我们可以用优先队列来模拟办理, ...

  6. 在4.0框架下使用Sqlite数据库

    在4.0框架下使用Sqlite数据库出现"混合模式程序集是针对"v2.0.50727"版的运行时生成的,在没有配置其他信息的情况下,无法在 4.0 运行时中加载该程序集. ...

  7. Automatic merge failed; fix conflicts and then commit the result.解决方法

    产生原因: git pull 的时候会分为两步,第一步先从远程服务器上拉下代码,第二步进行merge.当你merge时候失败了就会产生Automatic merge failed; fix confl ...

  8. TCP之“3次握手,4次挥手”问题

    你知道"3次握手,4次挥手"吗? 当面试官问你什么是"3次握手,4次挥手",你是不是要开启"诵经"模式了?作为程序员,要有"刨根问 ...

  9. C++的memset

    1. 需要的头文件 C中为<memory.h> 或 <string.h> C++中为<cstring> void * memset ( void * ptr, in ...

  10. mysql 查询,天,周,月等写法

    1.查询当天的数据 select * from 表名 where TO_DAYS(时间字段)=TO_DAYS(NOW()); 2.查询当周的数据 select * from 表名 where YEAR ...