webStorage （Window.sessionStorage和Window.localStorage）1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样）2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。3.相关API：1.```xxxxxStorage.setItem('key','value');```该方法

为什么要封装？在我们项目的后续业务中的很多地方都需要操作本地存储，如果每次都像上面那样写的话比较麻烦，所以我们这里建议把操作本地存储的代码封装到一个单独的模块中进行处理。封装方法创建 src/utils/storage.js 模块。在文件中封装方法并导出/* 封装本地存储模块 */export const getItem = name => {// 获取数据const data = wind

指定组件显示的内容：new Vue({选项})el 选项，通过一个选择器找到容器，容器内容就是组件内容提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实例挂载之后，元素可以用 vm.$el 访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。项目

VeeValidate 是 Vue.js 表单验证框架。VeeValidatehttps://vee-validate.logaretm.com/第一步：安装npm i vee-validate@4.0.3第二步：导入// 导入组件import { Form, Field } from 'vee-validate'export default {name: 'LoginForm',componen

了解toRef：创建一个 ref 对象，其value值指向另一个对象中的某个属性。语法：const name = toRef(person,'name')应用: 要将响应式对象中的某个属性单独提供给外部使用时。扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)代码演示我们在组件中定义了一个人的信息 并将定义的信息返回 在页面中使用&lt.

作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。<template><div><input type="text" v-model="keyWorld"><h1>值是：{{keyWorld}}</h1></div></template><script>import { custo

消息订阅与发布（pubsub）一种组件间通信的方式，适用于任意组件间通信。使用步骤：安装pubsub：npm i pubsub-js引入:import pubsub from 'pubsub-js'接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。methods(){ demo(data){......} } ...... mounted() { this.pid = p

toRaw：作用：将一个由reactive生成的响应式对象转为普通对象。使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。markRaw：作用：标记一个对象，使其永远不会再成为响应式对象。应用场景:有些值不应被设置为响应式的，例如复杂的第三方类库等。当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。代码演示大气...

创建组件并配置路由首先我们创建了一个登录组件 src/views/login/index.vue将登陆页面组件配置到路由中const routes = [{path: '/login',name: 'login',component: () => import('@/views/login')}]这里给大家普及一个小知识：在 VueCLI创建的项目中 @ 表示 src 目录...

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）下面我们通过一个简单的例子来了解什么是数据代理let obj = {x:100}let obj2 = {y:200}Object.defineProperty(obj2,'x',{get(){return obj.x},set(value){obj.x = value}})我们定义了两个对象 obj 和 obj2然后通过Object.de