Vue

  • MVVM 早期双向数据绑定是通过脏值检测来处理，现在实现方式都是通过数据劫持+发布订阅模式，也就是依靠的Object.defineProperty
  • vue3.0中响应式数据部分弃用了Object.defineProperty使用proxy来代替它。
  • vm.items[index|item] = newValue 这样的数据没有响应，因为考虑到性能 | 体验的性价比考虑，放弃了这个特性。
  • 哪怕是object.defineProperty也只支持IE8+

Proxy优点：

  • Object.defineProperty只能对属性进行劫持，需要遍历对象的每个属性，如果属性值也是对象，则需要深度遍历。而Proxy直接代理对象，不需要遍历操作。
  • Object.defineProperty 对新增属性需要手动进行Observe,新增属性适，需要重新遍历对象，对其新增的属性再使用Object.defineProperty进行劫持，所以Vue给data中对数组或对象新增属性时，需要使用vm.$set才能保住新增的属性也是响应式的
    • set方法中，对于响应式对象如果是新属性，会调用defineReactive方法重新定义响应式对象。如果采用proxy实现，Proxy通过set拦截对象属性的设置，是可以直接拦截到对象的新增属性的。不止如此，proxy对数组的方法也可以检测到，不需要像上面vue2.x源码中那样进行hack。
  • proxy支持13种拦截操作，这是defineProperty 所不具有的
    • get
    • set
    • has
    • deleteProperty
    • ownKyes
    • getOwnPerpertyDescriptor
    • defineProperty
    • preventExtensions
    • getPrototypeOf
    • isExtensible
    • setPrototypeOf
    • apply
    • construct
  • 新标准性能红利，从长远来看，js引擎会继续优化proxy，但getter和setter基本不会再有针对性优化。

Proxy缺点：

  • 兼容差 IE基本都不支持 还有其他浏览器部分方法不支持，目前没有一个完整支持Proxy所有拦截方法的polyfill方案，有一个Google编写的proxy-polyfill也只支持了get set apply construct四种拦截 可以支持到ie9+

Virtual DOM

  • 真正的DOM是非常庞大的，因为浏览器的标准把DOM设计的非常复杂。当我们频繁的去做DOM更新，会造成浏览器的回流和重绘，产生一定的性能问题。我们需要这一层抽象，在patch过程中尽可能一次性将差异更新到DOM中。
  • 现代框架的一个基本要求就是无需手动操作DOM，一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果reveiw不严格，可能会开发出低性能代码。另一方面也是提高开发效率。
  • 而Virtual DOM就是用一个原生的js对象去描述一个DOM节点，所以它比创建一个DOM的代价要小很多。在vue.js中，virtual DOM是用VNode这么一个Class去描述。
  • Virtual DOM除了它的数据结构的定义，映射到真实的DOM实际上要经历VNode的create、diff、patch等过程
  • 根据一个包含类型，文本，dom等各种参数的函数返回一个DOM的抽象对象，再利用createElement方法生成对应的DOM，把data定义的各种属性设置到DOM上。
  • Virtual DOM的diff才是整个Virtual DOM中最难理解也是最核心的部分。
  • diff的目的就是比较新Virtual DOM Tree找出差异并更新。它是直接影响Virtual DOM性能的关键部分。要比较DOM tree的差异非常复杂，但是幸好实际开发中很少出现跨层级的DOM变更。因此在现代的各种Virtual DOM库都只比较同级差异。
  • VNode和oldVNode都是对象，patch接受这两个参数找到对应的dom，updateChildren将其打补丁

  • 当数据发生变化时，set方法会调用Dep.notify通知所有订阅者Watcher，订阅者会调patch给真实的DOM打补丁，更新相应的视图。

    生命周期

    created => computed => mounted => updated => activated => deactivated => destryed

  • created是在挂载阶段还没有开始，模板还没有渲染成html，所以无法获取元素，created钩子函数主要用来初始化数据

  • mounted钩子函数一般用来向后端发起请求，拿到数据后做一些业务处理。该函数在模板渲染完成后才被调用。DOM操作一般在mounted钩子函数中进行
  • computed是在DOM执行完成后立马执行，它不能计算data中的属性。mouted才获取data数据
  • watch 是监听某个数据的变化从而来执行一些操作。updated是data数据更新引起视图更新后的操作
    • watch默认是初始不执行，加上immediate:true,就会执行了。
    • deep:true
    • 调用Vue.prototype.$watch方法

  • watch和computed都起到监听\依赖一个数据，并进行处理的作用。只不过computed主要对于同步数据的处理。watch则主要观测某个值的变化去完成一段开销比较大的复杂业务逻辑。能用computed就优先用computed，避免多个数据影响其中某个数据时多次调用watch的尴尬情况。

    Weex

    Weex是一个可以使用现代化的Web技术开发高性能原生应用的框架。
    可以使用同一个份代码编译成不同目标文件分别在web android和ios平台上运行，原生组件和模块在不同的平台中有不同的实现，但是它们都提供了相同的接口。
    拥抱已有的web生态，可以使用vue,react等前端技术来开发移动应用。
    具体怎么写再找教程，，，

    JSBridge

    它就是提供js调用原生功能的接口，双向通信

    前端发布

  • 非覆盖发布，用其他文件

  • 覆盖式分布，修改版本
  • 前端有CDN或者独立的静态服务器环境，独立的CI，以及前端版本配置中心。