vue2.0和vue3.0区别

vue2.0和vue3.0区别

双向数据绑定的原理改变：‌

Vue2使用Object.defineProperty对数据进行劫持，‌结合发布订阅模式实现双向数据绑定，‌而Vue3则采用了ES6的Proxy API对数据进行代理，‌提供了更多的拦截操作，‌能够监听到属性的删除和新增，‌相比Vue2，‌Vue3的这种实现方式更加高效和灵活。‌Vue3中要用ref包装，通过返回值的 .value属性获取响应式的值 ，修改也需要对 .value进行修改,( 注意在js中要.value，在模板html中解析时会自动添加.value,不需要添加）.

<template>
 <div>
<!-- 不需要.value -->
 {{ testOne }}
 {{ testTwo.directionD}}
 </div>
</template>
 
<script setup>
  const testOne= ref(0)
  
  const testTwo= ref({
    directionD: '',
    directionA: '',
    arr: []
  })
  
  const dataThree= ref({})
 
  // 使用需要.value
  console.log(testOne.value);
  console.log(dataThree.value);
  console.log(testTwo.value.directionD);
  console.log(testTwo.value.directionD);
 
</script>

支持碎片(Fragments)：‌

Vue3支持在组件中拥有多个根节点，‌而Vue2则要求每个组件必须有一个单一的根节点。‌这一变化使得组件的结构设计更加灵活，‌减少了不必要的嵌套和复杂性。‌

引入Composition API：‌

Vue3引入了Composition API，‌这是一种新的API形式，‌允许开发者以函数的方式组织组件的逻辑，‌使得代码更加结构化和可重用。‌这与Vue2的Options API形成了鲜明的对比，‌后者通过对象的方式组织组件的选项。‌

语法和API的更新 ：‌

Vue3在语法和API上做了一些调整，‌例如，‌样式穿透/deep/的选择器在Vue3中推荐使用()函数，‌而不是Vue2中的/deep/字符串。‌此外，‌Vue3还提供了更简洁和灵活的方式来绑定class和style，‌这些变化都是为了提升开发效率和代码的可读性。‌

 <style lang="less" scoped>
/* vue2写法 */
/deep/.change {
  color: red;
}
</style>
<style lang="less" scoped>
/* vue3写法 */
:deep(.change ){
  color: red;
}
</style>

去除this

    Vue3中没有this， 使用this报错 需要组件内的某个方法直接使用即可（注意使用的数据必须在调用前定义）

组件的生命周期：

指的是组件从创建->运行->销毁的整个过程，强调的是一个时间段。
大部分生命周期在vue2的周期前加 on 即可；vue3没有beforeCreate 和 created两个周期，那想在这两个周期中进行逻辑处理怎么办呢？ setup中写好了调用即可👇

vue框架为组件内置了不同时刻的生命周期函数，生命周期函数会随着组件的运行而自动调用。如：①当组件在内存中被创建完毕之后，会自动调用created函数
②当组件被成功的渲染到页面上之后，会自动调用mounted函数
③当组件被销毁完毕之后，会自动调用unmounted函数

vue3中全部的生命周期函数：

数据共享的六种方法：

1.父子关系

①父->子 属性绑定

②子->父 事件绑定

③父<->子 组件上的v-model

2.兄弟关系

①eventBus

3.后代关系

①provide&&inject

4.全局数据共享

①vuex

自定义指令：

vue2中使用的是{bind，update}，vue3中使用的是{mounted，updated}