随笔分类 -  vue

整个前端性能提升大致分几类
摘要：1、静态资源的优化 主要是减少静态资源的加载时间，主要包括html、js、css和图片。 a、减少http请求数：合并js、css、制作雪碧图以及使用http缓存； b、减小资源的大小：压缩文件、压缩图片，小图使用base64编码等； c、异步组件和图片懒加载； d、CDN加速和缓存（bootCND 阅读全文
posted @ 2020-04-16 22:41 2350305682 阅读(862) 评论(0) 推荐(0)
Vue.use中都发生了什么
摘要：主要是执行install方法，用来进行全局注册，如果注册过了不会重新注册。 vue.use()往全局注入一个插件，供全局真接使用, 不需要单独引用。 阅读全文
posted @ 2020-04-08 18:51 2350305682 阅读(374) 评论(0) 推荐(0)
实现一个Vue的数据双向绑定原理
摘要：vue.js采用数据劫持结合发布-订阅者模式，通过Object.defineProperty()来劫持（重新定义）data中各个属性的setter、getter,在数据变动时，发布消息给订阅者，触发相应的监听回调。 （setter和getter是对象的存储器属性，是一个函数，用来获取和设置值） <! 阅读全文
posted @ 2020-04-07 16:39 2350305682 阅读(145) 评论(0) 推荐(0)
Vue组件中的data为什么是个函数？
摘要：1、我们在不同地方使用同一个组件时，容易产生数据相互干扰。 2、函数可以产生新的作用域，避免变量污染。 阅读全文
posted @ 2020-04-07 16:37 2350305682 阅读(238) 评论(0) 推荐(0)
vue声明周期方法
摘要：const app=new Vue({ el:'#root', template:'', data:{}, beforeCreate(){ //events、data已经初始化，但是没有绑定响应属性 }, created(){ //data已经绑定响应属性 }, beforeMount(){ //执 阅读全文
posted @ 2020-04-07 16:35 2350305682 阅读(236) 评论(0) 推荐(0)
vue中怎样动态添加属性
摘要：<button @click="addObjB"></button> data:{ obj:{ a:'' } } methods:{ addObjB(){ this.$set(this.obj,'b',111) } } Vue数组、对象改变视图不更新： 第一种情况： 基本数据类型和对象：实例化的时候 阅读全文
posted @ 2020-04-07 16:34 2350305682 阅读(16192) 评论(0) 推荐(0)
vue中监控某个属性的变化
摘要：1.深度监控，监测所有属性的变化 watch:{ obj:{ handler(newVal,oldVal){ }, deep:true } } 2.监测某个属性的变化： watch:{ 'obj.a':{ handler(newVal,oldVal){ } }, '$route.path'(newV 阅读全文
posted @ 2020-04-07 16:28 2350305682 阅读(4831) 评论(0) 推荐(0)
虚拟DOM (virtual DOM)
摘要：1、定义 虚拟dom就是一个简单的对象，包含标签名（tag）、属性（attr）、子元素（children），通过js操作virtual DOM，最终映射到真实的dom上。 2、为什么要用虚拟dom： 频繁地操作dom，会造成页面的回流和重绘，增加性能开销，降低页面的渲染速度。 把dom的操作放到js 阅读全文
posted @ 2020-04-03 23:01 2350305682 阅读(247) 评论(0) 推荐(0)
Vue发布-订阅者模式
摘要：1、vue响应原理： vue.js采用数据劫持结合发布-订阅者模式，通过Object.defineProperty()来劫持data中各个属性的setter、getter,在数据变动时，发布消息给订阅者，触发响应的监听回调。 （setter和getter是对象的存储器属性，是一个函数，用来获取和设置 阅读全文
posted @ 2020-04-03 22:57 2350305682 阅读(7859) 评论(0) 推荐(0)
path模块
摘要：一、dirname 作用：动态获取当前文件夹的绝对路径 二、filename 作用：动态获取当前文件的绝对路径 三、path.jion([path1][, path2][, ...]) 作用：使用当前系统路径分隔符连接路径 四、path.resolve([from ...], to) 作用：相当于将 阅读全文
posted @ 2020-03-14 15:23 2350305682 阅读(171) 评论(0) 推荐(0)
vue相关
摘要：一、mvvmmodel：基本的业务逻辑view：页面视图viewModel：接口提供两个东西：动作和数据，将model和view两者联系在一起。 优点：1.降低耦合，视图（view）和数据（model）可以独立开来；2.可重用性，把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视 阅读全文
posted @ 2020-03-13 23:44 2350305682 阅读(123) 评论(0) 推荐(0)
Vue首页加载过慢 解决方案
摘要：一、什么导致了首页初步加载过慢：app.js文件体积过大 二、解决方法： 1、Vue-router懒加载 vue-router懒加载可以解决首次加载资源过多导致的速度缓慢问题：vue-router支持WebPack内置的异步模块加载系统。所以，那些使用较少的路由组件不必打包进bundles里，只需要 阅读全文
posted @ 2019-05-07 15:08 2350305682 阅读(8313) 评论(1) 推荐(0)