关于challenge:vuejs-对于普通开发者意味着什么

48次阅读

共计 1259 个字符，预计需要花费 4 分钟才能阅读完成。

vue.js 是一款非常风行的前端框架，因为简略实用，容易上手，取得了很多开发者的青睐。本文将简略介绍一下 vue.js 的次要特点，并剖析它对于一般开发者意味着什么。

所谓申明式，集体了解是所见即所得，通过扩大 HTML 的性能，在最靠近于指标 HTML 的状况下实现各种性能。这种渲染形式最常见于服务端渲染，例如 PHP 的 web 框架中，就罕用 HTML 模版来实现数据的更新。这种形式的长处是简单明了，写好页面根底的 HTML 之后，只须要在须要数据更新的中央稍作批改就能够了。

例如，这样的 vue 代码：

<div id="app">
  <button @click="count++">
    Count is: {{count}}
  </button>
</div>

如果让一个齐全不理解 vue 的人来看，这仿佛就是非法的 HTML 文件。button 元素有了一个新的属性 @click，尽管不晓得是什么意思，但看起没有谬误。

这种形式在相熟服务端渲染的开发者看来，是很相熟的，不会有太大的学习老本。

相应式是指 vue 能主动跟踪 Javascirpt 中的状态变动，并更新页面上的内容。这个过程包含几个步骤：1. 发生变化；2. 检测到变动；3. 更新变动。vue 帮忙咱们把第二步和第三步主动实现了。

例如，这样的 vue 代码：

import {createApp} from 'vue'

createApp({data() {
    return {count: 0}
  }
}).mount('#app')

开发者只须要申明 data 外面的一个值 count, 并将其初始值设为 0。之后当这个 count 值变动的时候，页面上所有对这个值有依赖的中央都会被相应更新。

以往一个简略的组建须要有多个文件，包含 HTML 文件，CSS 文件，JS 文件等，在我的项目中应用的时候很不不便，而且容易造成凌乱。vue 针对这一痛点，推出了 SFC，单文件组件的概念，开发者只须要应用一个文件，就能够同时蕴含 HTML，CSS，JS 的内容。

例如，这样的 vue 代码：

<script>
export default {data() {
    return {count: 0}
  }
}
</script>

<template>
  <button @click="count++">Count is: {{count}}</button>
</template>

<style scoped>
button {font-weight: bold;}
</style>

将不同文件中的内容都写在了一起，大大晋升了开发者的用户体验。无论是在开发时，还是在调试批改的时候，都不再须要频繁地切换文件了。

以上是 vue.js 最外围的几个性能，只笼罩了全副性能的很小一部分，如果你想更多地理解它，能够拜访它的官方网站，下面有很多具体的例子和材料。对于没有太多前端开发教训的开发者，vue.js 上手容易，配置简略，很快就能够搭建出简略的页面，也给了我一个启发，就是晋升开发体验是没有下限的。

正文完