chen-cc-优快云博客

原创总结(面试题)

查找数组重复项 var find = function(arr=[]){ var result = [] // 遍历数组 arr.forEach(item=>{ // 如果item首次出现的位置和最后出现的位置的下标不同,则说明该item至少重复出现1次 if(arr.indexOf(item)!==arr.lastIndexOf(item)&&!result.includes(item))

2021-05-21 01:48:45 162

Dep 它的实例是什么时候创建的? 初始化的时候为data中的所有属性进行数据劫持(添加get和set)是创建的个数? 与data中的属性一一对应 Dep的结构? id: 每一个dep的独立标识 subs: [] n个相关的watcher的容器 Watcher 它的实例是什么时候创建的? {{a}} v-text=“a” 初始化的解析(一般指令/大括号表达式)时候创建个数? 与模版中表达式(不包含事件指令)一一对应 watcher的结构? this.cb = cb; //用于更新界面的

2021-05-07 00:44:59 151

原创微信小程序

微信小程序,小程序的一种,是一种不需要下载安装即可使用的应用小程序与普通网页开发的区别小程序的主要开发语言是JavaScript,小程序的开发同普通的网页开发相比有很大的相似性. 对于前端开发者而言,从网页开发迁移到小程序的开发成本并不高,但是二者还是有些许区别的网页开发渲染线程和脚本线程是互斥的,这也是为什么长时间的脚本运行可能会导致页面失去响应,而在小程序中,二者是分开的,分别运行在不同的线程中网页开发者可以使用到各种浏览器暴露出来的DOM API,进行DOM选中和操作而如上述所说,小

2021-05-07 00:44:38 177

原创梦学谷会员管理系统(二)

各模块技术点+难点用mock.js来模拟假数据他可以为我们提供模拟的数据,让我们在开发中便于测试,当后端接口设计好后,只需要将对应的接口请求函数的路径换掉,其他的地方不变,这样就大大提高了我们的开发效率 1.首先,我们需要安装相应的依赖 npm i mockjs --save 2.然后在项目对应的src下创建一个文该件夹mockjs，在这个文件夹内部创建一个mock.js的文件，在该文件内部，模拟mock产生的模拟数据格式。引入mock.js 获取mock.Random对象模拟数据：先创建一个生成

2021-05-06 01:06:31 273

原创梦学谷会员管理系统(一)

项目架构项目技术栈 vue-router和路由拦截 element-ui 封装api 面包屑导航侧边栏 mock.js 项目所有模块登录模块首页模块会员管理供应商商品员工

2021-05-06 00:58:54 407 1

原创小米商城项目总结(二)

各模块技术点跨域 vue.config.js中配置路由守卫 api封装全局组件难点在vuex里

2021-05-06 00:52:41 658

原创小米商城项目总结(一)

项目架构项目技术栈 vue 路由vue-router element-ui vuex 全局组件路由拦截 axios api封装项目所有模块登录模块注册模块首页模块全部商品我的订单收藏购物车

2021-05-06 00:44:33 1306

原创电商后台管理系统(二)

各模块技术点权限管理 1.修改用户信息根据id查询需要修改的用户数据 //展示编辑用户的对话框 async showEditDialog(id) { //发送请求根据id获取用户信息 const { data: res } = await this.$http.get('users/' + id) //判断如果添加失败，就做提示 if (res.meta.status !== 200) return this.$message.error('获取用户信息失败')

2021-05-06 00:33:22 234

原创电商后台管理系统(一)

项目架构项目技术栈 axios和路由拦截侧边栏和面包屑页面布局和可复用组件 element-ui 封装api 项目所有模块登录 A. 登录状态保持如果服务器和客户端同源，建议可以使用cookie或者session来保持登录状态如果客户端和服务器跨域了，建议使用token进行维持登录状态。 B. 登录逻辑：在登录页面输入账号和密码进行登录，将数据发送给服务器服务器返回登录的结果，登录成功则返回数据中带有token 客户端得到token并进行保存，后续的请求都需要将此token发送给服务

2021-05-06 00:00:45 954

原创 vue双向数据绑定原理

通过v-module来实现，原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的 vuex是一个专门为vue开发的状态管理模式语法： Object.defineProperty(obj, prop, descriptor) 其中： obj —— 要在其上定义属性的对象 prop —— 要定义或修改的属性的名称。

2021-05-05 20:53:22 104

原创 axios的封装

安装 npm install axios; // 安装axios 第一步：配置axios 首先，创建一个Service.js，这里面存放的时axios的配置以及拦截器等，最后导出一个axios对象 import axios from 'axios' import { Message, Loading } from 'element-ui' const ConfigBaseURL = 'https://localhost:3000/' //默认路径，这里也可以使用env来判断环境 let loadingIn

2021-05-05 20:49:11 152

原创 vuex的核心概念和运行机制

核心概念: （1）State: 存放基本数据 ----辅助函数mapState: 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。（2）getters：专门来计算state中的数据，相当于state中数据的计算属性 —辅助函数mapGetters辅助函数: mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局

2021-05-05 20:31:13 200

原创 vue-router钩子函数和执行顺序

vue-router的导航守卫实际和组件的生命周期都是同一类型的钩子函数，在一个特定时间内会触发。导航守卫有三个类型，分别是全局的钩子（针对整个路由器实例），单个路由对象的钩子和组件内的钩子。 const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, routes, }); //全局前置守卫 router.beforeEach((to, from, next) => { }); // 全局解

2021-05-05 20:21:14 617

原创 $nextTick

nextTick原理 1、异步说明 Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新 2、事件循环说明简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。 $nextTick的使用场景场景1 在 created 和 mounted 阶段，如果需要操作渲染后的视图，可以使用 nextTick 方法。场景2 在希望所有子组件加载完成时进行某些操作时，可以采用应用场景下面了解下nextTick的

2021-05-05 20:12:23 115

原创修改数据页面不更新的原因和解决方案

第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到第二种:通过数组下标修改数组中的元素或者手动修改数组的长度,Vue识别不到: 解决方案: 1.静默刷新(使用v-if的特性) 在修改值之后将元素销毁,然后在修改后的下一次DOM渲染完成时再显示出来,这样就会触发组件重新加载data的数据进行渲染,data中被修改的数据才是最新的 2.vue.$set 官方对这个API的解释就是使用这个api修改的数据会为其添加响应式getter和setter让其拥有数据响应的特性

2021-05-05 20:03:23 1684

原创 v-for中的key值的作用

我们都知道,vue很大的一个特点就是双向数据绑定,数据一旦改变,那么页面就会渲染新的数据呈现在页面上对于v-for渲染的列表数据来说,数据量可能一般很庞大,而且我们经常还要对这个数据进行一些增删改操作假设我们给列表增加一条数据,整个列表都要重新渲染一遍,那不就很费事吗,而key的出现就是尽可能的回避了这个问题,提高效率,如果我们给列表增加一条数据,页面只渲染了这个数据,那不就很完美了 v-for默认使用就地复用策略,列表数据修改的时候,他会根据可以值去判断某个值是否修改,如果修改,则重新渲染这一项,否则

2021-05-05 19:44:24 2706

原创 v-if和v-for的优先级

v-for和v-if不应该一起使用,必要的情况下应该替换成computed属性. 原因是:vue处理指令时,v-for比v-if优先级更高一点,如果每一次都需要遍历整个数组,将会影响速度,尤其是当需要渲染很小一部分的时候错误的写法这样的情况,即使100个user中只需要使用一个数据,也会循环遍历整个数组正确的写法 ...

2021-05-05 19:10:39 263

原创 v-if和v-show的区别

v-if v-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除，如果删除，也就是页面中不存在这个dom元素，以此达到隐藏的效果；所以v-if在每次切换的时候都会重新创建或者销毁元素，有较高的切换性能消耗；而且v-if是惰性的，如果在初始渲染时条件为假，那就什么也不做，直到条件第一次变为真时，需要渲染时才会开始渲染条件块 v-show v-show则是无论你的初始条件是什么，元素都会被渲染，就是dom元素始终是存在的，v-show只是通过控制css中的display属性来控制他的显示或隐藏；它拥

2021-05-05 18:54:51 100

原创组件中data为什么是一个函数?

组件中的data写成一个函数,数据是以函数返回值形式定义的,这样每复用一次组件,就会返回一份新的data.如果单纯的写成对象形式,就使得所有组件实例共用了一份data,造成了数据污染组件中的data 组件是一个具有单独自身功能模块的封装，这个模块有属于自己的HTML模板，也应该有属于自己的数据data，组件也有自己的方法methods 注意：组件不能直接访问Vue实例中定义的数据。就算可以访问，若将所有的数据都放在Vue实例中，Vue实例就会变得非常臃肿（数据很多），所以组件应该有自己保存数据的地方因此

2021-05-05 18:45:59 1502

原创 vue面试题总结(一)

为何组件的data必须是一个函数目的是为了防止多个组件实例对象之间共用一个data,产生数据污染采用函数的形式,initData时会将其作为工厂函数都会返回全新data对象组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。 vue的常用指令 v-model 多用于表单元素实现..

2021-04-28 21:42:27 190

原创 vue组件传值

1.父传子 prop 在父组件的子组件标签上绑定一个属性,挂在要传输的变量 [在这里插入图片描述](https://img-blog.csdnimg.cn/20210425005221793.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NDIyODA0NQ==,size_16,color_FFFFFF,t_70#pic_cen

2021-04-25 00:53:30 128

原创 vue生命周期

Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程 beforeCreate( 创建前 ) 在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。 created ( 创建后）实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件

2021-04-12 21:38:52 47

原创 JS中常用的事件类型/操作行为

事件事件就是一件事情,或者一个操作行为在JS中任何一个元素天生自带了很多的行为(和我们是否为其绑定方法没有关系) 常见的鼠标事件 click 鼠标单击事件,当单击鼠标(一般都为左键)或按下回车键时,会触发事件 dbclick 鼠标为双击事件,当双击鼠标时,会触发事件 mousedown 当任意按下鼠标键时,会触发事件 mouseup 当释放鼠标按键时,会触发事件 mouseover 当鼠标移动进到当前元素的区域就会触发事件 mouseout 当鼠标移出当前元素的区域就会触发事件 mousemove

2021-04-11 22:38:17 488

weixin_54228045的博客