推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > JavaScript技术中心 > vuejs 综合介绍 - 译自Vuejs作者博客

vuejs 综合介绍 - 译自Vuejs作者博客

JavaScript技术中心 2017-11-01

vuejs是一个建造web界面的库。配合其他工具,你也可以称它为“框架”(尽管它更多的看起来像是一堆配合很好的工具集)。如果你从未听说过vue,你可能会想,好吧,我懂了,又一个js框架。事实上Vue并不新,因为我两年以前就开始了它的原型开发,第一个正式版发布于2014年2月,随后不断更新进步,至今已经有很多产品在使用Vue。

那么,Vue到底是干嘛的呢?究竟什么造就了它的与众不同?当这个地球上已经有了angular,ember和react,我为什么还要学习vue?通过带你深入vuejs的设计概念,本篇文章希望能给你一些灵感, 我相信读后你自会有自己的答案。

响应式

保证数据和展现的一致很难,是吗?

我们先从最基本的任务开始,展示数据,假设我们有如下一个简单的对象

var object = {  message: 'Hello world!'}

模板:

<div id="example">  {{ message }}</div>

在Vue里面我们这样将它们结合:

new Vue({  el: '#example',  data: object })

看起来我们仅仅渲染了模板,当我们更新了数据,我们要如何去更新界面呢?什么都不用做,因为Vue已经把这个对象变成了响应式的,当你更改了 object.message, html会自动更新。更重要的是,你无须担心如果超时去调用 $apply ,或者 setState() ,监听Store的事件,或者创建框架监听属性,比如 ko.observable() 或 Ember.Object.create() ,vue就这样简单的运作。

Vue同时提供了一个完美的计算属性(computed properties):

var example = new Vue({  data: {    a: 1  },  computed: {    b: function () {      return this.a + 1    }  } })// both a & b are proxied on the created instance.example.a // -> 1example.b // -> 2example.a++ example.b // -> 3

计算属性b追踪a,自动同步,不需要声明a为b的依赖。

另外,简单类模式(POJO-based)允许很简单的整合任意类型的数据资源或状态管理方案,比如,  有一个整合了vuejs组件和Rxjs的观察模块,仅仅用了30行代码。

组件

数据绑定对小型demo来说还不错,那么大型应用呢?

对于结构复杂的界面,vue采用了与react十分类似的方案:从上至下的组件化。我们先来看一个可复用组件的例子:

var Example = Vue.extend({  template: '<div>{{ message }}</div>',  data: function () {    return {      message: 'Hello Vue.js!'    }  } }) // register it with the tag <example>Vue.component('example', Example)

现在我们就可以用这个组件在其他模版里,就如同一个自定义页面元素:

<example></example>

一个组件包含另外一些组件,它们形成一个UI树。为了保证它们之间的组合性,Vue组件同时包含如下内容:

  • 定义如何从父级获取数据,使用 props

  • 发布自定义事件,以便在父级作用域中触发它

  • 组合父级引入内容,使用 <slot>

这里不过多探讨细节,感兴趣请查看官网。

模块化

21世纪了,我们不应该把所有东西都放在全局作用域里

我们使用打包工具(Webpack, Browerify)以及 ES2015.每个组件都是一个模块,Vue会自动把配置对象转换到组件结构里,所以我们只需要在模块里简单的输出如下内容:

// ComponentA.js export default {  template: '<div>{{ message }}</div>',  data () {    return {      message: 'Hello Vue.js!'    }  } }

// App.js import ComponentA from './ComponentA' export default {  // use another component, in this scope only.  // ComponentA maps to the tag <component-a>  components: { ComponentA },  template: `    <div>      <p>Now I'm using another component.</p>      <component-a></component-a>    </div>  ` }

看起来不错是吗?如果我们能讲页面的模版,样式和js逻辑封装到一个文件里会更好!尤其是他们本身还有各自的语法高亮。实用工具诸如 Webpack + vue-loader 或者 Browerify + vueify,我们可以这么做:

<!-- MyComponent.vue --><!-- css --><style>.message {  color: red;}</style><!-- template --><template>  <div class="message">{{ message }}</div></template><!-- js --><script>export default {  props: ['message'],  created() {    console.log('MyComponent created!')  } }</script>

什么?我们是不是重新定义了web组件?但是css依旧是全局的。

是的,一定程度上我们重新定义了web组件,除了:

  • 我们也可以进行css封装,只需添加 scoped 属性到 <style> 标签内,它甚至不会继承到自己的子组件里。

  • 每个Vue组件都会被压缩到一个js模块内,不许加任何垫片完美兼容至IE9以上,也可以将其添加到自定义元素里。

  • ES2015 默认被支持。

  • 你可以使用任何 预处理器 (less, coffeScript ...) 在任意语言块。

  • 当使用Webpack + vue-loader 方案时,你可以引用webpack全部的强大功能,例如静态资源加载和处理,因为Vue里(单文件组件)模版和样式都是通过webpack的html-loader , css-loader 来实现的,你可以通过组件URLS来加载模块依赖。

很好,我们的组件就长这个样子:

对了,我提到vue组件是热加载的了吗?


动画

可以用Vue做炫酷的东西吗?

Vue内置了  ,目前已经有很多  使用它们。

Vue相应系统内部对渐变性质的状态改变有着非常好的支持,对于其他框架而言,这里有些混乱,比如采用脏检查(dirty-checking) 或者 dom差分(Virtual Dom diffing)。对于一个每秒60帧的状态改变,vue清楚的知道那些节点被影响,更新它们,而避免那些不受影响节点的更新。而脏检查或dom差分,往往会触发整个dom子树的重新渲染。对于小项目而言这还行,但是比如大项目里每秒60真的改变效率就不行了,就算是可以接受,这些方案也消耗了系统过多的资源。查看  ,搞明白react,vue对于动画渲染方面的效率差异。

下面是Vue一个状态渐变的例子:

路由

我想创建的是应用,路由在哪里?

和React一样,Vue本身不提供路由,但是你可以通过Vue-router来使用路由。它提供了内置路由映射到内置组件的功能,并且提供了颗粒度很好的过场控制,以下例子:

import Vue from 'vue'import VueRouter from 'vue-router'import App from './app.vue'import ViewA from './view-a.vue'import ViewB from './view-b.vue'Vue.use(VueRouter) const router = new VueRouter() router.map({  '/a': { component: ViewA },  '/b': { component: ViewB } }) router.start(App, '#app')

app.vue 的模版

<div>  <h1>This is the layout that won't change</h1>  <router-view><!-- matched component renders here --></router-view></div>

项目中的实际应用,参照  ,基于Vuejs, vue-router, webpack 和 vue-loader。

稳定性

Vue是个人项目?安全性如何?

是的,Vue是一个个人项目,如果你想找一个企业级技术支持团队,那么Vue并不是。但,我们来看下数字,Vue自从0.11版本就保持着100%测试覆盖率,而且肯定会继续,github issues平均13小时内解决,目前已解决1400+ issues。截至目前还未发现开放和可复现的bug。

译者:以下略去最后两段,作者主要说了历史版本,版本迁移,希望各位持续关注和支持以及相关资源。


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《vuejs 综合介绍 - 译自Vuejs作者博客》的版权归原作者「JavaScript技术中心」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注JavaScript技术中心微信公众号

JavaScript技术中心微信公众号:javascript-tc

JavaScript技术中心

手机扫描上方二维码即可关注JavaScript技术中心微信公众号

JavaScript技术中心最新文章

精品公众号随机推荐