관련 학습 권장 사항: 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进行安装
在工作空间打开终端(cmd),然后通过vue create my-vue3-test 命令初始化项目
在第一步先选择Manually select features，进行手动选择功能
然后通过Space和上下键依次选择
Choose Vue version Babel TypeScript Router Vuex CSS Pre-processors Linter/Formatter复制代码
然后回车
Vue版本，选择3.x(Preview) Use class-style component syntax?选择n,即输入n然后回车Use Babel alongside TypeScript,输入y`Use history mode for router输入ncss预处理器选择Lesseslint选择ESLint + PrettierLint on save和In dedicater config files新建完项目之后，进入到项目中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
安装依赖
yarn add ant-design-vue@2.0.0-beta.6 yarn add babel-plugin-import -D复制代码
配置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" }
]
]
};复制代码尝试使用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 === '' || state.form.password === ''"
@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的问世，最吸引大家注意力的便是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 >스캐폴딩 버전을 업그레이드하려면, 설치되어 있지 않은 경우 <code>npm install @vue/cli -g🎜🎜cmd)을 열고 vue create my-vue3-를 통해 프로젝트를 초기화합니다. test 명령🎜수동으로 기능 선택을 선택하여 기능을 수동으로 선택하세요🎜를 선택하세요 Space 및 위쪽 및 아래쪽 키를 순서대로🎜export default { props: { value: { type: String, default: ""
}
},
setup(props) { console.log(props.value)
}
}复制代码Vue 버전을 선택하라는 메시지가 표시됩니다. 3.x(미리보기) 클래스 스타일 구성 요소 구문을 사용하시겠습니까?n을 선택합니다. 즉, TypeScript와 함께 Babel을 사용하고 y`를 입력하세요라우터에 기록 모드 사용라는 메시지가 표시됩니다. code>n을 입력하세요css전처리기가 Lesseslint</li>를 선택합니다. code>는 <code>ESLint + Prettier저장 시 Lint 및 전용 구성 파일cd my-vue3-test 프로젝트를 입력하고 yarnserve를 실행하면 프로젝트를 시작할 수 있습니다🎜🎜시작한 후 http:를 방문하여 프로젝트에 액세스할 수 있습니다. //localhost:8080/🎜ant design vueVue3.0 공식 버전에서는 는 아직 출시되지 않았지만 국내에서 유명한 프론트엔드 UI 라이브러리 최초로 Vue3.0을 자체 UI</code에 상속한 것입니다. > 라이브러리에서 <code>PC 쪽은 주로 ant-design-vue이고, 모바일 단말기는 주로 vant입니다. ant-design-vue를 기반으로 먼저 ant-design-vue 코드를 설치합니다>🎜setup({value}) { console.log(value)
}复制代码ant-design-vue를 구성하세요🎜🎜프로젝트 루트 디렉터리에 들어가서 babel.config.js 파일을 열고 내부 내용을 다음과 같이 수정하세요. 🎜<custom-component :value="value"></custom-component>复制代码
vue3 + antdv를 사용하여 작은 페이지를 추가해 보세요. views/Home.vue에서 코드를 교체하세요를 직접 변경합니다. 🎜export default {
data() { return { name: '子君', sex: '男'
}
}
}复制代码ant-design-vue를 정상적으로 사용할 수 있는 것을 확인할 수 있습니다. 🎜Vue3.0의 출현은 모든 사람의 관심을 끌고 있습니다. 제가 가장 주목하고 있는 것은 Vue3.0의 Composition API입니다. Composition API에 관해서는 양극화라고 할 수 있습니다. 특히나 심각하네요. 어떤 사람들은 새로운 디자인과 개발 방법을 특히 좋아하는 반면, 다른 사람들은 Composition API를 사용하면 스파게티 같은 코드를 작성하기 쉽다고 생각합니다(아마 이 사람들은 란저우 라면을 모르는 것 같습니다). . Composition API가 좋은지 나쁜지에 대해서는 언급하지 않겠습니다. 어쨌든 저는 단지 개발자일 뿐입니다. 이번 섹션에서 소개하는 설정은 Composition API의 입구입니다. 🎜setup是Vue3.0提供的一个新的属性，可以在setup中使用Composition API,在上面的示例代码中我们已经使用到了setup，在上文代码中我们在setup中通过reactive初始化了一个响应式数据，然后通过return返回了一个对象，对象中包含了声明的响应式数据和一个方法，而这些数据就可以直接使用到了template中了,就像上文代码中的那样。关于reactive，我将会在下一小节为你带来说明。
setup函数有两个参数，分别是props和context。
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>复制代码
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函数一般会返回一个对象，这个对象里面包含了组件模板里面要使用到的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的动机中是这样描述解决的问题的:
现在我们先了解一下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('姓名',name.value)
// 5秒后修改name为 前端有的玩
setTimeout(() => {
name.value = "前端有的玩";
}, 1000 * 5);
return {
name
};
}
};
</script>复制代码通过上面的代码，可以对比出来reactive与ref的区别
reactive传入的是一个对象，返回的是一个响应式对象，而ref传入的是一个基本数据类型（其实引用类型也可以），返回的是传入值的响应式值reactive获取或修改属性可以直接通过state.prop来操作，而ref返回值需要通过name.value的方式来修改或者读取数据。但是需要注意的是，在template中并不需要通过.value来获取值，这是因为template中已经做了解套。Vue3.0优雅的使用v-modelv-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的区别。
在Vue2.0中使用v-model
<template>
<a-input v-model="value" placeholder="Basic usage" /></template><script>export default {
data() { return { value: '',
};
},
};</script>复制代码在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: '',
};
},
};</script>复制代码在vue3.0中，v-model后面需要跟一个modelValue，即要双向绑定的属性名，Vue3.0就是通过给不同的v-model指定不同的modelValue来实现多个v-model。对于v-model的原理，下文将通过自定义v-model来说明。
v-modelVue2.0自定义一个v-model示例<template>
<p class="custom-input">
<input :value="value" @input="$_handleChange" />
</p></template><script>export default { props: { value: { type: String, default: ''
}
}, methods: {
$_handleChange(e) { this.$emit('input', e.target.value)
}
}
}</script>复制代码在代码中使用组件
<template>
<custom-input v-model="value"></custom-input></template><script>
export default {
data() { return { value: ''
}
}
}</script>复制代码在Vue2.0中我们通过为组件设置名为value属性同时触发名为input的事件来实现的v-model，当然也可以通过model来修改属性名和事件名，可以看我以前的文章中有详解。
Vue3.0自定义一个v-model示例组件代码
<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>复制代码在代码中使用组件
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
