vue.js_1

如果不懂vue的人看，这似乎是一个合法的HTML文件。button元素多了一个新属性@click，虽然不知道是什么意思，但是好像是对的。这种方式对于熟悉服务端渲染的开发者来说是非常熟悉的，不会有太大的学习成本。Reactivity（响应式）响应是指vue可以自动跟踪Javascirpt中的状态变化，更新页面上的内容。这个过程包括几个步骤：1.发生变化；2.检测到变化；3.更改更新。Vue帮我们自动完成了第二步和第三步。例如这样的vue代码：import{ref}from'vue'constcount=ref(0)开发者只需要声明一个计数，并将其初始值设置为0即可。以后当计数值发生变化时，所有放在依赖于此值的页面将相应更新。回想一下我在JavsScript中理解的上一篇文章中描述的引用赋值，我们可以建立一个心智模型：鸽子洞模型：每个鸽子洞都有自己唯一的编号，并根据这个编号来确定每个鸽子洞的位置。vue中的ref可以想象成在鸽子笼上安装了一个监控器，鸽子进出都能第一时间感知到，而不是来访时才知道。单文件组件（Single-FileComponents）以往一个简单的构建需要多个文件，包括HTML文件、CSS文件、JS文件等，在项目中使用起来很不方便，容易造成混淆。针对这个痛点，Vue引入了SFC，单文件组件的概念。开发者只需使用一个文件即可同时包含HTML、CSS和JS内容。比如这样的vue代码：把不同文件的内容写在一起，大大提高了开发者的用户体验。无论是开发时还是调试修改时，都不再需要频繁切换文件。综上所述，以上是vue.js的核心功能，只涵盖了所有功能的一小部分。如果你想了解更多，可以访问它的官网，里面有很多详细的例子和资料。对于没有太多前端开发经验的开发者来说，vue.js简单易用，配置简单，可以快速搭建简单的页面。也给了我一个启发，开发体验的提升是没有上限的。但是当项目逐渐变得复杂，使用的特性越来越多的时候，可能就不会像上面的例子那么简单了，所以为了身心健康，我还是愿意选择更简单的服务端渲染，而不是前端JS框架。