简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  Vue3.0을 사용하여 얻은 지식 포인트 (1)

Vue3.0을 사용하여 얻은 지식 포인트 (1)

coldplay.xixi
coldplay.xixi앞으로
2020-09-08 13:40:453164검색

Vue3.0을 사용하여 얻은 지식 포인트 (1)

관련 학습 권장 사항: javascript 비디오 튜토리얼

프론트 엔드 개발은 백 개의 꽃이 피는 것이며, 하나의 기술은 아직 완전히 개발되지 않았으며 모든 종류의 기술이 가능합니다. 더 많은 정보를 원하시면 편집자를 팔로우하세요.

요즘 회사 일이 너무 바빠서 글을 쓸 시간이 없네요. 오늘 글은 주로 제가 초반에 Vue3.0 공부할 때 정리한 노트 중 일부를 요약한 것입니다. 이 글을 읽으면 Vue3.0 환경 설정을 직접 완료할 수 있고, Vue3.0의 몇 가지 새로운 기능에 대해서도 배울 수 있습니다. 자신만의 Vue3 .0 학습을 촉진합니다. 이 글은 공개 계정 [Front-end Youyouwan]에 처음 게재되었습니다. 잠시 동안 ===를 팔로우하세요. 더 많은 인터뷰 질문이 기다리고 있습니다. Vue3.0时候整理的一些笔记内容进行了汇总，通过对本文的阅读，你将可以自己完成Vue3.0环境搭建，同时还会对Vue3.0的一些新的特性进行了解，方便自己进行Vue3.0的学习。本文首发于公众号【前端有的玩】，关注===会了，还有更多面试题等你来刷哦。

本文所有的示例均使用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. 在第一步先选择Manually select features，进行手动选择功能

  3. 然后通过Space和上下键依次选择

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

    然后回车

    1. 然后提示选择Vue版本，选择3.x(Preview)
    2. Use class-style component syntax?选择n,即输入n然后回车
    3. 然后提示Use Babel alongside TypeScript,输入y`
    4. Use history mode for router输入n
    5. 然后css预处理器选择Less
    6. eslint选择ESLint + Prettier
    7. 然后是Lint on save和In dedicater config files
    8. 最后一路回车即可完成项目搭建

启动项目

新建完项目之后，进入到项目中cd my-vue3-test,然后执行 yarn serve即可启动项目

启动之后即可通过访问http://localhost:8080/访问项目

配置ant design vue

在当前Vue3.0正式版还未发布之际，国内比较出名的前端UI库中率先将Vue3.0继承到自家的UI库中的，PC端主要是ant-design-vue，移动端主要是vant, 本文所有示例代码都会基于ant-design-vue来进行，首先我们先安装ant-design-vue

  1. 安装依赖

    yarn add ant-design-vue@2.0.0-beta.6
yarn add babel-plugin-import -D复制代码

  2. 配置ant-design-vue按需加载

    进入项目根目录，然后打开babel.config.js文件，将里面的内容修改为

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

  3. 尝试使用vue3 + antdv来添加一个小页面, 我们直接将views/Home.vue文件里面的代码替换为

    <template>
  <a-form layout="inline" :model="state.form">
    <a-form-item>
      <a-input v-model:value="state.form.user" placeholder="Username">
        <template v-slot:prefix
          ><UserOutlined style="color:rgba(0,0,0,.25)"
        /></template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input
        v-model:value="state.form.password"
        type="password"
        placeholder="Password"
      >
        <template v-slot:prefix
          ><LockOutlined style="color:rgba(0,0,0,.25)"
        /></template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button
        type="primary"
        :disabled="state.form.user === &#39;&#39; || state.form.password === &#39;&#39;"
        @click="handleSubmit"
      >
        登录      </a-button>
    </a-form-item>
  </a-form></template><script>import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";import { Form, Input, Button } from "ant-design-vue";import { reactive } from "vue";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: "",        password: ""
      }
    });    function handleSubmit() {      console.log(state.form);
    }    return {
      state,
      handleSubmit
    };
  }
};</script>复制代码

    然后重启一下项目，就可以发现已经可以正常使用ant-design-vue了。

Vue3.0新体验之setup

对于Vue3.0的问世，最吸引大家注意力的便是Vue3.0的Composition API，对于Componsition API，可以说是两极分化特别严重，一部分人特别喜欢这个新的设计与开发方式，而另一部分人则感觉使用Composition API很容易写出来意大利面式的代码（可能这部分人不知道兰州拉面吧）。到底Composition API是好是坏，小编不做评论，反正我只是一个搬砖的。而本小节介绍的setup就是Composition API

🎜이 기사의 모든 예제는 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스캐폴딩 버전을 업그레이드하려면, 설치되어 있지 않은 경우 <code>npm install @vue/cli -g🎜🎜

를 통해 설치할 수 있습니다. 새 프로젝트 생성을 위한 스캐폴딩

  1. 🎜작업 공간에서 터미널(cmd)을 열고 vue create my-vue3-를 통해 프로젝트를 초기화합니다. test 명령🎜
  2. 🎜첫 번째 단계에서 수동으로 기능 선택을 선택하여 기능을 수동으로 선택하세요🎜
  3. 🎜그런 다음 를 선택하세요 Space 및 위쪽 및 아래쪽 키를 순서대로🎜
    export default {  props: {    value: {      type: String,      default: ""
    }
  },
  setup(props) {    console.log(props.value)
  }
}复制代码
    🎜그런 다음 Enter를 누르세요 🎜
    1. 그러면 Vue 버전을 선택하라는 메시지가 표시됩니다. 3.x(미리보기)
    2. 클래스 스타일 구성 요소 구문을 사용하시겠습니까?n을 선택합니다. 즉, n 및 Enter 누르기
    3. 그런 다음 TypeScript와 함께 Babel을 사용하고 y`를 입력하세요
    4. 라우터에 기록 모드 사용라는 메시지가 표시됩니다. code>n을 입력하세요
    5. 그런 다음 css전처리기가 Less
    6. eslint
      7. 를 선택합니다. code>는 ESLint + Prettier
  4. 를 선택한 다음 저장 시 Lint 및 전용 구성 파일
  5. Enter를 눌러 프로젝트 구성을 완료하세요

프로젝트 시작

🎜새 프로젝트를 생성한 후, cd my-vue3-test 프로젝트를 입력하고 yarnserve를 실행하면 프로젝트를 시작할 수 있습니다🎜🎜시작한 후 http:를 방문하여 프로젝트에 액세스할 수 있습니다. //localhost:8080/🎜

구성 ant design vue

🎜Vue3.0 공식 버전에서는 는 아직 출시되지 않았지만 국내에서 유명한 프론트엔드 UI 라이브러리 최초로 Vue3.0을 자체 UI에 상속한 것입니다. > 라이브러리에서 PC 쪽은 주로 ant-design-vue이고, 모바일 단말기는 주로 vant입니다. ant-design-vue를 기반으로 먼저 ant-design-vue 코드를 설치합니다>🎜
  1. 🎜종속성 설치🎜
    setup({value}) {    console.log(value)
 }复制代码
    2. 🎜요청 시 로드되도록 ant-design-vue를 구성하세요🎜🎜프로젝트 루트 디렉터리에 들어가서 babel.config.js 파일을 열고 내부 내용을 다음과 같이 수정하세요. 🎜
    <custom-component :value="value"></custom-component>复制代码
  2. 🎜vue3 + antdv를 사용하여 작은 페이지를 추가해 보세요. views/Home.vue에서 코드를 교체하세요를 직접 변경합니다. 🎜
    export default {
  data() {    return {      name: &#39;子君&#39;,      sex: &#39;男&#39;
    }
  }
}复制代码
    🎜로 파일을 만들고 프로젝트를 다시 시작하면 ant-design-vue를 정상적으로 사용할 수 있는 것을 확인할 수 있습니다. 🎜

Vue3.0 새로운 경험 설정

🎜Vue3.0의 출현은 모든 사람의 관심을 끌고 있습니다. 제가 가장 주목하고 있는 것은 Vue3.0의 Composition API입니다. Composition API에 관해서는 양극화라고 할 수 있습니다. 특히나 심각하네요. 어떤 사람들은 새로운 디자인과 개발 방법을 특히 좋아하는 반면, 다른 사람들은 Composition API를 사용하면 스파게티 같은 코드를 작성하기 쉽다고 생각합니다(아마 이 사람들은 란저우 라면을 모르는 것 같습니다). . Composition API가 좋은지 나쁜지에 대해서는 언급하지 않겠습니다. 어쨌든 저는 단지 개발자일 뿐입니다. 이번 섹션에서 소개하는 설정은 Composition API의 입구입니다. 🎜

setup介绍

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: &#39;子君&#39;,      sex: &#39;男&#39;
    }
  }
}复制代码

然后就可以在需要用到的地方比如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 = &#39;子君&#39;let gzh = &#39;前端有的玩&#39;// 写法2let userInfo = {  name: &#39;子君&#39;,  gzh: &#39;前端有的玩&#39;}复制代码

上面两种不同的声明方式，我们使用的时候也是不同的，对于写法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>复制代码

  1. 在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>复制代码

  1. 在代码中使用组件

    <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>复制代码

    1. 在代码中使用组件

      <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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php JavaScript typescript css es6 npm yarn 数据类型 Object for select 预处理器 继承 class 引用类型 JS 对象 事件 this history input http ui
성명：
이 기사는 juejin.im에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：클로저에 대해 함께 알아볼까요?다음 기사：클로저에 대해 함께 알아볼까요?

관련 기사

더보기