Vue
文章平均质量分 94
泥猴桃
web前端开发
展开
-
通过 snabbdom 库,来窥探 vue2.x 虚拟DOM 和 Diff 算法
前言**vue2.x 版本中的虚拟DOM 和 Diff 算法借鉴了 snabbdom 库,所以这篇文章以 snabbdom 库代码为例,来分析 虚拟 DOM 和 Diff 算法。本文仅仅是自己对 虚拟 dom 和diff 算法的一些分析和理解,如果有写的不对的地方,还请指正。本篇文章内部代码均是抽离出来的简化版本。想看源码的同学,请自行在 github 上搜索 snabbdom **虚拟 DOM 是什么 ?虚拟 dom 其实就是由 js 对象,一个包含一些特定属性的对象,特定属性(比如 属性 sel原创 2021-02-27 20:55:00 · 394 阅读 · 1 评论 -
Obeject.defineProperty() 实现一个简单的双向绑定
Vue 内部使用了 Obeject.defineProperty() 来实现双向绑定,通过这个函数可以监听到 set 和 get的事件首先我们来了解一下 Obeject.defineProperty () 的使用方法var data = { name: 'yck' }observe(data)let name = data.name // -> get valuedata.name = 'yyy' // -> change valuefunction observe(obj)原创 2020-12-03 21:35:41 · 379 阅读 · 1 评论 -
Vue 项目首次加载速度优化
vue-cli 版本2.9.6服务器配置:4核8G内存 5M带宽优化手段:CDN 加载静态资源路由按需加载服务端配置nginx 开启gzip 压缩最终结果:生产环境首次加载1s左右完成前段时间接到公司任务。项目首次加载速度特别慢,首次加载要10多秒才能加载完。这个时间对于一个正常用户绝对是无法忍受的。于是开始网上查阅vue 相关速度优化资料。最终经过三天时间的摸索改造,通过使用CD...原创 2020-03-14 21:41:30 · 1977 阅读 · 0 评论 -
vue之mixin理解与使用
文章写的很好,复制过来分享一下:原文连接常见场景有两个非常相似的组件,他们的基本功能是一样的,但他们之间又存在着足够的差异性,此时的你就像是来到了一个分岔路口:我是把它拆分成两个不同的组件呢?还是保留为一个组件,然后通过props传值来创造差异性从而进行区分呢?两种解决方案都不够完美:如果拆分成两个组件,你就不得不冒着一旦功能变动就要在两个文件中更新代码的风险,这违背了 DRY 原则。反之,...转载 2020-03-12 21:48:09 · 157 阅读 · 0 评论 -
vue-2.6.10版本源代码断点调试方法
版本: vue-2.6.10, 一定要保证版本一致因为最开始调试源码的时候下载的是这个版本,后来在百度上找到的一些方法,发现那些方法都是一两年前的,根本不管用了,因为版本迭代,vue源码的配置已经变了!1,先在github上找到vue源码连接:https://github.com/vuejs/vue/tree/v2.6.10然后切换到2.6.10版本上再clone2,安装依赖,修改配置...原创 2019-12-15 16:48:49 · 1487 阅读 · 1 评论 -
mavon-editor 使用教程,上传图片,以及配置, 并且接续存储的md格式的数据
mavon-editor是一款基于vue的markdown编辑器,比较适合博客系统。由于官网对于一些细节的说明不够详细,这里对这里对该编辑器的使用做一个总结。安装npm install mavon-editor --save基本使用在vue-cli构建的脚手架离得main.js可以像这样引用:// 全局注册 import Vue from 'vue' import ma...原创 2019-08-14 22:50:38 · 26399 阅读 · 10 评论 -
vue2 上传图片,使用axios发送FormData 格式数据,参数为空
最近在用vue2 做项目的时候碰到一个简单的上传图片功能,用的是axios ,用FromData 发送数据,但是发现参数从事穿不过去。但是console.log 文件的时候明明是有的, 就算是设置 axios 的headerheaders:{'Content-Type':'multipart/form-data'}还是不管用。而且还设置不上去,我信了你的邪哦,经过一番百度总算找到了答...原创 2019-08-14 22:28:56 · 8233 阅读 · 4 评论 -
webpack vue-cli2 区分测试 和 线上 环境
vue-cli2 自动创建的项目,已经给配合好了 dev 开发环境 和 prot 线上环境,但是实际开发中大部分会用到 test 测试环境。下面对测试环境进行配置。vue-cli 版本 2.96 其他2.xx 的版本略有不同,其他2.xx版本 可以参考下边的连接https://www.jianshu.com/p/30d30d2835b21. 复制一份build/build.js 文件命名...原创 2019-08-14 22:17:41 · 862 阅读 · 0 评论 -
vue 框架this.$router.go(0) safari 浏览器不刷新
this.$router.go(0)方法在safari 浏览器上不能刷新页面,vue 现在也没有解决这个问题。后来百度一番发现也没有什么其他好的方法,只能用js 原生的 window.location.reload() 方法刷新页面window.location.reload()...原创 2019-06-27 19:56:41 · 6036 阅读 · 0 评论 -
this.$router.push() 和 router-link在IE11下页面不跳转
最近发现一个兼容问题 vue-router 的this.$router 和 router-link方法在IE 下不管用,页面不能跳转(又是万恶的IE),最后百度找到了一个决绝兼容的方法记录一下!<template> <div id="app"> <router-view/> </div></template><...原创 2019-06-27 19:53:06 · 2440 阅读 · 0 评论 -
vue 项目, 父组件中每次点击按钮重新加载子组件,(重新生成dom 元素)
vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性。很多情况下,父组件中都会引用子组件这种情况。通过给在父组件中引用的子组件标签上添加属性,来渲染可以拥有不同数据的子组件。但是vue 的组件有个特点,如果我们这一次和上一次传过去的属性值一样的话,watch 监听的属性因为没有新的变化(这次的值和上一次的值一样watch 中调用的函数不执行),...原创 2019-06-19 00:09:02 · 40259 阅读 · 49 评论 -
vue所有生命周期函数/钩子函数理解
下边是一个template 的代码,里边包含了所有vue 生命周期函数,我们可以vue-cli 项目中新建一个模板把下边代码全都复制进去,然后F12打开审查元素,观察这些生命周期函数打印出来的log 里的区别!<template> <div class="lifecycle"> <p>打开审查元素查看console.log 的值, 点击...原创 2018-12-16 15:39:44 · 247 阅读 · 0 评论 -
vue-cli 构建的项目,本地手机端预览
前提: 手机和电脑在同一wifi下一:打开项目的package.json文件,修改里面的script里面的dev在dev 键值最后边加上--host 192.168.199.196192.168.199.196 就是自己的本地ip地址windows 查看ip 地址 打开终端,或者git bash输入 ipconfig里边的ipv4 就是自己的本地ipmac 查看ip ,也是打...原创 2018-12-21 00:43:30 · 490 阅读 · 0 评论 -
vue-cli 安装,卸载,安装指定版本,和创建项目问题相关整理
vue-cli2.x.x 版本 安装指定版本所有版本安装,前提是已经全局安装过node 和 全局安装过webpacknpm install -g vue-cli@2.x.x vue-cli2.x.x 版本卸载npm uninstall -g vue-clivue-cli3.x.x 版本安装3.0 级以上版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/clin...原创 2018-12-09 15:58:29 · 20892 阅读 · 1 评论