vue学习笔记Vue 3相较于Vue 2，引入组合式API，采用Proxy实现响应式，增强性能，优化静态节点处理，并提升

总结一些vue2和vue3的区别

原理方面

1. 使用组合式API替换选项式API：从Vue 2的选项式API（如`data`、`methods`、`computed`等选项）迁移到Vue 3的组合式API（如使用`setup`函数）。组合式API提供了更灵活的代码组织方式，使得逻辑更加聚合，便于维护和复用。

2. 响应式原理的改变：Vue 3使用`Proxy`代替了Vue 2中的`Object.defineProperty`来实现响应式系统。这解决了Vue 2中无法通过下标修改数组、无法监听对象属性的新增和删除的问题，同时也提升了响应式的效率。（Vue 3并没有完全抛弃`defineProperty`。对于通过`reactive`定义的响应式数据，Vue 3使用`Proxy`进行包装，而对于`ref`，Vue 3仍然使用`defineProperty`给一个空对象定义一个`value`属性来实现响应式。）

3. 组合式API的引入：Vue 3引入了组合式API，使得源码可以按照函数式编程的方式编写，方便按需引入。这种写法配合tree-shaking（Tree-shaking 是一种优化 JavaScript 代码的技术，它的核心目的是移除那些在代码库中未被使用的部分，从而减少最终打包文件的大小）功能，可以使得打包体积更小，因为tree-shaking功能必须配合按需引入的写法。

3. 性能方面：Vue 3增加了静态节点标记，会标记静态节点，不对静态节点进行比对，从而提高效率。

静态节点标记

在 Vue 3 中，静态节点是指那些在组件的生命周期中不会发生变化的节点。这些节点在首次渲染后，其内容和结构被认为是稳定的，因此在后续的更新中不需要再次进行比较或重新渲染。

图片中的静态节点

在图片中，我们可以看到三个 div 元素的创建：

第一个 div 元素包含静态文本 "Hello World"。
第二个 div 元素包含动态内容 {{x}}并且被标记为1。
第三个 div 元素包含动态类名 :class="a" 和静态文本 "Hello World"并且被标记为2。

在 Vue 3 的渲染过程中，第一个 div 元素可以被标记为静态节点，因为它不包含任何动态内容。这意味着在后续的更新中，Vue 可以跳过对这个节点的比较和重新渲染，从而提高性能。

性能优化

通过标记静态节点，Vue 3 可以减少不必要的 DOM 操作，因为只有动态节点需要在每次更新时被重新评估和可能的重新渲染。这种优化策略可以显著提高大型应用的性能，尤其是在包含大量节点和频繁更新的场景中。

总结

Vue 3 通过静态节点标记和优化，减少了不必要的 DOM 操作，从而提高了应用的运行效率。在图片中，第一个 div 元素是一个静态节点的例子，它在首次渲染后不需要再次进行比较或重新渲染，除非其内容或结构发生变化。这种优化是 Vue 3 提升性能的关键策略之一。

进阶操作方面

1. v-model 应用于自定义组件时的变化

在 Vue 2 的自定义组件中，v-model 传递的值是value,默认监听 change 或 input 事件来实现双向数据绑定。在 Vue 3 的自定义组件中，v-model 传递的值是modelValue,监听updata:modelValue事件来实现双向数据绑定。

2. Mixins和Hooks

Mixins

在Vue 2中，Mixins是一种常见的复用逻辑的方式。Mixins允许你在一个单独的文件中定义一些组件选项（如data、methods、computed等），然后在多个组件中复用这些选项。Mixins在Vue 2中非常流行，因为它们提供了一种简单的方式来共享功能。（但是Minins容易造成组件和自身的逻辑冲突） ``

export default {
  data() {
    return {
      commonData: ''
    };
  },
  methods: {
    commonMethod() {
      console.log('Common method called');
    }
  }
};

// MyComponent.vue
import myMixin from './mixins';

export default {
  mixins: [myMixin],
  data() {
    return {
      localData: ''
    };
  },
  methods: {
    localMethod() {
      this.commonMethod();
    }
  }
};

Hooks

在Vue 3中，引入了Composition API，其中的核心概念之一就是Hooks。Hooks提供了一种更灵活的方式来复用逻辑。与Mixins不同，Hooks允许你直接在组件内部使用函数来复用逻辑，而不是通过全局的Mixins对象。

import { ref } from 'vue';

export function useCommon() {
  const commonData = ref('');
  const commonMethod = () => {
    console.log('Common method called');
  };

  return { commonData, commonMethod };
};

// MyComponent.vue
import { useCommon } from './useCommon';

export default {
  setup() {
    const { commonData, commonMethod } = useCommon();

    const localMethod = () => {
      commonMethod();
    };

    return { commonData, localMethod };
  }
};

总结

Vue 2：虽然Mixins在Vue 2中仍然可以使用，但Vue 3的引入使得Composition API成为推荐的方式，即使在Vue 2中也可以通过@vue/composition-api插件来使用Composition API。
Vue 3：官方推荐使用Composition API和Hooks，因为它们提供了更好的逻辑复用和组织方式，使得代码更加模块化和易于维护。

总的来说，Hooks提供了一种更现代、更灵活的方式来复用逻辑，特别是在Vue 3中，它们是首选的复用方式。

3. TypeScript

Vue 3 的设计和 API 更加友好地支持 TypeScript。Vue 3 提供了更好的类型推断和类型定义，使得在使用 TypeScript 开发时可以获得更好的类型检查和代码补全支持。这有助于提高代码的质量和开发效率。

vue学习笔记