前端

阅读Vue文档

Vue, front-end

Vue是目前前端流行的一套用于构建用户界面的渐进式框架。

Q:什么是渐进式框架？

渐进式
如上图，既可以仅用Vue的声明式渲染，也可以从视图渲染到构建系统都使用Vue来管理，丰俭由人(主张少)。

Q:怎么响应数据变化的？（响应原理）

数据与视图关系
当数据变更时，会触发对象的set属性，Vue通过defineReactive方法重写对象的getter、setter函数，
当newvalue与之前不一样时，重新渲染。注意，Vue不能检测以下变动：索引值直接设置、修改数组的长度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
set: function reactiveSetter (newVal) {
        var value = getter ? getter.call(obj) : val;
        /* 如果新旧val一样return */
        if (newVal === value || (newVal !== newVal && value !== value)) {
          return
        }
        /* 自定义set方法，如注入时直接修改的警告、更新子组件(isUpdatingChildComponent)或根元素(isRoot) */
        if (customSetter) {
          customSetter();
        }
        // #7981: for accessor properties without setter
        if (getter && !setter) { return }
        if (setter) {
          setter.call(obj, newVal);
        } else {
          val = newVal;
        }
        childOb = !shallow && observe(newVal);
        dep.notify();
      }

reactiveSetter–watcher.update–watcher.run–vm._render(render新的vnode)–vm._update（通过patch更新vnode）

Q:组件和指令有什么区别？

指令例如v-xxx，以属性的形式接收参数进行dom操作，基于事件的处理；组件代表一个自给自足的独立单元——有自己的视图和数据逻辑，这个单元用来完成某种交互需求，组件的发展给前端开发提供了额外的抽象、组合能力。
从html标签角度来说，组件（可以理解为自定义标签）如果是个标签,有src属性接收图片的URL地址，有alt属性设置可替换文本，那么指令就是一个属性（两者形式上也大致是这样）。

Q:运行时性能Vue相对angular如何提高的？

Vue的数据变化是独立触发的，即每个vm实例，数据变化->watcher检查、更新、渲染；
Angular的数据变化是是通过$digest，可能引起数据的变化->作用域内watcher检查、listener函数执行、更新；

  1. 作用域内的watcher和独立的watcher，检查的对象更多；
  2. 一些built-in指令以及服务来让你更改models时，例如：http、interval、timeout、compile会调用$apply，而这时会从$rootScope开始；
  3. 一轮$digest循环修改了别的作用域的model，那么它会再执行一次循环用来检查是否有models发生了变化。

以上3点可以看出Angular1运行时性能想对Vue更多的消耗。

Q:双向绑定和单向数据流有何区别？

单向数据流：数据变化->更新页面(数据绑定，data=>view)，但是没有(事件绑定，view=>data)。

优点：

  1. 所有状态的改变可记录、可跟踪，源头易追溯;
  2. 所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解;

缺点：

  1. 代码量上升，数据流转过程变长，出现很多类似的样板代码;(当数据需要传递时，需一一通知)
  2. 同时由于对应用状态独立管理的严格要求(单一的全局store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得啰嗦及繁琐。

双向绑定：数据变化->更新页面，页面变化(操作)->数据更新。

优点：

  1. 无需进行和单向数据绑定的那些CRUD操作;(减少了传递的过程)
  2. 在表单交互较多的场景下，会简化大量业务无关的代码。

缺点：

  1. 难追踪局部状态的变化，增加了出错时debug的难度；
  2. 由于组件数据变化来源入口变得可能不止一个，数据流转方向易紊乱，若再缺乏“管制”手段，雪崩。(脏检查带来的性能问题)

Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？
vuejs数据响应原理
Understanding Angular’s $apply() and $digest()
单向数据绑定和双向数据绑定的优缺点，适合什么场景？

分享到