从出道到现在,它红遍全球,这期节目让我们来采访一下,而今前端框架的 “当红炸子鸡”!

Vue-js-idea

小编: 你先自我介绍一下!!!

Vue: 尊敬的 FSUX 的读者们,大家好!!!我是Vue.js,是一个提供 MVVM 数据双向绑定的库,专注于UI 层面,核心思想是:数据驱动、组件系统。

小编: 这个介绍还是比较官方的哈!

Vue-1

小编: 那我们一个一个来,能先说说什么是数据驱动吗?听起来挺高大上的。

Vue: 所谓的数据驱动就是 View Model,保证数据和视图的一致性,通俗的讲就是,数据和视图变化是同步的,数据一更新,视图就会改变,或者视图一改变,数据也会相应的更新。

小编: 这个解释还是比较通俗易懂的,能说说具体的实现原理吗?其实我听说这个数据驱动的概念早就有人做到了,比如 谷歌大厂的 Angular 或者更早期的前端框架。

Vue: 首先,Vue.js 数据观测原理在技术实现上,利用的是 ES5 Object.defineProperty 和存储器属性: getter 和 setter(所以只兼容 IE9 及以上版本),可称为基于依赖收集的观测机制;

Vue: 其次,很多人对 Angular 的脏检测机制感到不屑,推崇基于 setter,getter 的观测机制,在我看来,这只是同一个事情的不同实现方式,并没有谁完全胜过谁,两者是各有优劣的,而且目前为止,基于生态方面 Vue 相对于大厂的 Angular 和 React 来说,还是大相径庭的。

小编: 对门的 Angular 和 React, Vue 不吹牛逼了!!!

Vue-2

Vue: 这里我回应一下,其实好多人都说 Vue的成功是站在巨人的肩膀上的,也有很多不友好的声音, Vue 的有些思想和功能是抄袭其他框架的,其实好的东西是可以借鉴的,就好比 iphone 没出现之前,用户对于手机的审美和体验都是五花八门的,07年之后,苹果公司拿出 iPhone 对着用户说:孩子,拿着,爹告诉你,这是好东西;所以近十年来国内外各大手机厂商争相模仿 iphone,也开始谈用户体验。

Vue: 所以谈不上抄袭,只不过是大家对前端技术解决问题的方式都趋向统一,而且 Vue 在这方面做的更好,保证性能强的同时,框架更加的轻和小巧,让更多前端开发者更容易的去入门 Vue。

小编: 咱们是聊技术的吗?怎么有点儿八卦的味道~

Vue-3

小编: 咱聊点实质性的东西,比如前面提到的 Vue 具体是通过什么代码实现数据和视图保持一致性的,

Vue:其实很简单,我们的每一个指令都会有一个对应的用来观测数据的对象,叫做 watcher,比如v-text=”msg”、{{ msg }}, 即为两个 watcher,watcher对象中包含了待渲染的关联 DOM 元素。

    <div id="app">
      
    </div>
    var app = new Vue({
      el: '#app',
      data: {
    message: 'Hello Vue!'
      }
    })
  • 将原生的数据改造成 “可观察对象”,通常为调用 defineProperty 改变 data 对象中数据为存储器属性;一个可观察对象可以被取值 getter,也可以被赋值setter。
  • 解析模板,也就是在 watcher 的求值过程中,每一个被取值的可观察对象都会将当前的 watcher 注册为自己的一个订阅者,并成为当前watcher的一个依赖。
  • 当一个被依赖的可观察对象被赋值时,它会通知 notify 所有订阅自己的 watcher 重新求值,并触发相应的更新,即watcher对象中关联的 DOM 改变渲染。
依赖收集的优点在于可以精确、主动地追踪数据的变化,不需要手动触发或对作用域中所有watcher都求值(angular脏检查实现方式的缺点)。特殊的是,对于数组,需要通过包裹数组的可变方法(比如push)来监听数组的变化。在添加/删除属性,或是修改数组特定位置元素时,也需要调用特定的函数,如obj.$add(key, value)才能触发更新。这是受ES5的语言特性所限。

小编: 挺高深的知识!!!最近两年前端领域兴起 ‘模块化’ ‘组件化’ 等名词,我们对 Vue 的组件系统也是耳闻许久,能向大家介绍一下吗?

Vue: 额,其实这是符合好的软件设计的基本要求,耦合性与内聚性是软件模块独立性的两个定性标准,将软件系统划分模块时,尽量做到高内聚低耦合,提高模块的独立性,为设计高质量的软件结构奠定基础。

小编: 能举个例子说一下嘛?

Vue: 好比如,一个程序有50个函数,这个程序执行得非常好;然而一旦你修改其中一个函数,其他49个函数都需要做修改,这就是高耦合的后果;也就是我们常说的 ‘代码写死’。

Vue: 一旦你理解了它,你编写概要设计的时候设计类或者模块自然会考虑到“高内聚,低耦合”,同样 使用 Vue 投入项目开发更像我们搭积木一样。

小编: 能具体说一说 Vue 的组件系统吗?

Vue: 我们可以通过一个组件例子来说明。

    Vue.component('my-component', {
    // 模板
    template: '<div> </div>',
    // 接受参数
    props: {
    msg: String
    },
    // 私有数据,需要在函数中返回以避免多个实例共享一个对象
    data: function () {
    return {
    privateMsg: 'component!'
    }
    }
    })
    <my-component msg="hello"></my-component> 

Vue: 上面我们注册了一个组件 my-component ,我们知道组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

Vue: 这里科普一下 Vue 组件一些核心的东西。

  • 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。
  • 初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。
  • 接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。
  • 方法(methods):对数据的改动操作一般都在组件的方法内进行。
  • 生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。
  • 私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

Vue-4

小编: Vue 最近也更新到了2.0版本,国内外前端大厂也争相推崇这位 ‘小鲜肉’,我了解到的有饿了么、阿里的WEEX等,其生态也日渐强大。能说一说新的 Vue2.0 相对 1.0 有哪些改进吗?

Vue: 首先说一说性能方面,在渲染用户界面的时候,DOM 的操作成本是最高的,不幸的是没有库可以让这些原始操作变得更快,其次 Vue 和 React 一样都采用了以下的特性。

  • 使用 Virtual DOM
  • 提供了响应式(Reactive)和组件化(Composable)的视图组件。
  • 将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库。

Vue: 其次是服务端渲染

Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能。同时,vue-router 和 vuex 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration。你可以通过 vue-hackernews-2.0 的 demo app 了解到它们是如何协同工作的。

Vue: 除此之外,vue-router 和 vuex 在它们的 2.0 版本中都已经有了很多改进:

vue-router
  • 支持多命名的
  • 通过 组件改进了导航功能
  • 简化了导航的 hooks API
  • 可定制的滚动行为控制
  • 更完善的示例
vuex
  • 简化了组件内的用法
  • 通过改进 modules API 提供更好的代码组织方式
  • 可聚合的异步 actions

总有人调侃 Vue入门的门槛低所以有点Low,其实我一直推崇最好的用户体验是深入浅出,能把一件复杂的事情简单化的推广落地产生价值,是一件非常难和非常需要智慧和坚持的事情,还是那句话,技术无高低之分,都是为了更经济的解决问题,谢谢 Vue 同学的耐心解答,今天的采访就到这里,咱们下期再会!!!