vue3和vue2区别初学

1. vite、vue-cil

• vite可以创建vue3的项目，不包含webpack,启动速度快，企业级项目暂时不成熟不推荐
• vue-cli可以创建两个版本项目，包含webpack,启动慢，大部分企业级项目推荐

2. 项目结构

• vue3项目包含一个index.html页面，vue2项目不包含

3. 部分函数名称

• 创建vue实例

//vue3
import Vue from 'vue'
import App from './App.vue'
new.Vue({
	render:h=>h(App)
}).$mount('#app')
//vue2
import { createApp } from 'vue'
import App from './App.vue'
const app=createApp(App)
app.mount('#app')

4. 组件使用

• vue3需要全局注册或局部注册

// 全局注册main.js
import Test from './components/Test.vue'
app.component('my-test',Test)

5. 样式穿透/deep/

• vue3和vue2使用不一致

//vue3
:deep(.title){}
//vue2
/deep/.title{}

6. 自定义事件

• 封装组件时，先声明自定义事件，再触发自定义事件
• 使用组件时，监听自定义事件

// 推测父子组件传数据就通过自定义事件监听
emits['add']
methods:{
	additem(){
    	this.$emit('add',this.count)
    }
}
父组件：<@add=add_items>
methods:{
	add_items(){}
}
//如果设置v-model：number="count"
不需要设置父组件@add事件即可更新数据