vue2和vue3有哪些区别和不同

vue2和vue3有哪些区别和不同
Vue v3.x 概述

Vue 3 引入了一些新功能和一系列重大更改。让我们看看这些更改将如何影响我们的应用程序。

Vue V3.x 重大更改

在 Vue 3 中，重大更改基本上分为七类：
- 全局 API
  （负责 Vue 的行为方式） - 您很可能想要查看这些更改。
- 模板指令
  （对 v- 指令的工作方式所做的更改） - 您很可能想要查看这些更改。
- 组件
  （对组件工作方式的更改） - 如果您的应用程序使用组件，则您很可能要查看这些更改
- 呈现函数（允许您以编程方式创建 HTML 元素）
- 自定义元素（告诉 Vue 有关创建自定义 HTML 元素的信息）
- 次要更改（这些可能不会影响您，但您仍然需要查看这些更改）
- 删除了 API（在 Vue 3 中不再可用的内容）
在所有更改中，有一些是任何应用程序都会使用的，例如全局API和组件。因此，如果你想开始使用新的 Vue 版本，就需要考虑它们。

值得一提的是以下附加更改：
- 您创建 Vue 应用程序和组件实例的方式已更改（全局 API）
- 应始终将数据选项声明为函数（细微更改）
- 对同一元素使用 v-if 和 v-for 时的优先级更改（模板 Ddrectives）
- 应为组件事件（组件）声明发出选项
有关更改的完整列表，您可以转到文档

现在，让我们更详细地看一下其中的一些更改。

全局属性

vue2
- 对于一些第三方插件，Vue2通常使用原型原型来挂载到VUE对象上。
```
import Vue from 'vue'
Vue.prototype.$http=Axiox
Vue.prototype.$echart= Echart
```
vue3
- Vue3Global 属性配置中提供了一个名称，可以替换 Vue2 中的原型globalProperties
```
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-用于生成

vue2

VUE2中的V-FOR与REF一起使用，当引用批量模板时，获得的REF是一个数组。
```
  <div v-for = "i in 3" ref = "setItemref": key = "i"> {{i}} </ div> // Here are arrays
 
 mounted() {
      console.log(this.$refs.setItemRef)
},
```
vue3

VUE3 中的 REF 绑定是一个函数，
```
<div v-for = "item in 3": ref = "setItemRef"> </ div> // This is a function
 
setup(){
		let itemRefs = []
			const setItemRef = el => {
				itemRefs.push(el)
			}
			onMounted(() => {
				console.log(itemRefs)
			})
}
```
REF 的 DOM 模式已更改，但结果是相同的

异步组件

在路由中，通常使用延迟加载的方式来引入组件。

vue2
```
 component: () => import('@/views/homePage/index.vue'),
```
vue3

在 Vue3 中引入一个新方法--->定义异步组件来打包 Vue2 介绍的内容defineAsyncComponent
```
import { defineAsyncComponent } from 'vue'
 component: defineAsyncComponent(() => import('./NextPage.vue'))
```
自定义说明

更改挂钩函数的命名

vue2

VUE2 中绑定的钩子函数是
- bind - 指令绑定到元素。仅发生一次。
- inserted - 将元素插入父 DOM 时。
- update - 当元素更新，但子元素尚未更新时，将调用此挂接。
- componentUpdate - 一旦组件和子级更新，将调用此挂接。
- unbind - 接触绑定。一旦指令被删除，将调用此钩子。只呼叫一次。
vue3

钩子函数的命名与生命周期的钩子函数一致
- bind → beforeMount
- inserted → mounted
- beforeUpdate:new！这是在元素本身更新之前调用的，非常类似于组件生命周期挂钩。
- componentUpdated → updated
- beforeUnmount:new！与组件生命周期挂钩类似，它将在卸载元素之前调用。
- 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 // All permission ID
    ...
}
```
vue3
- 从绑定中获取对象
```
export const checkPermission = (el, binding, vnode) => {
    ...
     Const permissionarr = binding.instance. $ store.State.PermissionID // All permission ID
    ...
}
```
v-bind=“$attrs”

自定义元素元素交互

IS 用法

vue2
- 组件：
```
<component :is="currentTabComponent"></component>
```
- html
```
<table>
  <tr is="blog-post-row"></tr>
</table> 
```
vue3
- 子组件Assembly
```
<component is="currentTabComponent"></component>
```
- html
```
<table>
  <TR V-IS = "'blog-post-rot"> </ tr> // V-IS is similar to binding a variable, and we need a component name, a string, so wrapped with single quotes
</table> 
```
事件
- Vue3 移除、、,三种方法，只保留。$on$off$once$emit
滤波器

过滤器函数在 Vue3 中被删除。建议使用方法或计算代替，实际上，在 Vue2 中，你可以实现这两种方式。

部分过滤器

vue2
```
 <p>{{message|toLower}}</p>
 
 data() {
     return {
     message: 'ABC'
     }
 },
 filters: {
     toLower(value) {
     	return value.toLowerCase()
     }
 }
```
vue3
- Vue3 是用计算或方法定义的
```
<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>
```
template
```
<template>
  <div class="wrap">
    <div>{{ num }}</div>
    <Button @ click = "getdata"> change data </ button>
  </div>
</template>
<style lang="less" scoped>
  .wrap {
    width: 100%;
    height: 100%;
    border: 1px solid red;
  }
</style>
 
```
vue2
```

<script>
  export default {
    data() {
      return {
        num: 333,
      };
    },
    //
    mounted() {
      alert('111');
      this.getData();
    },
    methods: {
      getData() {
        this.num = '2222';
      },
    },
  };
</script>
```
vue3.0
```

<script>
  import { defineComponent, ref } from 'vue';
  export default defineComponent({
    setup() {
      let num = ref(1223);
      function getSecondData(params) {
        alert('222');
      }
      function getData(params) {
        num.value = 'weruwiru';
        getSecondData();
      }
      return {
        num,
        getData,
      };
    },
  });
</script>
```
vue3.2
```

<script setup>
  import { ref } from 'vue';
  let num = ref(1223);
  function getSecondData(params) {
    alert('222');
  }
  function getData(params) {
    num.value = 'weruwiru';
    getSecondData();
  }
</script>
```
功能组件

全球原料药

内联模板

vue2
- 使用内联模板属性
- Vue2 中的文档会提示这样一个词，所以我几乎用了
  
  但是，内联模板会使模板的作用更难理解。因此，作为最佳实践，请选择组件模板 Option 或.vue One中的file<template> Elements来定义模板。>
vue3

删除此功能，

唯一键

输入 V-IF

vue2
- 在 Vue2 中，V-IF 中的关键是 V-Else 控制组件或元素。
- 如果您没有密钥，您将被重复使用。<你好世界>组件仅创建一个
```

<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"> Switch </ 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"> Switch </ button>
```
vue3

Vue3 默认为键，此键始终是唯一的，不同于其他键，不能使用相同的键来强制重用分支。
```
<div v-if="condition">Yes</div>
<div v-else>No</div>
```
在模板中的 V-for 中 KEY

vue2

在 Vue2 的 Template 选项卡上，你可以使用 V-FOR 指令，但不能绑定 Key，只能在子节点上绑定唯一的 KEY。
```
<template v-for="item in list">
  <div :key="item.id">...</div>
</template>
```
vue3

键可以绑定到 Vue3 中的模板
```
<template v-for="item in list" :key="item.id">
  <div>...</div>
</template>
```
设置数据

这就是主要区别所在 —— Vue2 Options API 与 Vue 3 Composition API。

选项 API 将我们的代码分为不同的属性：数据、计算属性、方法等。同时，组合API允许我们按函数而不是属性类型对代码进行分组。

对于窗体组件，假设我们只有两个数据属性：a 和 a。username password

Vue2 代码看起来像这样 – 我们只是在数据属性中折腾了两个值。
```
export default {
  props: {
    title: String,
  },
  data() {
    return {
      username: "",
      password: "",
    };
  },
};
```
在 Vue 3 中，我们必须通过使用一种新方法来投入更多的精力，其中所有组件初始化都应该进行。setup()

此外，为了让开发人员能够更好地控制什么是反应式的，我们可以直接访问 Vue 的反应性 API。

创建反应式数据涉及三个步骤：
- 从 vue 导入reactive
- 使用反应式方法声明我们的数据
- 让我们的方法返回反应式数据，以便我们的模板可以访问它setup
就代码而言，它看起来有点像这样。
```
import { reactive } from "vue";
 
export default {
  props: {
    title: String,
  },
  setup() {
    const state = reactive({
      username: "",
      password: "",
    });
 
    return { state };
  },
};
```
然后，在我们的模板中，我们像和state.username state.password

在 Vue 2 与 Vue 3 中创建方法

Vue2 选项 API 有一个单独的方法部分。在其中，我们可以定义我们所有的方法并以我们想要的任何方式组织它们。

Vue 3 Composition API中的 setup 方法也处理方法。它的工作方式有点类似于声明数据——我们必须首先声明我们的方法，然后返回它，以便我们组件的其他部分可以访问它。

创建我们的模板（根目录）

对于大多数组件，Vue 2 和 Vue 3 中的代码即使不相同，也会非常相似。但是，Vue 3 支持 Fragments，这意味着组件可以有多个根节点。

这在渲染列表中的组件以删除不必要的包装器 div 元素时特别有用。但是，在这种情况下，我们将为表单组件的两个版本保留一个根节点。

Vue3

唯一真正的区别是我们如何访问我们的数据。在 Vue 3 中，我们的响应式数据都包装在一个响应式状态变量中——因此我们需要访问这个状态变量来获取我们的值。

生命周期挂钩

在 Vue2 中，我们可以直接从我们的组件选项中访问生命周期钩子。对于我们的示例，我们将等待mounted 事件。

现在使用 Vue 3 组合 API，几乎所有内容都在 setup() 方法中。这包括已安装的生命周期挂钩。

但是，默认情况下不包含生命周期钩子，因此我们必须导入onMounted在 Vue 3 中调用的方法。这看起来与之前导入响应式的方法相同。

然后，在我们的 setup 方法中，我们可以通过将 onMounted 方法传递给我们的函数来使用它。

计算属性

让我们添加一个计算属性，将我们的用户名转换为小写字母。

为了在 Vue2 中实现这一点，我们向选项对象添加了一个计算字段。从这里，我们可以像这样定义我们的属性……

Vue 3 的设计允许开发人员导入他们使用的东西，并且在他们的项目中没有不必要的包。本质上，他们不希望开发人员必须包含他们从未使用过的东西，这在 Vue2 中正成为一个日益严重的问题。

因此，要在 Vue 3 中使用计算属性，我们首先必须将计算属性导入到我们的组件中。

然后，与我们之前创建响应式数据的方式类似，我们可以将一段响应式数据作为计算值

访问props

访问 props 带来了 Vue 2 和 Vue 3 之间的重要区别——this意味着完全不同的东西。

在 Vue2 中，this几乎总是引用组件，而不是特定的属性。虽然这在表面上使事情变得容易，但它使类型支持变得痛苦。

然而，我们可以很容易地访问道具——让我们添加一个简单的例子，比如title在挂载的钩子中打印出我们的道具：

但是在 Vue 3 中，我们不再使用this来访问 props、发出事件和获取属性。相反，该setup()方法采用两个参数：
- props– 对组件道具的不可变访问
- context– Vue 3 公开的选定属性（emit、slots、attrs）
使用 props 参数，上面的代码看起来像这样。
Emitting事件

同样，在 Vue 2 中Emitting事件非常简单，但 Vue 3 让您可以更好地控制如何访问属性/方法。

假设在我们的例子中，当按下“提交”按钮时，我们想要向父组件发出登录事件。

Vue 2 代码只需要调用this.$emit并传入我们的有效负载对象。

然而，在 Vue 3 中，我们现在知道这this不再意味着同样的事情，所以我们必须以不同的方式来做。

幸运的是，上下文对象暴露emit给了我们同样的东西this.$emit

我们所要做的就是将context第二个参数添加到我们的设置方法中。我们将解构上下文对象以使我们的代码更简洁。

然后，我们只需调用 emit 来发送我们的事件。然后，就像以前一样，emit 方法接受两个参数：
- 我们的活动名称
- 与我们的事件一起传递的有效负载对象
如何在 Vue 3 中创建应用程序和组件实例

在 Vue 3 中，你创建应用的方式发生了变化。Vue 应用程序现在使用新方法来创建应用程序实例。.createApp()

Vue 应用程序现在被视为根组件，因此您定义其数据选项的方式也发生了变化。

HTML 根元素尚未更改，因此在索引.html文件中，您仍将看到如下内容：
```
<div id="app"></div>
```
在 JavaScript 文件中，您需要了解一个重要的更改：您将不再用于创建新的应用程序实例，而是使用一个名为：new Vue()createApp()
```
// Vue 3 syntax
 
const app = Vue.createApp({
    // options object
})
app.mounth('#app') // Vue Instance - Root component
 
// Vue 2 syntax
const app = new Vue({
    // options object
    el: '#app'
})
```
如何在 Vue 3 中定义组件

要在 Vue 3 中定义组件，请不再使用。相反，您现在使用应用程序根组件，如下所示：Vue.component()
```
/* Vue 3 syntax */
const app = Vue.createApp({
    // options here
})
 
app.component('componenet-name', {
    // component code here
})
 
 
/* Vue 2 syntax*/
Vue.component('component-name', {
    // component code here
})
```
如何在 Vue 3 中使用数据选项对象

假设主应用实例现在被视为根组件，则无法再将数据属性指定为对象。相反，您需要将其定义为返回对象的函数，就像通常在组件中所做的那样。
```
// Vue 3
const app = Vue.createApp({
    // options object
    data(){
        return {
            message: 'hi there'
        }
    }
})
app.mounth('#app') // Vue Instance - Root component
 
// Vue 2 syntax
const app = new Vue({
    // options object
    el: '#app'
    data: {
        message: 'hi there'
    }
})
```
Vue 3 中 v-if/v-for 的优先级更改

在 Vue 2 中，如果在同一元素上使用了两个指令，则 v-for 指令将优先于 v-if。但是在 Vue 3 中，v-if 总是优先。

但是，使用这两个指令并不是一个好主意。请务必访问此处的文档以了解更多信息。

如何在 Vue 3 中的组件事件上使用 Emits 属性（重大更改/新功能）

与该属性类似，现在在 Vue 3 中，还有一个属性，组件可以使用该属性来声明它可以向父组件发出的事件。propsemits

我强烈建议使用此属性，以避免在需要重新发出本机事件（如单击事件）的组件中两次发出事件。

以下是官方文档中的示例：
```
<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>
```
emits 属性也可以接受对象。

我现在还不会深入探讨这个问题，但我保证迟早会在专门的视频系列中解决每个功能/变化。

Vue 路由器 v4.x 概述

随着 Vue.js 的新版本发布，我们也有了新版本的 Vue Router。新版本 v4.x 有一些重大更改，如果你想将项目迁移到新的 Vue 版本，你需要考虑这些更改。

Vue 路由器 V4 重大更改

两个重大更改特别值得一提，因为它们位于 Vue 路由器应用程序的基础。稍后需要了解它们才能迁移应用程序。
- Vue 路由器实例已更改
- 有一个新的历史记录选项
此处提供了更改的完整列表。

让我们深入看看这两个变化。

Vue 路由器 4 实例已更改

要创建新的 Vue 路由器实例，请不再使用 VueRuter 函数构造函数。

以下是 Vue Router v.3x 文档，因此您可以进行比较。

代码由以下原因更改：
```
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes // short for `routes: routes`
})
 
// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router
}).$mount('#app')
```
对此：
```
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = VueRouter.createRouter({
  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
  history: VueRouter.createWebHashHistory(), // <-- this is a new property and it is mandatory!
  routes, // short for `routes: routes`
})
 
// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)
 
app.mount('#app')
```
在上面的代码中，要创建新的 Vue 路由器实例，您现在必须使用 VueRouter 对象并调用该方法。createRouter()

此外，新的历史记录属性是必需的 – 。您必须定义它，否则将收到控制台错误。history: VueRouter.createWebHashHistory()

接下来，您将使用该方法创建 Vue 实例，并使用变量来调用该方法。您将您在上一步中创建的路由器实例传递到该位置。createApp()app.use()

最后，您可以使用在应用程序实例上挂载根 DOM 元素。app.mount('#app')

你可以阅读 Vue 路由器 v4.x 文档了解更多详情。

路由的变化：

main.js
```
// create and mount the Vue instance
 
const app = new Vue({
    router
}).$mount('#app')
 
```
对此：
```
// create and mount the Vue instance
 
const app = Vue.createApp({
    router
})
app.mount('#app')
```
Vue 路由器的实例化方式已更改

它从这个变化：
```
// create the router instance
const router = new VueRouter({
    routes
})
 
```
对此：
```
// create the router instance
const router = VueRouter.createRouter({
    // Provide the history implementation to use. We are using the hash history for simplicity here.
    history: VueRouter.createWebHashHistory(),
    routes, // short for `routes: routes`
})
```
上面的代码处理两个主要更改：已替换为，新选项现在将替换。new VueRouter()VueRouter.createRouter()historymode

请访问 Vue 路由器 4 的文档以了解更多信息。

最后，让我们的应用程序知道我们正在使用 Vue 路由器。如果我们在 Vue 应用程序中注入了路由器实例，现在我们需要指示它使用 Vue 路由器，使用该方法执行此操作，并将路由器实例传递给它。.use()

由此更改：
```
// create and mount the Vue instance
 
const app = Vue.createApp({
    router
})
app.mount('#app')
```
对此：
```
// create and mount the Vue instance
 
const app = Vue.createApp({})
app.use(router)
app.mount('#app')
```
相关阅读:
Java竞赛快速输入输出，防止读取数据过慢导致超时
 Postman使用简介
 护理教育学-简答题
 CDH大数据平台 31Cloudera Manager Console之impala hive负载均衡(markdown新版)
【软件安装】Linux中RabbitMQ的安装
 HR们，快看这是不是你想要的办公神器！
ftpClient.listFiles()一直无法获取ftp上的目录文件
 HarmonyOS 应用生命周期有哪些？按返回键会调用哪些生命周期？
python自动化测试（二）：xpath获取元素
 电脑重装系统后DirectX12旗舰版禁用了怎么解决？
原文地址：https://blog.csdn.net/qq_22182989/article/details/125253780

Vue v3.x 概述

Vue V3.x 重大更改

全局属性

REF 和 V-用于生成

异步组件

自定义说明

更改挂钩函数的命名

挂接函数中的引用组件实例

自定义元素元素交互

IS 用法

事件

滤波器

部分过滤器

全局过滤器

根节点

template

vue2

vue3.0

vue3.2

功能组件

全球原料药

内联模板

唯一键

输入 V-IF

在模板中的 V-for 中 KEY

设置数据

在 Vue 2 与 Vue 3 中创建方法

创建我们的模板（根目录）

生命周期挂钩

计算属性

访问props

Emitting事件

如何在 Vue 3 中创建应用程序和组件实例

如何在 Vue 3 中定义组件

如何在 Vue 3 中使用数据选项对象

Vue 3 中 v-if/v-for 的优先级更改

如何在 Vue 3 中的组件事件上使用 Emits 属性（重大更改/新功能）

Vue 路由器 v4.x 概述

Vue 路由器 V4 重大更改

Vue 路由器 4 实例已更改

路由的变化：