十月的脑子

半碗水
168 阅读5分钟

Vue2, Vue3, React

vue3相对vue2变化

  • 响应式实现改进

Vue3用Proxy替换了Object.defineProperty来实现数据劫持，克服了 Object.defineProperty不能监听对象属性和新增，删除，以及对数组的索引进行操作的变化。

  1. vue2的双向数据绑定

采用数据劫持结合发布者订阅者模式的方式，通过Object.defindProperty（）劫持各个属性的setter，getter，在数据变动是发布消息给订阅者，触发相应的监听回调。

  • ref和reactive 性能提升体现进

    1，数据类型处理

    ref：通过.value属性访问和修改值，ref的追踪机制仅限于单个引用，减少不必要的依赖追踪，从而提高性能。

    reactive： 适用于对象，数组等复杂数据结构。 通过proxy代理找整个对象，当对象内部属性发生变化时，所有依赖这些属性的视图都会自动更新。这种方式在处理复杂数据结构时更高效。

    2，内存使用

    vue3的响应式系统通过proxy代理对象，减少了内存的使用，proxy代理只追踪必要的属性变化，避免了不必要的深度遍历和属性访问，从而减少了内存消耗。

  • 状态管理

  1. vue2：使用Vuex，通过state,getters,mutations,和actions,modules;采用单一的全局状态树，所有状态集中在一个地方，便于管理和调试；
  2. vue3:使用pinia,允许多个store模块，支持模块化的状态管理，更加灵活；

  • Composition API

    vue2使用选项类型API（options API） 对比Vue3合成型API（Composition API）；旧的选项型API在代码里分割了不同属性：data,computed,methods,等；新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，会使代码更加简单和整洁；

  • 生命周期函数

vue2与vue3生命周期对比

beforeCreate  -> 使用 setup()
created       -> 使用 setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
errorCaptured -> onErrorCaptured
  • 父子组件传值

Vue2

  1. Vue2子组件通过props接收数据，通过$emit向父组件传值；

Vue3

  1. props需要defineProps包裹，emit需要defineEmit报错，
  2. 父组件调用子组件内函数需要使用defineExpose暴露方法；
Vue2

// 父组件
<template> 
    <div @click="change">直接操作ref改变</div>
    <child ref='childRef' @child='child' :msg="massage"></child>
</template>
<script> 
export default {
    data(){
        return{
            massage: '父组件数据'
        }
   },
   methods: {
       child(data){
           console.log(data) //这是子数据
       },
       change(){
           this.$refs.childRef.change('数据')
       }
   }
} 
</script> 
 // child.vue
<template> 
    <div @click="handleClick">{{ massage }}</div>
</template>
<script> 
export default {
    props:{
       massage:{
           type: String,
           dafault: ''
       }
    },
    methods: {
        handleClick() {
            this.$emit('child', '这是子数据')
        },
        change(value) {
            console.log(value) //数据
        }
    }
} 
</script>
Vue3
// 父组件
<template> 
    <child @child='childs' :msg="massage"></child>
</template>
<script setup> 
   import { ref } from 'vue'
   let massage = ref('父组件数据')
   const child = ref(null)
   child.value.change('数据')
   let childs = (data) => {
       console.log(data) //这是子数据
   },
</script> 
 // child.vue
<template> 
    <div @click="handleClick">{{ massage }}</div>
</template>
<script setup> 
    const props = defineProps({
      massage: {
        default: () => '',
      },
    })
    const emit = defineEmits(['child'])
    let handleClick= ()=> {
        emit('child', '这是子数据')
    },
    let change = (value) => {
        console.log(value) //数据
    }
    defineExpose({
      change,
    })

Vue与React区别

  • 相同点

1. 组件化开发

  1. 都采用组件化开发的方式，
  2. 再Vue3中，组件可以被定义为一个对象，并包含一个template、script和style标签；
  3. 再React中，组件可以定义为一个类或者函数，并且采用JSX语法来描述组件的结构和行为；

2. 响应式数据绑定

  1. Vue3和React都支持响应式数据绑定，这意味着当数据变化时，UI界面会自动更新。
  2. 在Vue3中，数据变化会触发视图的重新渲染。
  3. 在React中则会调用组件的render方法重新生成虚拟DOM树；

3. 虚拟DOM机制

  1. Vue3和React都采用了虚拟DOM机制来进行高效的页面更新。
  2. 虚拟DOM是一个轻量级的JavaScript对象，它描述了UI界面的状态和结构，当数据发生变化时，框架会通过比较前后两个虚拟DOM树的差异来进行页面更新。

4. 组件之间的通信

  1. Vue3和React都支持父子组件之间的通信。
  2. 在Vue3中，通过props和$emit方法可以实现父子组件之间的数据传递和事件监听
  3. 在React中，则通过props和回调函数来实现同样的功能。
  • 不同点

1. 响应式数据绑定的实现方式不同

  1. Vue3使用了Proxy API 来实现响应式数据绑定，这使得代码更加简洁易懂，并且能够支持动态添加和删除属性。
  2. 而React则需要使用setState方法来触发视图的重新渲染，这使得代码相对负责一些。
  3. Vue3的响应式API还允许开发者在模板中直接使用响应式数据
  4. React则需要手动将数据传递给组件。
  5. Vue采用响应式数据，对数据进行劫持，API proxy可以对对象进行代理； React是调用方法通知视图更新；

2. 组件状态管理的实现方式不同

  1. Vue 3引入了Composition API，使得组件状态管理更加灵活和可维护。开发者可以将逻辑相关的代码封装为单独的函数，从而实现更好的代码复用和组织。
  2. React则通过生命周期方法和hooks来管理组件状态，虽然也能够实现相同的功能，但是代码相对较为冗长。

3. 组件渲染方式不同

  1. Vue 3采用了template语法来描述组件的结构和行为，这使得代码可读性更高，并且能够更好地与设计师协作。在模板中可以使用if、for等语句来实现复杂的逻辑控制。
  2. React则采用JSX语法来描述组件的结构和行为，这使得代码更加灵活，并且能够更好地与JavaScript集成。但是，由于JSX需要手动添加标签，因此代码可读性相对较差。

如何选择

1) 核心思想不同
    Vue: 灵活易用的渐进式框架；
    React： 推崇函数式编程（纯组件），数据不可变及单向数据流；
2）组件写法差异
    Vue： 推荐的做法是template的单文件组件格式，即html，css，js写在同一个文件中；
    react： 推荐的做法是JSX，把HTML和CSS全都写进JavaScript中；
3）diff算法不同
    Vue： 采用双端比较的算法；
    react: 首先对新集合进行遍历，通过唯一的key来判断是否存在相同的节点；
4） 响应式原理不同
     Vue： Vue依赖收集，自动优化，数据可变
     递归监听data的所有属性，直接修改
     数据改变时，自动找到引用组件重新渲染；
     react： 手动优化，数据不可变，需要setState驱动新的state替换老的state；
     当数据改变时，以组件为根目录，默认全部重新渲染；

如何选择

  1. Vue 3和React都是非常优秀的前端框架，它们各自具有自己的优点和适用场景。
  2. Vue3在易学易用、模板语法、响应式数据绑定等方面具有优势，适合开发小型和中型应用程序；
  3. 而React在虚拟DOM机制、状态管理、可扩展性等方面具有优势，适合开发大型和复杂的Web应用程序。
  4. 在选择框架时，需要根据项目需求和团队技术能力来进行判断和选择。

同时，尽管两者存在一些不同之处，但它们都采用了组件化思想，这为开发者提供了更好的代码组织方式和可维护性。

avatar
文章
阅读
粉丝