小奏

【setup reactive ref】 拉开序幕的setup 为什么使用 setup ？ 大型组件中选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。 如果能够将同一个逻辑关注点相关代码收集在一起会更好。而这正是组合式 API 使我们能够做到的。 通过创建 Vue 组件，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。然而，光靠这一点可能并不够，尤其是当你的应用变得非常大的时候，共享和重用代码变得尤为重要。 为了开始使用 组合式 API，我们首先需要一个可以实际使用它的地方。在 Vue 组件中，我们将此位置称为 setup。 简单举例： 角色权限页面功能：新增/删除角色、获取角色列表、获取角色对应的权限信息、编辑角色权限信息。 通常以前会将这些功能写在一个sfc组件（.vue），当需要修改其中1处功能逻辑时，我们就需要跳转对应的各个options api选项进行操作。当有些业务组件复杂时，代码量上去了，浏览起来会更吃力。 而有了setup、composition api后，我们可以将这例子中的4个功 ...

【创建vue3项目】 该笔记是从vue2过渡到vue3的，所以不会特别详细的介绍某些vue2学过的，主要介绍vue3新增的。 Vue3快速上手 style=“width:200px” /> Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 Vue3带来了什么 性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% … 源码的升级 使用Proxy代替defineProperty实现响应式 重写虚拟DOM的实现和Tree-Shaking … 拥抱TypeScript Vue3可以更好的支持TypeScript 新的特性 Composition API（组合API） setup配置 ref与reactive watch与watchEffect pr ...

【打包 图片懒加载】 打包 vue.config.js 123456module.exports = { //打包时不生成map文件(用来进行错误提示的文件，很占用空间) productionSourceMap: false, // 关闭ESLINT校验工具 lintOnSave: false,} 1pnpm run build 图片懒加载 懒加载vue-lazyload插件官网 插件的使用直接参考官方教程，很简单。 安装vue-lazyload插件 1pnpm add vue-lazyload@1.3.3 --save-dev 在main.js中进行引用 12345678910import VueLazyload from "vue-lazyload";//或者自定义配置插件Vue.use(VueLazyload, {preLoad: 1.3,error: require('@/assets/image/error.png'),loading: require('@/assets/image/lo ...

【Vue-Router】 相关理解 vue-router 的理解 vue的一个插件库，专门用来实现SPA应用 对SPA应用的理解 1.单页Web应用（single page web application，SPA） 2.整个应用只有一个完整的页面 3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新 4.数据需要通过ajax请求获取 路由的理解 1.什么是路由? 一个路由就是一组映射关系（key - value） key为路径，value可能是function或component 2.路由分类 后端路由 理解：value是function，用于处理客户端提交的请求 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据 前端路由 理解：value是component，用于展示页面内容 工作过程：当浏览器的路径改变时，对应的组件就会显示 ① 用户点击了页面上的路由链接（本质是a链接） ​ ② 导致了 URL 地址栏中的 Hash 值发生了变化 ​ ③ 前端路由监听了到 Hash 地址的变化 ​ ④ 前端路由把当前 Hash 地址对应的组件 ...

【Vuex】 理解 Vuex Vuex 是什么 概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信 什么时候使用 Vuex 1多个组件依赖于同一状态 2来自不同组件的行为需要变更同一状态 原理图 搭建Vuex环境 下载安装 pnpm add vuex@3 创建文件：src/store/index.js 123456789101112131415import Vue from 'vue'import Vuex from 'vuex' // 引入VuexVue.use(Vuex) // 应用Vuex插件const actions = {} // 准备actions——用于响应组件中的动作const mutations = {} // 准备mutations——用于操作数据（state）const state = {} // 准备state——用于存储数 ...

【代理配置 插槽】 1.Vue脚手架配置代理 本案例需要下载axios库npm install axios 配置参考文档 Vue-Cli devServer.proxy vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会```被 @vue/cli-service自动加载。你也可以使用package.json 中的 vue `字段，但是注意这种写法需要你严格遵照 JSON 的格式来写 利用服务器之间访问不会有跨域，在中间开启一个服务器，端口号和项目端口号一样 方法一 在vue.config.js中添加如下配置： 123devServer:{ proxy:"http://localhost:5000"} 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端静态资源） 方法二 ​ 编写vue.c ...

【nextTick 过渡与动画】 nextTick 这是一个生命周期钩子 语法：this.$nextTick(回调函数) 作用：在下一次 DOM 更新结束后执行其指定的回调。 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。 比如编辑按钮使文本变成表单且自动获取焦点 点击表单时会用一个布尔值配合v-show使表单显示，可是改变布尔值的时候，后面的focus方法会跟着执行，然后再渲染模板 123456789101112131415161718192021222324252627282930313233<template> <li> <label> <input type="checkbox" :checked="todo.done" > <span v-show="!todo.isEdit">{{ todo.title }}</s ...

【组件通信】 props 适用于的场景:父子组件通信 注意事项: 如果父组件给子组件传递数据(函数):本质其实是子组件给父组件传递数据 如果父组件给子组件传递数据(非函数):本质就是父组件给子组件传递数据 书写方式:3种 123['todos']{type:Array}{type:Array,default:[]} 特殊情况：路由传递props 1:布尔值类型，把路由中params参数映射为组件props数据 2:对象，静态数据，很少用 3:函数，可以把路由中params|query参数映射为组件props数据 自定义事件 使用于场景:子组件给父组件传递数据 on与on与on与emit $emit绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。 全局事件总线$bus 使用于场景:万能 组件实例的原型的原型指向的Vue.prototype Vue.prototype.$bus = this; 对于比较小型的项目，没有必要引入 vuex 的情况下 ...

【组件编码流程 组件自定义事件 全局事件总线】 组件编码流程 组件化编码流程： ​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。 ​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： ​ 1).一个组件在用：放在组件自身即可。 ​ 2). 一些组件在用：放在他们共同的父组件上（状态提升）。 ​ (3).实现交互：从绑定事件开始。 props适用于： ​ (1).父组件 ==> 子组件 通信 ​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数） 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！ props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。 组件自定义事件 组件自定义事件是一种组件间通信的方式，适用于：子组件 ===> 父组件 使用场景 A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。 绑定自定义事件 第一种方式，在父组件中： ...

【CLI 初始化脚手架 Vue零碎的一些知识】 Vue CLI 初始化脚手架 具体步骤 1如果下载缓慢请配置npm淘宝镜像npm config set registry http://registry.npm.taobao.org 2全局安装 @vue/cli npm install -g @vue/cli 3切换到创建项目的目录，使用命令创建项目vue create xxx 4选择使用vue的版本 5启动项目npm run serve 6打包项目npm run build 7暂停项目 Ctrl+C Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，请执行vue inspect > output.js 脚手架文件结构 1234567891011121314151617.文件目录├── node_modules ├── public│ ├── favicon.ico: 页签图标│ └── index.html: 主页面├── src│ ├── assets: 存放静态资源│ │ └── logo.png│ │── comp ...