Vue2与Vue3区别01-创建与app.vue

1.创建阶段

​ 主要区别点：Vue3 - createApp工厂函数/挂载函数mount()

​ Vue2- Vue/render

Vue3：

//引入工厂函数createApp
import { createApp } from 'vue'
//引入组件
import App from './App.vue'
//创建并挂载
createApp(App).mount('#app')
1
2
3
4
5
6

Vue2:

//引入Vue
import Vue from 'vue'
import App from './App.vue'
//新建vm对象并挂载到app上，也可以使用vm.$mount("#app")挂载
new Vue({
	el:'#app',
	render:h=>h(App)
})
1
2
3
4
5
6
7
8

2.app.vue

主要区别：

​ Vue3中的template标签可以不加div顶级容器，script标签不需添加data()/methods, 直接以setup()替代

setup特点：

​ 在beforeCreate之前执行1次，this是undefined

​ 参数：

​ props: 值为对象，包含：组件外部传来，组件内部接收了的属性

​ context: 上下文对象

​ attrs: 值为对象，包含：组件外部传来，但组件内部没有接收的属性，相当于this.$attrs

​ slots: 收到的插槽内容，相当于this.$slots

​ emit: 分发自定义事件的函数，相当于this.$emit

Vue3:

<template>
  <h1>姓名:{{name}}h1>
  <h2>年龄：{{age}}h2>
  <button @click="sayHello">sayHellobutton>
template>
<script>
	export default{
		name:'App',
		setup() {
			let name ='张三'
			let age = 18
			function sayHello(){
				alert(`姓名${name}`)
			}
            //必须返回值
			return {
				name,age,sayHello
			}
		}
	}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Vue2：

<template>
  <div id="app">
	
  div>
template>

<script>
export default {
  name: 'app',
  data(){return {} },
  components: { }
 
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14