Vue2 開発者が Vue3 をすぐに使い始める方法について話しましょう

Vue3 をすぐに使い始めるにはどうすればよいですか?次の記事では、Vue2 と Vue3 を比較し、Vue2 開発者が Vue3 をすぐに使い始める方法を紹介します。

著者は以前 Vue2 React 開発者でしたが、プロジェクトは Vue3 で直接開始する必要があるため、すぐに学習し、React に関連するいくつかの違いを比較します。読むための前提条件: Vue2 の開発をすでに開始していること、この記事で説明する主な問題:

• Vue3 の新機能

• Vue2 と Vue3 のいくつかの違い

• Vue2 開発者が Vue3 をすぐに使い始める方法

##Vue3 と React の簡単な比較
Vue3 を使用したコンポーネント ライブラリの作成
(学習ビデオ共有:

vue ビデオ チュートリアル

)

Vue2 と Vue3

1. 簡単に言うと、

---

Vue2 は

単一ノード
• のみをサポートし、 Vue3 テンプレートは、反応フラグメントと同様に 複数のノード をサポートしています。
変更は基本的にスクリプト内にあります (オプション API -> 構成 API)。これは表示されなくなります。画面いっぱいに！ ！ ！
• style は、defineProperty の代わりに v-bind
• Proxy をサポートします。
defineProperty は配列オブジェクトの詳細な監視を実装できません。
• Proxy
  はブラウザの最新 API はさらに強力になっています。
  • IE はサポートされなくなりました。Vue2 で Vue3 による更新の一部を楽しみたい場合は、Vue2.7
  バージョン
  • # へのアップグレードを検討してください。 ##TypeScript サポート
  Vue2 は Facebook の
Flow
• を使用しており、
  TypeScript
  • を完全にサポートすることはできません (したがって、プロジェクトの初期段階でのテクノロジの選択は非常に重要です) Vue3 TypeScript完全に書き直された、React と同じ TS サポートを提供
  • 新しいエコロジー
  基本的には引き続き付属の Vue ペリフェラルのセットVue3 のアップグレードですが、状態管理が推奨されています。元の Vuex から
Pina
• • 新しい vite サポート (
  vitest
  • などを含む) に変更されました。 、公式はより多くの周辺ツールを提供しますその他の最適化
パフォーマンスの向上、サイズの縮小
• 言うまでもなく
  • イベント リスニング キャッシュ 、 @click でバインドされた関数に似ており、複数回作成する必要がなく、cacheHandler キャッシュに配置されます
  • SSR: Vue 3.0 は静的タグを直接変換しますReact と比較すると、まず JSX が仮想 DOM に変換され、次に仮想 DOM が HTML に変換されます。Vue3 ははるかに高速です。
  • フックを使用する 過去はあきらめてくださいミックスインを作成し、フックを使用して過去のミックスインのいくつかの欠点を解決します
2. ソース コード

わかりません詳細については、後ほど追加します

diff アルゴリズムの最適化

は、2 つのアルゴリズムを完全に比較する vue2 とは異なります。仮想 DOM ツリー。Vue3 は、

動的メソッドと静的メソッドの組み合わせ

を使用して diff パフォーマンスを最適化します
• 静的テンプレートはコンパイル段階を通じて分析され、ブロック ツリーがコンパイルおよび生成されます。更新のパフォーマンスは、テンプレートの全体のサイズ
=>>および
• 動的コンテンツの量に関連しており、これは非常に大きなパフォーマンスの向上です。コードをレンダリング関数の外側に移動すると、レンダリングのたびにこれらのオブジェクトが再作成されることがなくなり、メモリ使用量が大幅に改善され、ガベージ コレクションの頻度が減ります。
ソース コード管理

vue2

poly-repo

• vue2.x のソース コードsrc ディレクトリでホストされ、機能に従ってコンパイラ (テンプレートのコンパイルに関連するコード)、コア (プラットフォームに依存しない一般的なランタイム コード)、プラットフォーム (プラットフォーム固有のコード)、サーバー (サーバー側のレンダリングに関連するコード) に分割されます。 )、sfc (.vue 単一ファイル解析関連コード)、shared (共有ツール コード)、およびその他のディレクトリ
  • vue3
  mono-repo
• パッケージは #vue.js とは独立して使用できるため、ユーザーが vue3.0 の reactive スタイルを使用したい場合は、vue 全体に依存するのではなく、独立して
  reactive
  • に依存できます。 .js では、参照パッケージのサイズが削減されますが、vue2.x ではこれができません。 #ソースコード構造の比較

新しい API

複合 API とは何ですか? - Vue公式

---

• 過去にコンポーネントが長すぎた時のoptionsApiによるメンテナンス困難問題を解決
• ロジックを丸ごと再利用可能
• すべてのAPIをインポートで導入これは Tree にとって非常に重要です - シェイクは非常にフレンドリーで、関数は使用されません。パッケージ化時にクリーンアップされ、パッケージのサイズが縮小されます

#1、setup

new
• setup オプションは、コンポーネントが 作成される前に 実行されます。props が解析されると、複合 API へのエントリ ポイントとして使用されます。
Vue2 の beforeCreate および create ライフサイクルとして使用できます
• 直接記述できます
• await 構文
SFC 単一ファイル コンポーネントで直接使用できます
• < ;script lang="ts" setup> で十分ですが、<pre class="brush:php;toolbar:false">&lt;script&gt; const result = await Http.get(&amp;#39;/getUserInfo&amp;#39;) &lt;/script&gt; // or  export default {   setup(props, context) {     // Attribute (非响应式对象，等同于 $attrs)     console.log(context.attrs)     // 插槽 (非响应式对象，等同于 $slots)     console.log(context.slots)     // 触发事件 (方法，等同于 $emit)     console.log(context.emit)     // 暴露公共 property (函数)     console.log(context.expose)   } }</pre>
2、ref

を と組み合わせて使用​​することもできます。デフォルトのエクスポート

ref は、
• 基本タイプのレスポンシブ データを作成するために使用されます。
値は、データを表示するためにテンプレートでデフォルトで呼び出され、
• 。 これは、react ref と似ており、react は .current を使用して値を取得し、vue3 は .value を使用します。
• Ref の本質は Reactive を通じて作成されます。Ref(10)=>Reactive({value:10})

には特定の精神的負担があり、特にそれはスクリプトでの直接アクセスはサポートされないことも明確に述べられています。その理由は、基本型がその変更をインターセプトできないためです。もちろん、new String('foo') に似た構文を使用して基本型をラップすることを提案する人もいます。個人的には、サポートされている reactive

Additional api

Ref
• ts 定義を直接使用するのが良いのではないかと感じています。 import { type Ref } from 'vue';
isRef
• それが ref オブジェクトであるかどうかを判断します。一般に、ref、toRef、toRefs
toRefs
• によって作成された変数は、reactive object を単一の応答オブジェクト
shallowRef## に分解します。 # 独自の .value の変更を追跡する ref を作成しますが、その値を応答性にしない これは、単に ref
• triggerRef## と同じ構造を持つ非応答変数を作成すると理解されます。 # ページ DOM を強制的に更新します。作成された ref が変更されていない場合でも、dom を更新したい場合は、
• customRef を使用して、computed と同様の get および set を提供し、ref の動作をカスタマイズできます
• 3. reactive

reactive は、reference type

• 本質的なレスポンシブ データを作成するために使用されます。 reactive の各レイヤーでデータを解析することです proxy オブジェクトの応答性は
• reactive はデフォルトでは recursive です。特定のレイヤーの値が変更されると、 dom を再レンダリングするために再帰的に呼び出されます。
• を直接分解すると応答性が失われるため、toRefs
でラップする必要があります。参照型の参照アドレスを直接変更すると、応答性が失われます。
• 関連 api

readonly 変更reactive の値 読み取り専用です

• shallowReactive 浅いデータにのみ応答できます。深いデータの場合は、値のみが変更され、ビューは変更されません

import { reactive, toRefs } from 'vue'

const book = reactive({
  author: 'Vue Team',
  year: '2020',
  title: 'Vue 3 Guide',
  description: 'You are reading this book right now ;)',
  price: 'free'
})

let { author, title } = toRefs(book)

title.value = 'Vue 3 Detailed Guide' // 我们需要使用 .value 作为标题，现在是 ref
console.log(book.title) // 'Vue 3 Detailed Guide'

4. ライフサイクル

大きな違いはなく、作成したセットアップを使用し、残りは名前変更済みとして扱います

<script>
import { onMounted } from &#39;vue&#39;;

const getUserInfo = () => {
  console.log(&#39;获取用户信息&#39;);
};
onMounted(getUserInfo);
</script>

5、watch & watchEffect

watch

• 功能和vue2一致
• watch(监听参数，变化回调，配置参数)
• 注意监听对象的单个属性：watch(() => articleInfo.author, (newVal) => {}),第一个参数为箭头函数返回要监听的目标属性

import { ref, reactive, watch } from 'vue'

const counter1 = ref(0)
const counter2 = ref(0)
// 监听多个
watch([counter1, counter2], (newValue, oldValue) => {
  console.log('The new counter1 value is: ' + counter1.value)
  console.log('The new counter2 value is: ' + counter2.value)
})

const obj = reactive({
  name: 'JJ',
  age: 18
})
// 深度监听对象
watch(obj, (newValue, oldValue) => {
  console.log('The new obj value is: ' + obj.value)
}, {
   deep: true,
   immediate: true
})
// watch监听单个属性
watch(() => obj.name, (newValue, oldValue) => {
  console.log('The new obj value is: ' + obj.value)
}, {
   deep: true,
   immediate: true
})

watchEffect

• 类似React useEffect，但是不需要写依赖项，只要我们回调中引用了 响应式的属性
• 和watch的区别：
  • 同一个功能的两种不同形态，底层的实现是一样的
  • watch 可以获取到新值与旧值（更新前的值），而 watchEffect 是拿不到的。
  • watch - 显式指定依赖源，watchEffect - 自动收集依赖源
  • watchEffect 在组件初始化的时候就会执行一次用以收集依赖，watch指定了依赖，所以不需要。
  • 可以理解为watchEffect 就是配置了{ immediate: true } 的watch
• 使用场景：antfu小哥：推荐在大部分时候用 watch 显式的指定依赖以避免不必要的重复触发，也避免在后续代码修改或重构时不小心引入新的依赖。watchEffect 适用于一些逻辑相对简单，依赖源和逻辑强相关的场景（或者懒惰的场景 ）。

const stopWatch = watchEffect(
  (oninvalidate): void => {
    oninvalidate(() => {
      console.log("前置校验函数");
    });
    // 引用了响应式的属性 count
    console.log("watchEffect count变化", count.value);
  },
  {
    // 副作用刷新时机 flush 一般使用post
    // 可选：pre(组件更新前执行)/sync(强制效果始终同步触发)/post(组件更新后执行)
    flush: "post",
    // 开发调试
    onTrigger() {
      console.log("开发调试");
    },
  }
);

6、computed

• 更加灵活，可以在定义响应式变量时声明
• 作用和vue2无差异

import { ref, computed } from 'vue'

const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)
// get set写法
const plusOne = computed({
  get: () => counter.value + 1,
  set: (val) => {
    counter.value = val - 1
  },
})

plusOne.value = 1
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1
console.log(twiceTheCounter.value) // 2

组件

---

1、异步组件

• 通过进行引入defineAsyncComponent
• 可配合Suspense 进行更多操作，可用于loading和骨架屏相关，和react Suspense基本一致。不过react Suspense基本一致这个属性都不太好用，vue的不清楚实际场景咋样

// template
<suspense>
  <template>
    <asynccomponent></asynccomponent>
  </template>

  <template>
    <div>loading...</div>
  </template>
</suspense>

// script
const AsyncComponent = defineAsyncComponent(() => import('./asyncComponent.vue'))

2、Teleport传送组件

Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；类似于 React 的 Portal。之前写react是不怎么用这个属性，vue3这个估计也没多大用。

主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响

to 属性 插入指定元素位置，body，html，自定义className等等

<teleport>
    <loading></loading>
</teleport>

3、keep-alive缓存组件

• 作用和vue2还是一样的，生命周期名称变了
• 初次进入时：onMounted> onActivated
• 退出后触发 deactivated
• 再次进入：只会触发 onActivated

4、组件通信

defineXxxx

defineXxxx 无需import即可直接使用

• defineProps 代替过去的props
• defineEmits 代替过去的$emit
• defineOptions 自定义一些组件属性，比如组件名称（需要插件支持）
• defineComponent 用于render函数、TSX、IDE提醒等
• defineExpose 子组件声明的数据，暴露给父组件直接用

provide/inject

和vue2一致

vuex & pina

两者用法，除了pina没有Mutations，差别不大。但是官方推荐的东西，自然有它的各种优点

• Vuex： State、Gettes、Mutations(同步)、Actions(异步)
• Pinia： State、Gettes、Actions(同步异步都支持)
• Vuex4 用于 Vue3 ，Vuex3 用于 Vue2
• Pinia2.x 即支持 Vue2 也支持 Vue3

TS支持

---

• 可以让写react的兄弟，快速上手写vue3

• react中 {{}} => {}

• 兼容的指令：v-model，v-if，v-show

import { ref } from 'vue'
let v = ref<string>('')
const renderDom = () => {
    return (
        
           <input>
           <div>
               {v.value}
           </div>
        >
    )
}
export default renderDom</string>

插件

---

1、开源插件

unplugin-auto-import/vite

无需导入xxx，import { reactive,ref } from "vue";，只需要用即可

unplugin-vue-define-options

自定义组件名称，需要引入插件unplugin-vue-define-options,并在vite中配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import DefineOptions from 'unplugin-vue-define-options/vite';

export default defineConfig({
  plugins: [vue(), DefineOptions()],
});

不使用插件，也可以通过多写一个script标签来单独写options

<script>
    export default {
        name: "TButton",
    };
</script>
<script>
  defineOptions({
    name: &#39;TButton&#39;,
  });
</script>

2、vscode插件

volar vscode

• vetur只支持vue2，volar只支持vue3，两者冲突。
• 建议禁用vetur，格式化代码使用prettier，本地使用volar做代码高亮。

• 或者通过项目配置，指定相关插件配置

指令

---

1、v-model

• 底层语法糖时间改变，之前vue2是update:input，vue3 是update:modelValue
• 支持多个v-model
• 支持自定义修饰符
• 弃用.sync等

2、自定义指令

生命周期（和vue3一致）

• created 元素初始化的时候
• beforeMount 指令绑定到元素后调用 只调用一次
• mounted 元素插入父级dom调用
• beforeUpdate 元素被更新之前调用
• update 这个周期方法被移除 改用updated
• beforeUnmount 在元素被移除前调用
• unmounted 指令被移除后调用 只调用一次

自定义拖拽指令v-move

• 比如这个v-move 封装自定义拖拽指令

import { Directive } from "vue";
const vMove: Directive = {
  mounted(el: HTMLElement) {
    let moveEl = el.firstElementChild as HTMLElement;
    const mouseDown = (e: MouseEvent) => {
      //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
      console.log(e.clientX, e.clientY, "-----起始", el.offsetLeft);
      let X = e.clientX - el.offsetLeft;
      let Y = e.clientY - el.offsetTop;
      const move = (e: MouseEvent) => {
        el.style.left = e.clientX - X + "px";
        el.style.top = e.clientY - Y + "px";
        console.log(e.clientX, e.clientY, "---改变");
      };
      document.addEventListener("mousemove", move);
      document.addEventListener("mouseup", () => {
        document.removeEventListener("mousemove", move);
      });
    };
    moveEl.addEventListener("mousedown", mouseDown);
  },
};

Hook

---

用了react hook的人都知道很香，vue3支持这个相当不错，能解决很多业务场景的封装

1、自定义Hook

可以当做mixins写

// useWindowResize
import { onMounted, onUnmounted, ref } from "vue";

function useWindowResize() {
  const width = ref(0);
  const height = ref(0);
  function onResize() {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  }
  onMounted(() => {
    window.addEventListener("resize", onResize);
    onResize();
  });
  onUnmounted(() => {
    window.removeEventListener("resize", onResize);
  });
  
  return {
    width,
    height
  };
}

export default useWindowResize;

2、hook库

• vueuse 官方，感谢评论区@rogepi 小哥的提醒
• ahooks-vue
• v3hooks

3、react vs vue3

• Vue3 究竟好在哪里？（和 React Hook 的详细对比）ssh-晨曦时梦见

结语

---

• Vue3 的依赖追踪是全自动的，不需要担心传了错误的依赖数组给 useEffect/useMemo/useCallback 从而导致回调中- 使用了过期的值

• Vue3 Hook也没React Hook那么多限制，后续用用看怎么样

• 个人比较喜欢SFC语法，html、js、css分离开

笔者vue3也刚用不久，如有错误，还请兄弟们指出

本文所有demo都在该仓库中JJ-UI 一款Vue3组件库，参考大佬文章刚刚搭建好，后续会基于这个架子开发自己的vue3组件库

【相关视频教程推荐：vuejs入门教程、web前端入门】

以上がVue2 開発者が Vue3 をすぐに使い始める方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。