Vue2和Vue3区别

1. vue2和vue3双向数据绑定原理发生了改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.defineProperty()对数据进行劫持 结合 发布订阅模式的方式来实现的。

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

 2.vue2使用的是选项式API vue3使用的是组合式API

3.Vue2在data中定义数据,vue3在setup的语法糖帮助下,可以像js那样书写代码

4.生命周期,钩子函数也都发生了变化

5.父子之间传参方式不同,vue2是porps和$emit,vue3是difineporps和difineemit

6.vue3中移除了filter过滤器和.sync

7.Vue3支持碎片(Fragments)

就是说在组件可以拥有多个根节点。

setup没有this,this指向undefined
在beforeCreate之前执行
所有数据必须要return出去才能使用
setup的返回值是一个对象

ref的使用
const xxx = ref(null)即可使用
修改数据必须要使用.value,对象不用使用.value即可修改.在模板中, ref 属性会自动解套, 不需要额外的 .value
在 setup 函数中, 通过 ref 对象的 value 属性, 可以访问到值

reactive的使用
const xxx = reactive({})  //reactive里面的内容必须是对象 
reactive用来定义响应式数据,它用于复杂数据类型

toRefs的使用
如果对一个响应数据, 进行解构 或者 展开, 会丢失他的响应式特性
定义将响应式中**所有**属性转为响应式数据，通常用于解构,展开reactive定义对象， 简化我们在模板中的使用。 
const {p1, p2} = toRefs(reactive({p1, p2}))

直接在script加入setup 直接可以和js一样写代码

defineProps // 子收父传值

defineEmits // 子传父
const emit = defineEmits(['传递事件名'])
const 触发函数= () => {
  emit('传递事件名', 传递值)
}

provide('数据名', 数据) // 祖先组件中提供数据

const data = inject('数据名') // 后代组件中使用数据

祖先组件中提供数据&操作数据的函数：provide('函数名', 函数)

后代组件中获取操作数据的函数，并调用数据： const 触发事件 = inject('函数名')