小奏

【生命周期 模板引用】 生命周期 vue2 vue3 Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名： beforeDestroy改名为 beforeUnmount destroyed改名为 unmounted Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下： beforeCreate===>setup() created=======>setup() 在setup比beforeCreate还先执行 beforeMount ===>onBeforeMount mounted=======>onMounted beforeUpdate===>onBeforeUpdate updated =======>onUpdated beforeUnmount ==>onBeforeUnmount unmounted =====>onUnmounted 关于两个销毁生命周期，可以在组件实例上用v-if打成 所有罗列在下面的 API 都应该在组 ...

【计算属性 侦听器】 计算属性 有时我们需要依赖于其他状态(普通proxy响应式数据)的状态(computed响应式数据)： 在 Vue 中，这是用组件计算属性处理的，以直接创建计算值，我们可以使用 computed 函数：它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。 computed函数 与Vue2.x中computed配置功能一致 可以直接去看3.7.3完整写法 模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。比如说，我们有这样一个包含嵌套数组的对象： 12345678const author = reactive({ name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ]}) 我们想根据 author 是否已有一 ...

【响应式原理 ref和reactive总结 setup注意点】 Vue3.0中的响应式原理 vue2.x的响应式 实现原理： 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。 1234Object.defineProperty(data, 'count', { get () {}, set () {}}) 存在问题： 新增属性、删除属性, 界面不会更新。 直接通过下标修改数组, 界面不会自动更新。 1234567891011121314151617const person = { name: 'ds', age: 18,};// vue2 let p = {};Object.defineProperty(p, 'name', { get( ...

【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 ...