![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 58
qq_39740095
这个作者很懒,什么都没留下…
展开
-
vue proxy代理
vue proxy代理前言原理应用axios的baseURL前言本地和后端联调,本地的localhost:8080和后端服务地址触发了同源策略,会产生跨域。原理浏览器是禁止跨域的,但是服务端不禁止应用//vue-cli3.0 里面的 vue.config.js做配置devServer: { proxy: { '/api': { target: 'http://baidu.com', // 后台接口域名 ws: true,原创 2021-08-27 13:22:35 · 79 阅读 · 0 评论 -
虚拟DOM(vDom)
虚拟DOM-vDom前言框架比对vue虚拟DOM产生流程Diff算法vDom意义前言js是解析引擎,页面渲染是渲染引擎,两个线程之间进行通信,操作越频繁,消耗的性能越多。所以虚拟DOM应运而生。虚拟DOM本质上就是一个js对象,可以提高页面渲染性能。操作内存中的JS对象的速度显然要更快。框架比对React:虚拟DOM比对Angular:脏检查技术Vue:vue1没有引入虚拟DOM,采用的是和上面2钟框架都不一样的更细力度的检查流程(直接监听节点的状态变化),来绑定更新视图。产生大量的watch原创 2021-07-15 23:35:34 · 209 阅读 · 0 评论 -
vue源码-小知识点
小知识点data选项必须是一个函数生命周期模板语法插值指令计算属性和侦听器data选项当一个 Vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property,那么对 它的改动将不会触发任何视图的更新。Object.freeze(),这会阻止修改现有的 p转载 2021-07-15 22:01:20 · 72 阅读 · 0 评论 -
vant全局loading封装
vant全局loading封装import { Toast } from 'vant'interface Loading { message?: string, forbidClick?: boolean}export default class globalLoading<Loading> { message: string, forbidClick: boolean constructor(message: string="加载中", forbidClick: boole原创 2021-07-15 17:45:29 · 1730 阅读 · 0 评论 -
svg-icon
SVG生成ICONvue.config.jsconst path = require('path')const resolve = dir => path.join(__dirname, '.', dir)module.exports = { chainWebpack: (config) => { // 打包分析图 config.module.rules.delete('svg'); config.module.rule('svg-sprite-loader') .test原创 2021-07-15 17:30:21 · 47 阅读 · 0 评论 -
核心算法 observer
核心算法 observerObserverDep:订阅者管理中心Watcher:派发数据更新为什么vue2不能监听数组1)侦测对象数据的变化。2)收集视图依赖了哪些数据。3)数据变化时,自动通知和数据相关联的视图页面,并对视图进行更新。数据对象侦测也可以叫数据劫持,vue.js 是采用数据劫持及发布者-订阅者模式,通过Object.defineProperty()来劫持各个属性的setter,getter。在数据变动时发布消息给订阅者,触发相应的监听回调。当然我们也可以使用ES6中的Proxy来对各原创 2021-07-15 16:52:39 · 110 阅读 · 0 评论 -
vue源码-vue.use()
vue源码-vue.usevue中可能会用到很多vue.use(),比如ElementUI、Iview等插件。但是axios就不需要,axios的引入方式是:import axios from ‘axios’,这是为什么呢?因为axios没有install方法。/* @flow */import { toArray } from '../util/index'export function initUse (Vue: GlobalAPI) { Vue.use = function (plu原创 2021-07-15 09:49:47 · 55 阅读 · 0 评论 -
vue-cli4环境变量和分环境打包
vue-cli4环境变量和分环境打包基本原理环境变量概念模式概念环境变量的使用vue-cli-service serve用法vue-cli-service build用法分环境打包添加mode test添加.env.test文件基本原理环境变量概念可以在根目录的下列文件中指定环境变量:.env // 在所有环境中被载入.env.local // 在所有环境中被载入,但会被git忽略.env.[mode] // 只在指定的模式种被载入.env.[mode].local // 只在指定的模式中被原创 2021-07-06 18:07:17 · 286 阅读 · 0 评论 -
移动端适配问题
移动端适配问题安装插件配置lib-flexible配置 postcss-px2rem-exclude注意问题安装插件postcss-px2rem-exclude和amfe-flexiblenpm install postcss-px2rem-exclude --save-Dnpm install lib-flexible --save-D配置lib-flexible// main.js文件中引入lib-flexibleimport 'lib-flexible/flexible.js'配置原创 2021-06-16 14:42:15 · 60 阅读 · 0 评论 -
vue简单配置
vue简单配置productionTip基本配置查看vue.config.js配置信息基本配置Css预处理器借助less-loader预处理productionTipproductionTip设置为 false ,可以阻止 vue 在启动时生成生产提示。开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是可以避免的// main.jsVue.config.produc原创 2021-06-16 14:33:16 · 221 阅读 · 0 评论 -
vue3 新属性
vue3 script setupuseContext/defineProps/defineEmitBeforeAfter总结调用子组件的方法&属性BeforeAfter总结setup script就是vue3新出的一个语法糖,使用方法就是在书写script标签的时候在其后面加上一个setup修饰。作用:简化代码,大大提高开发效率。1、自动注册子组件(不需要在compontents中注册)2、属性和方法无需返回(setup函数中return的东西)useContext/defineProp原创 2021-06-16 11:31:29 · 305 阅读 · 0 评论