这一次的学习主要是关于VUE3的学习
VUE最近选择从2大版本升级为了3大版本
提供了很多新的特性，比如从选择式的API改为了组合式的API
更好的支持了TypeScript
增加了新的生命周期钩子
新增了新的内置组件。
那么我们从创建一个VUE3的工程开始，进行相关的讲解。
现在官方希望我们使用Vite进行项目的创建
首先是相关依赖的安装
| vue –version
npm install -g @vue/cli vue create vue_test cd vue_test npm run serve |
接下来就可以利用vite创建项目
| npm create vue@latest
进行相关的配置 2.具体配置 配置项目名称 √ Project name: vue3_test 是否添加TypeScript支持 √ Add TypeScript? Yes 是否添加JSX支持 √ Add JSX Support? No 是否添加路由环境 √ Add Vue Router for Single Page Application development? No 是否添加pinia环境 √ Add Pinia for state management? No 是否添加单元测试 √ Add Vitest for Unit Testing? No 是否添加端到端测试方案 √ Add an End-to-End Testing Solution? » No 是否添加ESLint语法检查 √ Add ESLint for code quality? Yes 是否添加Prettiert代码格式化 √ Add Prettier for code formatting? No |
然后在VS之中，我们可以首先安装官方提供的VScode 插件
Vue Language Features （Volar）
TypeScript Vue Plugin（Volar）
然后在整个项目之中，`index.html` 是项目的入口文件，在项目最外层。
在其中，利用解析script 获取指向的JavaScript
最后通过createApp函数来创建一个应用实例
| // 引入createApp用于创建应用
import {createApp} from ‘vue’ // 引入App根组件 import App from ‘./App.vue’ createApp(App).mount(‘#app’) |
之后我们看下Vue3和Vue2的基本语法差异
首先是Vue2的语法书写
| <template>
<div class=”person”> <h2>姓名：{{name}}</h2> <h2>年龄：{{age}}</h2> <button @click=”changeName”>修改名字</button> <button @click=”changeAge”>年龄+1</button> <button @click=”showTel”>点我查看联系方式</button> </div> </template> <script lang=”ts”> export default { name:’App’, data() { return { name:’张三’, age:18, tel:’13888888888′ } }, methods:{ changeName(){ this.name = ‘zhang-san’ }, changeAge(){ this.age += 1 }, showTel(){ alert(this.tel) } }, } </script> |
在代码之中，我们首先声明了
Template模版类
然后script中声明了name
然后声明了data返回的函数
最后method之中声明了相关的注册函数
从而和template进行了关联。
而在Vue3之中呢？
支持了组合风格的语法
比如原本的script下data，methods等组件
Vue3进行了组合，全部放在了一个setup之中。
在其中，配置了数据，方法，监视等
setup函数中返回的内容，可以直接在模板中使用
废弃了this这个关键字
而setup的声明周期在beforeCreate之前，领先所有钩子执行
| <template>
<div class=”person”> <h2>姓名：{{name}}</h2> <h2>年龄：{{age}}</h2> <button @click=”changeName”>修改名字</button> <button @click=”changeAge”>年龄+1</button> <button @click=”showTel”>点我查看联系方式</button> </div> </template> <script lang=”ts”> export default { name:’Person’, setup(){ // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据） let name = ‘张三’ let age = 18 let tel = ‘13888888888’ // 方法，原来写在methods中 function changeName(){ name = ‘zhang-san’ //注意：此时这么修改name页面是不变化的 console.log(name) } function changeAge(){ age += 1 //注意：此时这么修改age页面是不变化的 console.log(age) } function showTel(){ alert(tel) } // 返回一个对象，对象中的内容，模板中可以直接使用 return {name,age,tel,changeName,changeAge,showTel} } } </script> |
Setup这个函数在最后返回一个对象，其中以一个元祖的形式，返回属性 方法等
或者返回一个函数，从而利用函数来直接渲染
return ()=>{name,age,tel,changeName,changeAge,showTel}
这样我们在重新阐述下setup和原本的data之间的关系
在Vue2之中，我们一般将data数据这类关系配置到单独的一个单元之中
但在Vue3之中，我们并不单独配置，而是统一放在setup之中，而在生命周期之中，setup早于data初始化，所以setup并不能访问data中的数据，反过来则可以。
但是现在来说，我们书写setup，还是需要
声明一个组件，并在下面书写我们的变量和方法
| <script lang=”ts”>
export default { name:’Person’, setup(){ } } </script> |
还是需要声明一个函数进行返回
如果不希望书写这样一个setup进行返回，而是直接暴露其中所有变量和函数
为了避免这个问题，我们可以利用一个插件进行相关的简化
npm i vite-plugin-vue-setup-extend -D`
然后在vite.config.ts之中书写
import VueSetupExtend from ‘vite-plugin-vue-setup-extend’
之后，对应的书写就是
<script lang=”ts” setup name=”Person”>
</script>
这样我们就创建了一个名为Person的script