Vue3.0 を使用して得た知識ポイント (1)

関連する学習の推奨事項: JavaScript ビデオ チュートリアル

フロントエンド開発には花が咲き、スキルはまだ成熟していません、しかし百のスキルが生まれます。 途方に暮れており、どこから始めればよいかわかりません。詳細については、編集者をフォローしてください。

最近仕事が忙しくてなかなか記事を書く時間が取れない今日の記事は主にVue3.0#の初期勉強中にまとめたメモです## まとめると、この記事を読むことで、Vue3.0 の環境セットアップを自分で完了できるようになり、同時に の新機能のいくつかも理解できるようになります。独自の開発を促進するための Vue3.0Vue3.0 の学習。この記事は最初に公開アカウント [フロントエンド Youyouwan] で公開されました。しばらくの間 === をフォローしてください。さらに多くの面接の質問があなたを待っています。

この記事のすべての例は、

ant design vue2.0 を使用して実装されています。ant design vue2.0 の詳細については、2x.antdv を参照してください。 .com/docs/ vue/in…

初期化環境

前回の記事では

vite で開発環境を構築しましたが、実際にはvite は完全なプロジェクトをサポートできるほど完璧ではないため、この記事では引き続き vue-cli スキャフォールディングを使用して環境を構築することを選択します。

エディターで使用される

vue-cli のバージョンは 4.5.4 です。バージョンが古い場合は、npm update @ を渡すことができます。 vue/ cli を使用して、スキャフォールディング バージョンをアップグレードします。インストールされていない場合は、npm install @vue/cli -g

スキャフォールディングを使用して、新しいプロジェクト

#ワークスペースでターミナル (
1. cmd

   ) を開き、vue create my-vue3-test を通じてプロジェクトを初期化します。コマンド

# の最初の手順では、
2. 手動で機能を選択

   を選択して機能を手動で選択します

そして、# を選択します##

Choose Vue version
Babel
TypeScript
Router
Vuex
CSS Pre-processors
Linter/Formatter复制代码

# から
3. Space

   と上下のキーを押します。 ##次に Enter

   を押し、

   Vue

   バージョンを選択するように求められるので、
   3.x(プレビュー)
   4. クラス スタイルのコンポーネント構文を使用しますか?
   n
   5. を選択します。つまり、n## と入力します。 # を押して Enter を押し、プロンプトを表示します TypeScript と一緒に Babel を使用する、y `
   6. ルーターに履歴モードを使用するInputn
   7. 次にcssプリプロセッサの選択Less
   8. eslintSelect ESLint Prettier
   9. 次に、保存時に lint を実行しますと 専用設定ファイル内で
   10. 最後に Enter キーを押してプロジェクトの構築を完了します
   11. プロジェクトを開始します
   #新しいプロジェクトが完了したら、プロジェクトに入ります
   cd my-vue3-test
を実行し、

yarnserve

を実行してプロジェクト

開始後、http://localhost:8080/## にアクセスできます。 #Access projectConfigurationant design vue

##Vue3.0 の正式版がまだリリースされていない時点では、中国では比較的有名なフロントエンド

UI

ライブラリが Vue3 を最初に継承しています。 .0 を独自の

UI

ライブラリに追加します。PC の終わりは主に ant-design -vue で、モバイル バージョンは主に vant# です##、この記事のすべてのサンプル コードは ant-design-vue に基づいています。まず、ant-design-vue ## をインストールします。 #インストールの依存関係<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>yarn add ant-design-vue@2.0.0-beta.6 yarn add babel-plugin-import -D复制代码</pre><div class="contentsignin">ログイン後にコピー</div></div>構成ant-design-vueロードオンデマンド

プロジェクトのルートディレクトリを入力し、
1. babelファイルを開きます。 .config.js

   ファイルを作成し、その中のコンテンツを

   module.exports = {  presets: ["@vue/cli-plugin-babel/preset"],  plugins: [    // 按需加载
       [      "import",      // style 为 true 加载 less文件
         { libraryName: "ant-design-vue", libraryDirectory: "es", style: "css" }
       ]
     ]
   };复制代码

2. vue3 antdv を使用してみます。小さなページを追加するには、コードを直接置き換えます。

   views/Home.vue

   ファイルに <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;a-form layout=&quot;inline&quot; :model=&quot;state.form&quot;&gt; &lt;a-form-item&gt; &lt;a-input v-model:value=&quot;state.form.user&quot; placeholder=&quot;Username&quot;&gt; &lt;template v-slot:prefix &gt;&lt;UserOutlined style=&quot;color:rgba(0,0,0,.25)&quot; /&gt;&lt;/template&gt; &lt;/a-input&gt; &lt;/a-form-item&gt; &lt;a-form-item&gt; &lt;a-input v-model:value=&quot;state.form.password&quot; type=&quot;password&quot; placeholder=&quot;Password&quot; &gt; &lt;template v-slot:prefix &gt;&lt;LockOutlined style=&quot;color:rgba(0,0,0,.25)&quot; /&gt;&lt;/template&gt; &lt;/a-input&gt; &lt;/a-form-item&gt; &lt;a-form-item&gt; &lt;a-button type=&quot;primary&quot; :disabled=&quot;state.form.user === &amp;#39;&amp;#39; || state.form.password === &amp;#39;&amp;#39;&quot; @click=&quot;handleSubmit&quot; &gt; 登录 &lt;/a-button&gt; &lt;/a-form-item&gt; &lt;/a-form&gt;&lt;/template&gt;&lt;script&gt;import { UserOutlined, LockOutlined } from &quot;@ant-design/icons-vue&quot;;import { Form, Input, Button } from &quot;ant-design-vue&quot;;import { reactive } from &quot;vue&quot;;export default { components: { UserOutlined, LockOutlined, [Form.name]: Form, [Form.Item.name]: Form.Item, [Input.name]: Input, [Button.name]: Button }, setup() { const state = reactive({ form: { user: &quot;&quot;, password: &quot;&quot; } }); function handleSubmit() { console.log(state.form); } return { state, handleSubmit }; } };&lt;/script&gt;复制代码</pre><div class="contentsignin">ログイン後にコピー</div></div> を追加してプロジェクトを再起動すると、正常に使用できることがわかります。

   ant-design-vue
が消えています。 。

3. Vue3.0 の新しいエクスペリエンスのセットアップ

   Vue3.0

   の登場に関して、最も注目を集めているのは Vue3 .0 です。 の

   Composition API
、

Composition API

では、二極化が特に深刻であると言えます。この新しい設計と開発手法を特に好む人もいれば、私が感じる人もいます。

Composition API

を使用するとスパゲッティ スタイルのコードを簡単に作成できるということです (おそらくこの人たちは蘭州ラーメンを知りません)。 Composition API が良いか悪いかについてはコメントしませんが、とにかく、私は単なる開発者です。このセクションで紹介する setup は、Composition API への入り口です。 <h4 id="setup介绍">setup介绍</h4><p><code>setup是Vue3.0提供的一个新的属性，可以在setup中使用Composition API,在上面的示例代码中我们已经使用到了setup，在上文代码中我们在setup中通过reactive初始化了一个响应式数据，然后通过return返回了一个对象，对象中包含了声明的响应式数据和一个方法，而这些数据就可以直接使用到了template中了,就像上文代码中的那样。关于reactive，我将会在下一小节为你带来说明。

setup 的参数说明

setup函数有两个参数，分别是props和context。

1. props

   props是setup函数的第一个参数，是组件外部传入进来的属性，与vue2.0的props基本是一致的，比如下面代码

   export default {  props: {    value: {      type: String,      default: ""
       }
     },
     setup(props) {    console.log(props.value)
     }
   }复制代码

   但是需要注意的是，在setup中，props是不能使用解构的，即不能将上面的代码改写成

   setup({value}) {    console.log(value)
    }复制代码

   虽然template中使用的是setup返回的对象，但是对于props，我们不需要在setup中返回，而是直接可以在template使用，比如上面的value，可以直接在template写成

   <custom-component :value="value"></custom-component>复制代码

2. context

   context是setup函数的第二个参数，context是一个对象，里面包含了三个属性，分别是

   • attrs

     attrs与Vue2.0的this.$attrs是一样的，即外部传入的未在props中定义的属性。对于attrs与props一样，我们不能对attrs使用es6的解构，必须使用attrs.name的写法

   • slots

     slots对应的是组件的插槽，与Vue2.0的this.$slots是对应的,与props和attrs一样，slots也是不能解构的。

   • emit

     emit对应的是Vue2.0的this.$emit, 即对外暴露事件。

setup 返回值

setup函数一般会返回一个对象，这个对象里面包含了组件模板里面要使用到的data与一些函数或者事件，但是setup也可以返回一个函数，这个函数对应的就是Vue2.0的render函数，可以在这个函数里面使用JSX，对于Vue3.0中使用JSX，小编将在后面的系列文章中为您带来更多说明。

最后需要注意的是，不要在setup中使用this，在setup中的this和你真正要用到的this是不同的，通过props和context基本是可以满足我们的开发需求的。

了解Composition API，先从reactive和ref开始

在使用Vue2.0的时候，我们一般声明组件的属性都会像下面的代码一样

export default {
  data() {    return {      name: '子君',      sex: '男'
    }
  }
}复制代码

然后就可以在需要用到的地方比如computed,watch,methods,template等地方使用，但是这样存在一个比较明显的问题，即我声明data的地方与使用data的地方在代码结构中可能相距很远，有一种君住长江头，我住长江尾，日日思君不见君，共饮一江水的感觉。而Composition API的诞生的一个很重要的原因就是解决这个问题。在尤大大在关于Composition API的动机中是这样描述解决的问题的:

1. 随着功能的增长，复杂组件的代码变得越来越难以阅读和理解。这种情况在开发人员阅读他人编写的代码时尤为常见。根本原因是 Vue 现有的 API 迫使我们通过选项组织代码，但是有的时候通过逻辑关系组织代码更有意义。
2. 目前缺少一种简洁且低成本的机制来提取和重用多个组件之间的逻辑。

现在我们先了解一下Compositon API中的reactive和ref

介绍reactive

在Vue2.6中， 出现了一个新的api,Vue.observer,通过这个api可以创建一个响应式的对象，而reactive就和Vue.ovserver的功能基本是一致的。首先我们先来看一个例子

<template>
  <!--在模板中通过state.name使用setup中返回的数据-->
  <p>{{ state.name }}</p></template><script>import { reactive } from "vue";export default {
  setup() {    // 通过reactive声明一个可响应式的对象
    const state = reactive({      name: "子君"
    });    // 5秒后将子君修改为 前端有的玩
    setTimeout(() => {
      state.name = "前端有的玩";
    }, 1000 * 5);    // 将state添加到一个对象中然后返回
    return {
      state
    };
  }
};</script>复制代码

上面的例子就是reactive的一个基本的用法，我们通过上面的代码可以看到reactive和Vue.observer声明可响应式对象的方法是很像的，但是他们之间还是存在一些差别的。我们在使用vue2.0的时候，最常见的一个问题就是经常会遇到一些数据明明修改了值，但是界面却并没有刷新，这时候就需要使用Vue.set来解决，这个问题是因为Vue2.0使用的Object.defineProperty无法监听到某些场景比如新增属性，但是到了Vue3.0中通过Proxy将这个问题解决了，所以我们可以直接在reactive声明的对象上面添加新的属性，一起看看下面的例子

<template>  <p>
    <p>姓名:{{ state.name }}</p>
    <p>公众号：{{ state.gzh }}</p>
  </p></template>
<script>
import { reactive } from "vue";
export default {
  setup() {
    const state = reactive({
      name: "子君"
    });
    // 5秒后新增属性gzh 前端有的玩
    setTimeout(() => {
      state.gzh = "前端有的玩";
    }, 1000 * 5);
    return {
      state
    };
  }
};
</script>复制代码

上面的例子虽然在state中并没有声明gzh属性，但是在5s后我们可以直接给state添加gzh属性，这时候并不需要使用Vue.set来解决新增属性无法响应的问题。

在上面的代码中，reactive通过传入一个对象然后返回了一个state,需要注意的是state与传入的对象是不用的，reactive对原始的对象并没有进行修改，而是返回了一个全新的对象，返回的对象是Proxy的实例。需要注意的是在项目中尽量去使用reactive返回的响应式对象，而不是原始对象。

const obj = {}const state = reactive(obj)// 输出falseconsole.log(obj === state)复制代码

介绍ref

假如现在我们需要在一个函数里面声明用户的信息，那么我们可能会有两种不一样的写法

// 写法1let name = '子君'let gzh = '前端有的玩'// 写法2let userInfo = {  name: '子君',  gzh: '前端有的玩'}复制代码

上面两种不同的声明方式，我们使用的时候也是不同的，对于写法1我们直接使用变量就可以了，而对于写法2，我们需要写成userInfo.name的方式。我们可以发现userInfo的写法与reactive是比较相似的，而Vue3.0也提供了另一种写法，就像写法1一样，即ref。先来看一个例子。

<template>  <p>
    <p>姓名:{{ name }}</p>
  </p></template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const name = ref("子君");
    console.log(&#39;姓名&#39;,name.value)
    // 5秒后修改name为 前端有的玩
    setTimeout(() => {
      name.value = "前端有的玩";
    }, 1000 * 5);
    return {
      name
    };
  }
};
</script>复制代码

通过上面的代码，可以对比出来reactive与ref的区别

1. reactive传入的是一个对象，返回的是一个响应式对象，而ref传入的是一个基本数据类型（其实引用类型也可以），返回的是传入值的响应式值
2. reactive获取或修改属性可以直接通过state.prop来操作，而ref返回值需要通过name.value的方式来修改或者读取数据。但是需要注意的是，在template中并不需要通过.value来获取值，这是因为template中已经做了解套。

在Vue3.0优雅的使用v-model

v-model并不是vue3.0新推出的新特性，在Vue2.0中我们已经大量的到了v-model,但是V3和V2还是有很大的区别的。本节我们将主要为大家带来如何在Vue3.0中使用v-model,Vue3.0中的v-model提供了哪些惊喜以及如何在Vue3.0中自定义v-model。

在Vue2.0和Vue3.0中使用v-model

在Vue2.0中如何实现双向数据绑定呢？常用的方式又两种，一种是v-model，另一种是.sync,为什么会有两种呢？这是因为一个组件只能用于一个v-model，但是有的组件需要有多个可以双向响应的数据，所以就出现了.sync。在Vue3.0中为了实现统一，实现了让一个组件可以拥有多个v-model，同时删除掉了.sync。如下面的代码，分别是Vue2.0与Vue3.0使用v-model的区别。

1. 在Vue2.0中使用v-model

   <template>
     <a-input v-model="value" placeholder="Basic usage" /></template><script>export default {
     data() {    return {      value: &#39;&#39;,
       };
     },
   };</script>复制代码

2. 在Vue3.0中使用v-model

   <template>
     <!--在vue3.0中，v-model后面需要跟一个modelValue，即要双向绑定的属性名-->
     <a-input v-model:value="value" placeholder="Basic usage" /></template><script>export default {  // 在Vue3.0中也可以继续使用`Vue2.0`的写法
     data() {    return {      value: &#39;&#39;,
       };
     },
   };</script>复制代码

   在vue3.0中，v-model后面需要跟一个modelValue，即要双向绑定的属性名，Vue3.0就是通过给不同的v-model指定不同的modelValue来实现多个v-model。对于v-model的原理，下文将通过自定义v-model来说明。

自定义v-model

使用Vue2.0自定义一个v-model示例

1. 组件代码

<template>
  <p class="custom-input">
    <input :value="value" @input="$_handleChange" />
  </p></template><script>export default {  props: {    value: {      type: String,      default: &#39;&#39;
    }
  },  methods: {
    $_handleChange(e) {      this.$emit(&#39;input&#39;, e.target.value)
    }
  }
}</script>复制代码

2. 在代码中使用组件

   <template>
       <custom-input v-model="value"></custom-input></template><script>
       export default {
       data() {      return {        value: &#39;&#39;
         }
       }
     }</script>复制代码

   在Vue2.0中我们通过为组件设置名为value属性同时触发名为input的事件来实现的v-model，当然也可以通过model来修改属性名和事件名，可以看我以前的文章中有详解。

使用Vue3.0自定义一个v-model示例

1. 组件代码

   <template>
     <p class="custom-input">
       <input :value="value" @input="_handleChangeValue" />
     </p></template><script>export default {  props: {    value: {      type: String,      default: ""
       }
     },  name: "CustomInput",
     setup(props, { emit }) {    function _handleChangeValue(e) {      // vue3.0 是通过emit事件名为 update:modelValue来更新v-model的
         emit("update:value", e.target.value);
       }    return {
         _handleChangeValue
       };
     }
   };</script>复制代码

   2. 在代码中使用组件

      <template>
        <!--在使用v-model需要指定modelValue-->
        <custom-input v-model:value="state.inputValue"></custom-input></template><script>import { reactive } from "vue";import CustomInput from "../components/custom-input";export default {  name: "Home",  components: {
          CustomInput
        },
        setup() {    const state = reactive({      inputValue: ""
          });    return {
            state
          };
        }
      };</script>复制代码

   到了Vue3.0中，因为一个组件支持多个v-model，所以v-model的实现方式有了新的改变。首先我们不需要使用固定的属性名和事件名了，在上例中因为是input输入框，属性名我们依然使用的是value，但是也可以是其他任何的比如name,data,val等等，而在值发生变化后对外暴露的事件名变成了update:value，即update:属性名。而在调用组件的地方也就使用了v-model:属性名来区分不同的v-model。

   总结

   在本文中我们主要讲解了开发环境的搭建，setup,reactive,ref,v-model等的介绍，同时通过对比Vue3.0与Vue2.0的不同，让大家对Vue3.0有了一定的了解，在下文中我们将为大家带来更多的介绍，比如技术属性，watch,生命周期等等，敬请期待。本文首发于公众号【前端有的玩】，学习Vue,面试刷题，尽在【前端有的玩】，乘兴裸辞心甚爽，面试工作屡遭难。 幸得每日一题伴，点击关注莫偷懒。，下周一新文推送，不见不散。

   结语

   不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高

   想了解更多编程学习，敬请关注php培训栏目！
   

   以上がVue3.0 を使用して得た知識ポイント (1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。