vue3.0学习笔记
文章大部分的内容是看了技术胖的视频写的，有的也是贴的他的注解，感谢技术胖
搭建项目
vuecli搭建
安装vue-cli 须（v4.5.4以上版本），低版本自行更新
npm install -g @vue/cli
快速生成项目
vue create 项目名称
根据自己需要选择，如果想要ts，选择第三项
? Please pick a preset: (Use arrow keys) //请选择预选项
> Default ([Vue 2] babel, eslint) //使用Vue2默认模板进行创建
Default (Vue 3 Preview) ([Vue 3] babel, eslint) //使用Vue3默认模板进行创建
Manually select features //手动选择(自定义)的意思
空格键根据自己需要来进行选择，加上一个ts
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
(*) Babel
(*) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors //CSS预处理器
(*) Linter / Formatter //格式化工具
( ) Unit Testing //单元测试
( ) E2E Testing //E2E测试
选择3.x的版本
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
3.x (Preview)
我还不知道这个语法具体是干什么的，后面再补充吧，先选n
Use class-style component syntax?
是否使用TypeScript和Babel的形式编译 JSX.选n，没有写jsx什么的
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
eslint配置，先选第一项，有需要自己再配
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)
lint的特性，有需要fix就选fix，自己配，我先选只校验
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save //保存的时候进行Lint
( ) Lint and fix on commit //需要帮你进行fix（修理），这项我们不进行选择
配置文件是否单独存放，我们选单独存放
Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
需不需要把这些配置保存下来，下次好直接进行使用。自己看情况选择，我选n
Save this as a preset for future projects? (y/N)
然后安装再起项目就可以了
npm run serve
文件类目
|-node_modules -- 所有的项目依赖包都放在这个目录下
|-public -- 公共文件夹
---|favicon.ico -- 网站的显示图标
---|index.html -- 入口的html文件
|-src -- 源文件目录，编写的代码基本都在这个目录下
---|assets -- 放置静态文件的目录，比如logo.pn就放在这里
---|components -- Vue的组件文件，自定义的组件都会放到这
---|App.vue -- 根组件，这个在Vue2中也有
---|main.ts -- 入口文件，因为采用了TypeScript所以是ts结尾
---|shims-vue.d.ts -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件
|-.browserslistrc -- 在不同前端工具之间公用目标浏览器和node版本的配置文件，作用是设置兼容性
|-.eslintrc.js -- Eslint的配置文件，不用作过多介绍
|-.gitignore -- 用来配置那些文件不归git管理
|-package.json -- 命令配置和包管理文件
|-README.md -- 项目的说明文件，使用markdown语法进行编写
|-tsconfig.json -- 关于TypoScript的配置文件
|-yarn.lock -- 使用yarn后自动生成的文件，由Yarn管理，安装yarn包时的重要信息存储到yarn.lock文件中，不使用就没有
钩子和Api
setup和ref
setup 函数的用法，可以代替 Vue2 中的 date 和 methods 属性，直接把逻辑写在 setup 里就可以
使用setup()语法就不用写data了，一开始用不习惯，在setup里声明的变量，需要return才可以在页面中使用
<template>
<div>
<img alt="Vue logo" src="./assets/logo.png" />
<button v-for="(item, index) in boys" v-bind:key="index" @click="toSelectboy(index)">
{
{
index }} : {
{
item }}
</button>
<div>你选择踢【{
{
selectedBoy }}】一脚</div>
</div>
</template>
<script lang="ts">
import {
defineComponent,
ref
} from "vue";
export default defineComponent({
name: "App",
setup() {
const boys = ref(["渣虎", "渣辉", "渣茂"]);
const selectedBoy = ref("");
const toSelectboy = (index: number) => {
selectedBoy.value = boys.value[index];
};
return {
boys,
selectedBoy,
toSelectboy
};
},
components: {
},
});
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
在setup里声明的变量，想响应式需要用ref包裹一下，但是每次获取变量值的时候，并不能直接拿到这个值，需要.value，这样就很麻烦，我们来用reactive优化一下
reactive
reactive接受的参数是一个object，把要声明的变量都作为object的属性
<template>
<div>
<button v-for="(item, index) in data.boys" v-bind:key="index" @click="data.toSelectboy(index)">
{
{
index }} : {
{
item }}
</button>
<div>你选择踢【{
{
data.selectedBoy }}】一脚</div>
</div>
</template>
<script lang="ts">
import {
defineComponent,
reactive,
ref
} from "vue";
export default defineComponent({
name: "App",
setup() {
const data = reactive({
boys: ["渣虎", "渣辉", "渣茂"],
selectedBoy: "",
toSelectboy: (index: number) => {
data.selectedBoy = data.boys[index];
}
})
// const boys = ref(["渣虎", "渣辉", "渣茂"]);
// const selectedBoy = ref("");
// const toSelectboy = (index: number) => {
// selectedBoy.value = boys.value[index];
// };
return {
data
};
},
components: {
},
});
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
但是如果这样写的话，页面上每个变量前面都要加上data，所以我们再优化一下，（注意，返回时直接用拓展运算符去展开data是没有用的，那样返回的就是普通的变量，不能再具有响应式的能力）
使用 toRefs
<template>
<div>
<button v-for="(item, index) in boys" v-bind:key="index" @click="toSelectboy(index)">
{
{
index }} : {
{
item }}
</button>
<div>你选择踢【{
{
selectedBoy }}】一脚</div>
</div>
</template>
<script lang="ts">
import {
defineComponent,
reactive,
ref,
toRefs
} from "vue";
export default defineComponent({
name: "App",
setup() {
const data = reactive({
boys: ["渣虎", "渣辉", "渣茂"],
selectedBoy: "",
toSelectboy: (index: number) => {
data.selectedBoy = data.boys[index];
}
})
const refData = toRefs(data);
return {
...refData
};
},
components: {
},
});
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
这样就可以再页面上直接用变量了，我们再优化一下，加上类型注解
<template>
<div>
<button v-for="(item, index) in boys" v-bind:key="index" @click="toSelectboy(index)">
{
{
index }} : {
{
item }}
</button>
<div>你选择踢【{
{
selectedBoy }}】一脚</div>
</div>
</template>
<script lang="ts">
import {
defineComponent,
reactive,
toRefs
} from "vue";
interface DataProps {
boys: string[];
selectedBoy: string;
toSelectboy: (index: number) => void;
}
export default defineComponent({
name: "App",
setup() {
const data: DataProps = reactive({
boys: ["渣虎", "渣辉", "渣茂"],
selectedBoy: "",
toSelectboy: (index: number) => {
data.selectedBoy = data.boys[index];
}
})
const refData = toRefs(data);
return {
...refData
};
},
components: {
},
});
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
生命周期
注意：生命周期函数不要用箭头函数（箭头函数没有自己的this，所以可能会报错）
setup里的生命周期钩子
setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
onActivated(): 没用过，技术胖说是被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数（还没用过）。
const app = {
name: "App",
setup() {
console.log("1-开始创建组件-----setup()");
const data: DataProps = reactive({
boys: ["渣虎", "渣辉", "渣茂"],
selectedBoy: "",
toSelectboy: (index: number) => {
data.selectedBoy = data.boys[index];
}
})
onBeforeMount(() => {
console.log("2-组件挂载到页面之前执行-----onBeforeMount()");
});
onMounted(() => {
console.log("3-组件挂载到页面之后执行-----onMounted()");
});
onBeforeUpdate(() => {
console.log("4-组件更新之前-----onBeforeUpdate()");
});
onUpdated(() => {
console.log("5-组件更新之后-----onUpdated()");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
export default app;
vue2的钩子函数还是可以继续用的
看一下vue2和vue3的对比
Vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured
状态跟踪
onRenderTracked直译过来就是状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，他都会跟踪。只要页面有update的情况，他就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在。
引用然后再setup里使用
import {
.... ,onRenderTracked,} from "vue";
onRenderTracked((event) => {
console.log("状态跟踪组件----------->");
console.log(event);
});
状态触发
onRenderTriggered直译过来是状态触发，它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来。
使用和onRenderTracked一致，event的属性如下
- key 哪个变量发生了变化
- newValue 更新后变量的值
- oldValue 更新前变量的值
- target 目前页面中的响应变量和函数
watch
引入watch
import {
... , watch} from "vue"
在setup里实现watch
watch(要监听的变量, (newValue, oldValue) => {
要做的事
});
如果监听reactive变量data里的属性，需要用函数返回的形式，否则会报错
watch([变量1, () => data.变量], (newValue, oldValue) => {
console.log(`new--->${
newValue}`);
console.log(`old--->${
oldValue}`);
});
监听多个变量，拿到的回调的值也是一个数组
模块化
模块化ts文件一般放在hooks目录下
新建一个useNowTime.ts文件
import {
ref} from "vue";
const nowTime = ref('00:00:00')
const getTime = () => {
const now = new Date();
const hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours()
const minu = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes()
const sec = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds()
nowTime.value = hour + ":" + minu + ":" + sec
console.log(nowTime.value);
}
export {
nowTime,
getTime
}
在需要用到的地方引入
import {
nowTime, getNowTime } from "./hooks/useNowTime";
记得在setup里一定要return出去，页面才能用
return {
nowTime,getNowTime};
当然，模块化里可以封装好暴露一个方法，比如调一个api，然后拿到这个方法的返回值，这里是用的技术胖的链接，哈哈，感谢技术胖
import {
ref } from "vue"
import axios from "axios"
function useAxiosUrl(url: string) {
const result = ref(null)
const loading = ref(true)
const loaded = ref(false)
const error = ref(null)
axios.get(url).then( (res) => {
loading.value = false
loaded.value = true
result.value = res.data
}).catch(e => {
console.log(e);
loading.value = false
})
return {
result ,
loading,
loaded ,
error
}
}
export default useAxiosUrl
页面引入
import useAxiosUrl from "./hooks/useUrlAxios"
使用
const {
result,
loading,
loaded
} = useAxiosUrl("https://apiblog.jspang.com/default/getGirl")
记得return
return {
result,
loading,
loaded
};
路由
vue2和vue3的对比
生成路由
// vue2
const router = new Router({
mode: history,
...
});
// vue3
import {
createRouter, createWebHistory} from 'vue-next-router';
const router = createRouter({
history: createWebHistory(),
...
})
base,vue3里传给createWebHistory()的第一个参数为base
// vue2
const router = new Router({
base: __dirname,
...
})
// vue3
import {
createRouter, createWebHistory} from 'vue-next-router';
const router = createRouter({
history: createWebHistory(/),
...
})
// 导航守卫----vue2
import router from ‘./router‘
router.beforeEach((to, from, next) => {
// ...
if (to.matched.length === 0) {
next('/404')
} else {
next()
}
//console.log(to, from, next, '路由守卫')
})
//导航守卫----vue3，在app.vue里
import {
useRouter
} from 'vue-router';
export default {
name: 'App',
setup() {
const router = useRouter();
router.beforeEach((to, from, next) => {
// ...
if (to.matched.length === 0) {
next('/404')
} else {
next()
}
})
}
}
vue2里到一个不存在的路由，除非配置了404，否则会到根页面，而vue3push或者resolve一个不存在的命名路由时，会引发错误，不会导航到根路由，页面空白
替代vuex
还没有看，后面再写