vue2和vue3的区别

一 、响应性不同

vue2：利用ES5的一个api, Object.defineproperty()通过对数据进行劫持,结合订阅发布的模式来实现的. data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法, 侦测到数据的变化时，会通知订阅者 Watcher，订阅者 Watcher自动触发更新当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，Vue框架会深层遍历,并找出新旧不同虚拟DOM之间的差异, 将不同点,局部修改到真实DOM树上, 使最小化的更新视图
vue3: 使用了ES6的ProxyApi对数据进行代理, 通过reactive()函数给每一个对象都包一层Proxy, 通过对Proxy监听属性的变化, 来实现对数据的监控

vue2与vue3实现数据响应式的优缺点 :

1. 深度监听，需要一次性递归到底，计算量比较大
2. 描述符只有get和set，无法监听新增属性和删除属性的操作
3. 无法原生监听数组

二、实例化

1. Vue 2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实无论你用到还是没用到，都会跑一遍，这样不仅提高了性能消耗，也无疑增加了用户加载时间。
2. vue3.0中可以用ES module imports按需引入，如:keep-live内置组件、v-model指令，等等，不仅我们开发起来更加的便捷，减少了内存消耗，也同时减少了用户加载时间，优化用户体验。

三、生命周期

四、获取props

vue2在script代码块可以直接获取props，vue3通过setup指令传递

	vue2 : console.log( ' props ',this.xxx）
	vue3: setup(props , context){ console.log(' props ',props) }

五、 数据和方法的定义

Vue2使用的是选项类型APl (Options API)，
Vue3使用的是合成型API(Composition APl)

Vue2:

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

Vue3:
数据和方法都定义在setup中，并统一进行return{ }

六、给父组件传值emit

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

七、watchEffect

Vue3中除了watch，还引入了副作用监听函数watchEifect，用过之后我发现它和React中的useEffect很像，只不过watchEffect不需要传入依赖项。 那么什么是watchEffect呢?
watchEffect它会立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

computed和watch所依赖的数据必须是响应式的。

Vue3引入了watchEfectwatchEFfect相当于将watch的依赖源和回调函数合并，当任何你有用到的响应式依赖更新时，该回调函数便会重新执行。不同于watch的是watcheffect的回调函数会被立即执行，即({ immediate: true })

八、组件通信

九、路由

vue3和vue2路由常用功能只是写法上有些区别:
vue3的beforeRouteEnter作为路由守卫的示例是因为它在setup语法糖中是无法使用的;
大家都知道setup中组件实例已经创建，是能够获取到组件实例的,
而beforeRouteEnter是再进入路由前触发的，此时组件还未创建，所以是无法用在setup中的;
如果想在setup语法糖中使用则需要再写一个script如下:

vue3路由写法:

	import { defineComponent ]} from 'vue'
	import { useRoute，useRouter } from 'vue-router'
	export default defineComponent({
		beforeRouteEnter (to,from,next） {//在渲染该组件的对应路由被confirm前调用
			next()
		},
		beforeRouteLeave ((to,from,next)=>{//离开当前的组件，触发next()
			next()
		},
		beforeRouteLeave((to,from,next)=>{//离开当前的组件，触发next()
			next()
		),
		setup{
			const router = useRouter()
			const route = useRoute()
			const toPage = (=>router.push(xxx))
		}
		
			//获取params 注意是route
			route.params
			//获取query
			route.query
			return {
				toPage
			}
		}
	});