随着公司项目的模块越来越多，每次打包后的项目都非常大，而且每修改一个小的模块，都会将整个项目打包，会非常的麻烦，随着前端的发展，微服务的出现，很好的解决了项目庞大的问题，而且每修改一个模块，可以单独打包发布。项目的公共组件，因为每个单独项目都会有公共的组件，不可能每个项目都复制一份，这样冗余代码太多，也不好维护1、可以通过构建一个项目组件，发布到npm上面npm麻烦的地方，在于每次组件的修改，都需要升级npm的版本号，每个项目需要重新更新新的组件，也挺麻烦的。

2、当我们在头部插入一个节点，是不是插入的节点就变成0，原来的0、1、2、3、4都加一位，我们来diff比较的时候，是不是每一项又都不一样了，sameVnode返回的都是false，标签不能复用，都要重新创建一个，插入到节点中，这样是不是也全部需要重新渲染，影响性能。3、如果我们列表每一项有一个chekbox元素，勾选的第一项，再插入新元素的时候，是不是你插入的节点被勾选了，这样是不是就不对了，有问题。4、而且每一个元素都替换，是不是特别慢，并且列表需要全部重新渲染，大大的影响的性能。...

上一篇文章主要介绍了 Vue 数据的响应式原理，今天我们主要说的是模板编译原理，主要涉及到 ast 以及大量正则匹配// Vue实例化new Vue({ el: "#app", data() { return { a: 111, }; }, // render(h) { // return h('div',{id:'a'},'hello') // }, // template:`<div id="a">hello</di.

Vue.js 一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。之前的jquery想要改变试图，是直接操作DOM来实现。现在我们只需要关心数据的改变会让代码的逻辑变的非常清晰。Vue 内部就有一个机制能监听到数据变化然后触发更新 本篇主要介绍响应式数据的原理1、数据的初始化new Vue({ el: "#app", router, store, render: (h) => h(App),});.

在我们的实际开发中，项目当中需要加载一些信息的时候，且不能操作，这样就需要在上面放个遮罩层显示加载中这就需要我们自定义指令v-loading首先我们创建文件在src文件下建directive文件夹，里面创建index.js，loading文件夹里面创建Loading.vue和index.jsloading.vue组件，用来插入到自定义指令的目标元素中// src/directive/...

项目需求最近使用 Vue 开发后台管理系统项目,开发过程遇到一个特别闹心的事情，由于项目没有上线,所有接口地址都是后台人员的电脑做为服务器，这个项目有几个后台同时开发接口，每一个大模块对应的接口地址不一样。这样按照常规写接口地址，只能调用一个模块，这样很不方便，也不符合前端的设计理念下面我们就封装一个可以调用不同服务器的方法第一步、新建一个serviceList.js文件 /src/conf...

1. 创建一个vue项目vue create mdVue因为我的示例在整个vue项目中，需要下载相应的依赖yarn add vue-router用到less编写样式yarn add --dev less less-loader用到iview的页面布局yarn add iview可以引入md文件yarn add vue-markdown-loadermain....

我们在新建一个vue项目，引入iview，写页面的时候，会遇到页面标签语法报错现象看控制台时候会提示会出现这样的报错但是网上找答案在vscode菜单中，文件->首选项->设置，找到 “vetur.validation.template”: true 将其改为false，关闭eslint的检查-----但是这样设置后，报错还是存在其实在vue项目中加上几行代码就可以了，...

先说下为什么会出现模糊的现象canvas 绘图时，会从两个物理像素的中间位置开始绘制并向两边扩散 0.5 个物理像素。当设备像素比为 1 时，一个 1px 的线条实际上占据了两个物理像素（每个像素实际上只占一半），由于不存在 0.5 个像素，所以这两个像素本来不应该被绘制的部分也被绘制了，于是 1 物理像素的线条变成了 2 物理像素，视觉上就造成了模糊我们怎么解决呢我们可以把画布的宽和高...

canvas画图的基本步骤html创建一个canvas标签画布<div class="contain"> <canvas id="myCanvas" width="444" height="500" ref="myCanvas"></canvas> </div>canvas的宽高一定要写，因为你不设置他会有一个默认的宽高30...

1、父组件传值给子组件通过props来实现传递数据父组件：&lt;template&gt; &lt;div&gt; &lt;child message="我是父组件传的值"&gt;&lt;/child&gt;&lt;!-- 如果是变量 :message 切标签用-代替驼峰--&gt; &lt;/div&gt;&lt;/template&a

一、创建新的实例来实现通信1、在src目录下创建一个bus.js import Vue from 'vue'var bus = new Vue()export default busA组件： 1、引入bus.js<template> <button @click="side">点击触发函数</button></template><script> import bus fro

vue