Wang的专栏

回到之间 $mount时，mountComponent 函数的过程，vm._render 是如何创建了一个 VNode，接下来就是要把这个 VNode 渲染成一个真实的 DOM 并渲染出来，这个过程是通过 vm._update 完成的，_update 它是一个vue 的私有方法，它把我们的 vnode 渲染成真实的 dom，_update的方法，也是原型上的一个方法, 它的定义在src/core/instance/lifecycle.js 中

浏览器原生dom对象，本身就是一个非常复杂的对象，单单把 div 这个dom对象拿出来，遍历它的属性，将是一个庞大的存在，因为浏览器的标准就是把这个dom设计的非常复杂，所以当我们去频繁的操作dom的话，一定会有一些性能问题，vdom(Virtual DOM), 其实就是用一个原生的js对象去描述一个dom节点，它的创建比创建一个真实的dom的代价要小很多，在vue.js中的 vdom 的定义在 src/core/vdom/vnode.js

在 $mount 时，会调用 render 方法，在写 template 时，最终也会转换成 render 方法，Vue 的 _render 方法是实例的一个私有方法，它用来把实例渲染成一个虚拟 Node

1 ) 在含有 compiler 版本中，先对 el 做一些处理2 ) 在没有定义 render 函数的时候，尝试获取一下 render 函数也就是说，把整个template通过一系列的逻辑判断，也是因为它支持很多很多种写法可以直接写 template也可以直接 template 是个dom对象如果不写 templete 的话，通过 el 的 outHTML 来获取这个 templete把这个template 通过这个编译的手段也转化成这个render函数。

因为dom变成了数据的映射，我们所有的逻辑都是对数据的修改，而并不关注dom，这样的代码非常有利于维护。它大大简化了代码量，特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变得非常清晰。它相比我们传统的前端开发，如使用 jQuery 的前端库直接去修改 dom 的的话。在vue.js中，可以采用简洁的模板语法来声明式的将数据渲染为 dom，示例。这个例子是为了说明这个数据在js中定义的这个数据 最终是怎么渲染到dom上的。所谓数据驱动，就是指视图是由数据驱动生成的。2 ）数据驱动的关注。

在Web应用的 Vue.js 构建过程的 Runtime + Compiler 版本下，我们重点关注这个版本

在 Vue.js 2.0 中，最终渲染都是通过 render 函数，如果写 template 属性，则需要编译成 render 函数。所以我们写的 .vue 文件在运行的时候已经编译成 js 函数了，并且模板部分已经编译成 render 函数了。很显然，这个编译过程对性能会有一定损耗，所以通常开发阶段更推荐使用 Runtime-Only 的 Vue.js。而 .vue文件 是在编译过程中，通过 vue-loader 处理的。那么这个编译过程会发生运行时，需要带有编译器的版本。打开 .config 文件。

Vue.js 的源码都在 src 目录下，其目录结构如下。

运行npm run build将剔除src文件夹下的所有类型注释，在dist文件夹中保存编译后的版本。额外添加的类型注释不是正确的JavaScript语法，打包编译的时候需要在源码中移除。你可以使用Babel preset来移除。我们只讨论第一种方法。编译后的文件就是普通的能运行于浏览器的JavaScript文件。7.1 使用 flow-remove-types 工具。7.2 使用 babel-preset-flow。3 ）Flow 的工作方式。1 ）number类型。2 ） Why 使用。

h函数本质上是处理一个参数的问题核心代码是在中进行的里面生成vnode的核心方法，做了一件重要的事情是构建了一个shapeFlag第一次构建的时候，它的flag是ELEMENT类型接下来return 了函数它根据typepropschildrenshapeFlag生成了一个 vnode 节点通过按位或运算，来改变flag的值，重新赋值给shapeFlag最终 return vnode 对象。

在运行时 runtime ，渲染器 renderer 会遍历整个虚拟dom树，并据此结构构建真实的dom树这个过程我们可以把它叫做挂载 mount在这个 vnode 对象发生变化时候，我们会对比 旧的 VNode 和 新的 VNode 之间的区别找出它们之间的区别，并应用这其中的变化到真实的dom上，这个过程叫做更新 patch。

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。Reflect 不是一个函数对象，因此它是不可构造的。文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy。Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。5 ） proxy的最佳合伙API: Reflect， 拦截js对象操作。

prettier 可能会和其他格式化工具存在冲突导致代码丢失，在使用中仅使用一个作为格式化的工具。vscode 扩展，添加插件，搜索：Prettier - Code formatter。如果想要配置保存时格式化，那么需要在设置中搜索 save 进行配置。在项目根目录下，创建 .prettierrc。

源码目录结构及源码阅读方法

上述 v-if 和 m-com 自定义组件不是正常的html, 浏览器是不认识的，所以不会解析。.vue文件是单文件组件, 在template中写入的html是真实的html标记节点么?vue中的编译时，准确来说是编译器的意思，核心代码在 compiler-core模块下。运行时做不到的事情，通过html标签结构的方式来渲染解析成真实的dom节点。初次渲染，会生成一个ul标签，同时生成三个li标签，并把他们挂载到div中。这个过程主要是：让假标记，被渲染成真实的html标签，最终呈现给用户。

watch 可以监听响应式数据的变化，从而触发指定的函数watch 函数监听三个参数监听的响应式对象回调函数 cb配置对象 optionsimediate: 初始化完成后会被立刻触发一次deep: 深度监听测试示例: watch.html，测试vue源码的watch函数name : '张三' }) watch(obj ,(val , oldVal) => {clearTimeout(timer) obj . name = '李四' } , 2000)

计算属性 computed 会基于其响应式依赖被缓存，并且在依赖的响应式数据发生变化时，重新计算测试示例: computed.html，测试vue源码的属性name : '张三' }) const computedObj = computed(() => {return '姓名: ' + obj . value . name }) effect(() => {clearTimeout(timer) obj . value . name = '李四' } , 2000)

ref做的三件事情返回RefImpl实例在构造函数中，对传入数据进行处理：当前传入value是简单类型，则直接使用；否则，使用reactive函数包裹，让ref.value的值变成响应式数据启动两个函数：get value, set value。

在我们业务代码中，effect 回调中进行了 getter 操作，而 setTimeout 中进行了 setter 操作, 我们回过头来再看一下这个 setter。在上述代码中，我们在 reactive 中传入了一个 对象 构建了一个 obj 对象，在 effect 中 传入了一个回调函数。响应性的核心是依赖收集和触发依赖的过程，上述的 trigger 就是触发依赖，我们看下这个函数，在 effect.ts 中。我们再看看，上述的 createDep() 发生了什么, 在 dep.ts 中。

指令的定义通过全局API的定义 Vue.directive定义指令的多种方式简单定义 Vue.directive('test', function(el, binding, vnode) { // el 是当前元素 el.style="color:" + binding.value; console.log(binding); ...

vue 相关实例演示开发环境$ nodejsvue-cli ( $ npm i --global vue-cli)$ vue init webpack appName 或 vue init webpack-simple vue-demo01$ npm i$ npm run devvue 、vuex 、vue-router 实例演示vue 中的相关注意事项在...

在ionic run 或build 或clean命令的时候，如果没有下载过gradle, 需要重新下载一次，而通过CLI的方式下载很慢，即使科学上网后，下载还是存在一些问题。这里总结一下，快速的下载安装方式。步骤本地安装 http-server 包， 通过 $ npm i -g http-server 的方式安装到全局在官网上下载自己的版本,目前自带的版本是 2.14.1，其他版本可能在执行过

移动端应用总结开篇宣言最近做了很多移动端项目，从ionic1 到ionic2 到 react native，再到微信项目 ，其中不乏踩了很多坑。很多问题都在他人的博客，相关论坛，github， 和 stackoverflow 得到了解决。但是别人的总归是别人的，如果长时间不用，自己早晚有一天会忘记，所以从现在开始，开始梳理一些经验了。技术栈范围：ionic1 ionic2reactnative