完整代码地址： https://github.com/dirkhe1051931999/vue-ssr-template demo 地址： https://github.com/dirkhe1051931999/common-demo/tree/master/vue-ssr-demo 服务端渲染、SPA、同构 服务端渲染：后端不仅仅进行数据的获取处理，而且也服务页面生成，最终传给客户端（浏览器）是…

vue 与 electron https://github.com/SimulatedGREG/electron-vue 安装 打包

适用页面嵌入 dom 业务，比如一个问卷弹窗等，类似 template.js、ejs 语法，不依赖 jq，zepto，vue，可直接插入 dom 中

实现步骤 一、responsive 的实现 二、effect 的实现 三、responsive 与 effect 的结合 run 的实现 触发依赖收集与派发更新 依赖收集的实现 派发更新 四、computed 的实现 完整代码 流程图 git 地址： https://github.com/dirkhe1051931999/common-demo/tree/master/vue3-responsiv…

$listener 与 vue 自定义事件的联系 $listener 是什么 包含了组件的所有的监听器，为了实现事件回传 事件回传 组件关系，父-子-孙 孙组件点击，不用$emit（不用子组件使用自定义事件监听孙组件），实现父组件直接获取孙组件传的参数 结果，点击孙组件后，打印了 from grandson <!-- ... --> <script src=&quot;https://cdn.js…

数据获取 API root state 的获取是从 store.state 获取，如果有 module，那么就从 store.state.a 中获取，其中 a 是 module 的 key 获取 module 的数据本质上通过 module 名的 path 去访问到当前 module 的 state 一般获取 state 是通过 store.getters 方法，执行 store.getters，…

import vuex 的初始化：安装与 Store 实例化 安装 通过 mixin 的方式在组件 beforeCreate 生命周期的时候往组件注册$store Store 实例化 import Vuex from &quot;vuex&quot; 会实例化 Store 对象，并且返回 store 实例，传入 new Vue 的 options 中，并且往 Store 的构造函数传入 actio…

vuex 是什么 管理所有组件的数据和状态，实现组件通信 借鉴了 flux 和 redux 的基本思想，将状态抽离到全局，形成一个 store 类 flux 和 vuex flux flux 是一种状态管理的架构思想 flux 分为 4 个部分：1、View 视图层；2、Action 视图的消息；3、Dispatcher 接收 Actions 和执行回调；4、Store 存储状态 flux 的的执…

js 的特点 单线程 执行机制是基于 event loop 所有同步任务再主线程执行，形成执行栈 主线程之外有一个任务队列，只要一步任务有了运行结果，就在任务队列中放置一个事件 一旦执行栈的同步执行完毕，就去读取任务队列，寻找任务队列中放置的异步事件，异步事件结束等待状态，进入执行栈，开始执行 之前有写了一篇文章 js 引擎执行过程：运行机制，语法分析，创建函数调用栈，创建上下文，创建作用域链 ，…

数据驱动 DOM，DOM 的变化也会影响数据 input 中 v-model 的原理 input 中的 v-model 如何使用 源码 组件 中 v-model 的原理 组件中的 v-model 如何使用 源码 v-model 的本质 对于 input，v-model=&quot;account&quot; 是一个语法糖，通过设置一个 :value=&quot;account&quot;，并设置一…

DOM 事件与自定义事件如何用 DOM 事件与自定义事件从编译到生成事件对象的阶段 编译 addHandler 生成代码数据 DOM 事件执行时做了什么 自定义事件都做了什么 父子组件通信的实质 子组件通过父组件传入 listener，去通过$on方式去添加，当$emit 的时候会去执行这个添加的函数。 $emit是往自身派发事件，$emit 是往 vue 实例派发事件，子组件调用$emit 方法…

为什么要使用骨架屏 白屏问题一直是前端的痛点，在使用 vue SPA 中，经常会遇到白屏时间过长导致用户体验的差的情况，如何解决这个问题？大部分同学可能会想到优化 webpack、优化网络请求等。实际上，有一部分用户因为网络问题或其他问题，导致了页面速度加载缓慢，等待时间过长，这部分用户可能还没意识到是自己“硬件”问题，他们期待 2 秒内页面加载完成。显然刚才说的优化方案不是理想方案。 以往的方案…

官网 transition 实现页面切换效果 移动端 SPA 中，为了从动画上接近原生，经常会用到页面切换效果，实现的功能如下 header 内容可自定义， ， ， 都可自定义 header 的 ， 在 提前定义，路由页面的参数来源于 router.js 的配置文件。 页面切换动画不需要太多 有若干个父路由，其中有一个父路由下有若干个子路由（假设其他父路由没有子路由），该父路由的某一个子路由作为导…

component 是什么 动态组件，通过:is 来决定哪个组件需要被渲染 component 的使用 动态组件 props/$emit 组件通信 provide/inject 组件通信 keep-alive 缓存组件 index.vue a.vue b.vue 参考 component

keep-alive 是什么 keep-alive 是 vue 的内置组件，它自身不会渲染成一个 DOM，也不会出现在父组件链中， 使用 keep-alive 包裹的组件会有 和 两个事件；activated：组件激活时调用，deactivated：组件停用时调用，这两个钩子在服务器端渲染期间不被调用 不使用 keep-alive：生命周期钩子(beforeRouteEnter --> creat…

如果对 apply 的使用不太自信，可以看这篇文章 apply 、 call 、bind 三者的区别 什么是发布订阅模式(观察者模式) 订阅者可监听发布者发布的消息，一旦发布者有消息发布，那么订阅者就可以接收到消息，当然订阅者也可选择性订阅 发布订阅模式(观察者模式)实现条件 确定发布者 确定缓存列表（用于存储订阅者） 发布消息（接收消息） 最常见的发布订阅模式(观察者模式) dom 监听事件 发…

代码 执行 结果

将 AST 深度遍历，根据不同条件生成 _c(),_l(),_e(),_l(),_v() 等 render 代码字符串，最后通过 createFunction()方法转成函数 代码片段 CodegenState 定义 获取 modules 里面的函数，比如 genData，transformCode 等 genElement() 判断当前 ast 属性，执行不同代码，生成不同代码串 genIf()…

props/$emit eventBus $attrs/$listeners provide/inject $ref vuex demo 地址 定义父子关系 a.vue 是父组件，b.vue 是 a.vue 的子组件，c.vue 和 d.vue 是兄弟组件，是 b.vue 的子组件 props/$emit a.vue b.vue 实现效果 eventBus vue1.x 的 API， bus.js…

代码 执行 把 parse 的结果进行静态节点标记 结果 参考 剖析 Vue.js 内部运行机制