Virtual DOM

一 理解vue的生命周期，首先需要注意几个关键字 　　1. el :选择器 　　2. $el：对应选择器的template模板（html代码） 　　3. render：也是vue实例中的一项，其参数更接近vue解析器，按优先级，render参数 > vue实例对象中有template > 外部的HTML模板 后面两个也是将其编译成render函数 　【注意】render选项参数比template更接近Vue解析器！所以优先级如下： 　　　　 render函数选项 > template参数 > 外部HTML 　　4. $mount ：当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中，假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。例如： 　　new Vue({内部无el项}).$mount('#app')是延迟加载，同下面的语句相同 　　 new Vue({el:"#app",***}) 二 各个生命周期 beforecreate》created》beforeMount》mounted》beforeDestroy 1. beforecreate：el 和 data 并未初始化； 　　案例：可以在这加个loading事件 及获取路由参数，但是this.(data｜computed｜methods）参数均为undefind（无法访问到 el 属性和

从小程序开发者工具源码看原理实现 来源 https://www.cnblogs.com/wonyun/p/11168698.html 使用微信小程序开发已经很长时间了，对小程序开发已经相当熟练了；但是作为一名对技术有追求的前端开发，仅仅熟练掌握小程序的开发感觉还是不够的，我们应该更进一步的去理解其背后实现的原理以及对应的考量，这可能会解释我们在开发过程中遇到的一些疑惑，比如为啥小程序不能操作dom、小程序是web技术渲染还是native技术渲染等等，另一方面对于我们个人成长也是有帮助的。 首先声明下，文章查看小程序开发者工具源码的方法仅限学习使用。 本文将从以下几个方面来说一下小程序的实现原理 如何查看小程序开发者工具源码 小程序架构设计 1、小程序渲染是在同一个线程吗？双线程机制 2、小程序是web渲染吗？界面渲染机制 3、小程序是用web的html标签渲染吗？Exparser组件框架 4、小程序可以操作dom吗？数据驱动 5、小程序基础库作用到底是什么? 如何查看小程序开发者工具源码 下面我们通过微信小程序开发者工具的源码来说说小程序的底层实现原理。以开发者工具版本号 State v1.02.1904090 的源码来窥探小程序的实现思路。如何查看微信源码，对于mac用户而言，查看微信小程序开发者工具的包内容，然后进入 Contents/Resources/app.nw/js

vue参考---VUE程序运行过程 一、总结 一句话总结： template->ast(abstract syntax tree)->render->virtual dom->UI 1、runtime-compiler 和 runtime-only 的运行原理（运行过程）？ runtime-compiler：template->ast(abstract syntax tree)->render->virtual dom->UI runtime-only：性能更高、代码量更少：render->virtual dom->UI 2、npm install vue-loader vue-template-compiler --save-dev中的vue-template-compiler的作用是什么？ vue-template-compiler将vue中的template转换成render 3、Runtime-Compiler和Runtime-only的选择使用情况？ 如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler 如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only 二、VUE程序运行过程 博客对应课程的视频位置： 来源： oschina 链接： https://my.oschina.net/u/4323704

　　好程序员web前端培训分享React学习笔记（二），组件的数据挂载方式，属性(props)props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props 　　属性是描述性质、特点的，组件自己不能随意更改。 　　之前的组件代码里面有props的简单使用，总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件，需要通过函数的参数来接收props: import React, { Component, Fragment } from 'react'import ReactDOM from 'react-dom'​class Title extends Component { render () { return ( <h1>欢迎进入{this.props.name}的世界</h1> ) }}​const Content = (props) => { return ( <p>{props.name}是一个构建UI的库</p> )}​class App extends Component { render () { return ( <Fragment> <Title name="React" /> <Content

Vue3.0 来了，你们准备好了么？ 　　就在国庆的第五天，10月5日凌晨，web前端开发框架Vuejs的作者：尤雨溪在微博宣布Vue3.0版本终于要面正式推出了！ 　　 其实，在11月14日-16日于多伦多举办的 VueConf TO 2018 大会上，尤雨溪发表了名为 “ Vue 3.0 Updates ” 的主题演讲，对 Vue 3.0 的更新计划、方向进行了详细阐述。 1.更快 Virtual DOM 完全重写，mounting & patching 提速 100% ； 更多编译时（compile-time）提醒以减少 runtime 开销； 基于 Proxy 观察者机制以满足全语言覆盖及更好的性能； 放弃 Object.defineProperty ，使用更快的原生 Proxy ； 组件实例初始化速度提高 100％ ； 提速一倍/内存使用降低一半。 2.更小 Tree-shaking 更友好； 新的 core runtime: ~10kb gzipped 3.更易维护 Flow -> TypeScript Decoupled Packages（解耦包） 编译器重写 4.更易于原生 自定义 Renderer API 5.让开发者更轻松 Exposed reactivity API 轻松识别组件重新渲染的原因 改进 TypeScript 以支持 w/TSX 改进警告追踪

**摘要：**Jquery该退役了 原文： 为什么越来越少的人用jQuery 作者： Lemonade Fundebug 经授权转载，版权归原作者所有。 最早期的开发，大多都使用jQuery，它给我们带来了很多的便利：快速选取元素，方便操作DOM元素的API，各个浏览器之间完美的兼容性，链式操作，动画、ajax等等都是jQuery为前端开发人员来带的好处。为什么现在越来越少人用了呢？我来分以下几点，阐述我的想法： 一、JS更新带来的冲击 1. 快速选取DOM节点 对于大部分使用jQuery的开发工程师来说，能够快速选取DOM节点，这个无疑是一个重要的原因，但是就目前情况来说，这个优势显然已经荡然无存了，为什么呢？跟大家说两个API，这两个API已经非常多的人在用了，就是document.querySelector和document.querySelectorAll方法。这两个方法可以通过传入css选择器形式的字符串，就可以匹配到预期的DOM节点。以下是目前两个API的兼容情况： 从图中可以看到，这两个API已经很好的兼容各个浏览器。 Vue中也是使用此API进行元素获取的： 所以说jQuery快速选择DOM节点的优势已经不存在了。 2. 方便操作DOM元素的API 可以方便操作DOM元素的API，比如addClass 、removeClass 、toggleClass

从前面 从微信小程序开发者工具源码看实现原理（一）- - 小程序架构设计 可以知道，小程序大部分是通过web技术进行渲染的，也就是最终通过浏览器的dom tree + cssom来生成渲染树；既然最终是通过css来绘制ui布局，我们知道小程序提供的自适应css单位 rpx 在浏览器环境根本不被识别，所以小程序最终还是将 rpx 单位转化为浏览器识别的css长度单位，到底是怎么转化的呢，本节就来探讨一下转化机制。 小程序样式转换 在 从微信小程序开发者工具源码看实现原理（二）- - 小程序技术实现 中可以知道，小程序中的wxss样式文件进行的主要转换转换rpx单位，视图层模板注入转换后的wxss代码如下图： 上面的内容就是注入到视图层pageframe模板中的css代码，其内容包括： 提供rpx单位到px单位的转换 提供动态插入转换后样式内容到dom中的js方法 每个页面引入公共样式，即app.wxss转换后的css内容 上面提到的这些转换操作都是内置到小程序的 wcsc 可执行程序中，通过调用可执行程序来完成具体转换工作。最终注入到页面中的css内容如下图所示： 小程序自适应单位rpx转换 小程序的自适应布局采用的内部实现的 rpx 来完成，但是其不被web识别，所以 rpx 单位转换是指： 是将小程序的css单位rpx转换为web识别的css单位px

使用微信小程序开发已经很长时间了，对小程序开发已经相当熟练了；但是作为一名对技术有追求的前端开发，仅仅熟练掌握小程序的开发感觉还是不够的，我们应该更进一步的去理解其背后实现的原理以及对应的考量，这可能会解释我们在开发过程中遇到的一些疑惑，比如为啥小程序不能操作dom、小程序是web技术渲染还是native技术渲染等等，另一方面对于我们个人成长也是有帮助的。 首先声明下，文章查看小程序开发者工具源码的方法仅限学习使用。 本文将从以下几个方面来说一下小程序的实现原理 如何查看小程序开发者工具源码 小程序架构设计 1、小程序渲染是在同一个线程吗？双线程机制 2、小程序是web渲染吗？界面渲染机制 3、小程序是用web的html标签渲染吗？Exparser组件框架 4、小程序可以操作dom吗？数据驱动 5、小程序基础库作用到底是什么? 如何查看小程序开发者工具源码 下面我们通过微信小程序开发者工具的源码来说说小程序的底层实现原理。以开发者工具版本号 State v1.02.1904090 的源码来窥探小程序的实现思路。如何查看微信源码，对于mac用户而言，查看微信小程序开发者工具的包内容，然后进入 Contents/Resources/app.nw/js/core/index.js ，注释掉如下代码就可以查看开发者工具渲染后的代码。 // 打开 inspect 窗口 if (nw.App

Vue 双向绑定原理 mvvm 双向绑定，采用 数据劫持结合发布者-订阅者模式 的方式，通过 Object.defineProperty() 来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 几个要点： 1、实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者 2、实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数 3、实现一个 Watcher，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图 4、mvvm 入口函数，整合以上三者 具体步骤： 需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化 compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图 Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是: 在自身实例化时往属性订阅器(dep

前言：在看《深入React技术栈》时，发现该书的语言不够通俗易懂，故整理之，希望在自己理解的基础上，进一步精炼语言，做到一遍基本能明白。 注：图是用 visio2013 画的。 diff算法的作用 计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。 传统diff算法 通过循环递归对节点进行依次对比，算法复杂度达到 O(n^3) ，n是树的节点数，这个有多可怕呢？——如果要展示1000个节点，得执行上亿次比较。。即便是CPU快能执行30亿条命令，也 很难在一秒内 计算出差异。 React的diff算法 （1）什么是 调和 ？ 将Virtual DOM树转换成actual DOM树的 最少操作的过程 称为 调和 。 （2）什么是React diff算法？ diff算法是 调和的具体实现。 diff策略 React用 三大策略 将O(n^3)复杂度 转化为 O(n)复杂度 策略一（ tree diff ）： Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。 策略二（ component diff ）： 拥有相同类的两个组件 生成相似的树形结构， 拥有不同类的两个组件 生成不同的树形结构。 策略三（ element diff ）： 对于同一层级的一组子节点，通过唯一id区分。 tree diff （1