vue2.0和vue3.0的区别

初始化结构目录不一样     

1.3.0版本需要在项目根目录下手动创建不同环境的配置文件，具体的环境变量名称由package.json中运行参数决定

2. 3.0版本中不同环境的webpack配置文件也没有了（webpack.base.conf.js / webpack.dev.conf.js / webpack.prod.conf.js）可以再根目录中创建vue.config.js文件来进行webpack和vue的一些配置

2.0
npm install vue-cli -g
3.0
npm install @vue/cli -g

创建vue2和vue3项目的文件发生的变化

vue2.0
import vue from 'vue'
new Vue({
    render:h => h(App),
}).$mount('#app')

vue3.0
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

1. vue2.0中是直接创建了一个vue实例
2. vue3.0中按需导出了一个createApp(ceateApp做了什么)

<template>
    <img alt="Vue logo" src="./images/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

数据双向绑定原理

1. vue2使用的是object.defineProperty()进行数据绑定，结合发布订阅的方式实现
2. vue3使用的是Proxy代理，使用ref或者 reactive将数据转化成响应式数据

数据和方法的定义

vue2使用的是选项类型API(Options API) vue3使用的是合成型API(Composition API)

data(){ return {}; },methods:{}

获取props

vue2：console.log(‘props’,this.xxx)  
vue3：setup(props,context){ console.log(‘props’,props) }

给父组件传值emit

vue2：this.$emit()  
vue3：setup(props,context){context.emit()}