什么时候使用vue.js

使用vue.js的情况:1、如果需要使用模板构建应用程序,那么请选择Vue;2、如果需要简单的能正常工作的,那么请选择Vue;3、如果需要程序更小更快,那么请选择Vue。

什么时候使用vue.js

本教程操作环境:windows7系统、Vue2.9.6版,该方法适用于所有品牌电脑。

【相关文章推荐:vue.js】

使用vue.js的情况:

如果想要一个轻量级,更快速,更现代的UI库来制作一流的SPA(单页面应用程序),就应该选择Vue.js。 对于习惯使用HTML的开发人员来说,这是有利的。此外,它还提供了组件的可重用性,使其成为开发人员在Web应用程序中构建无与伦比的用户体验的选择。

立即学习“前端免费学习笔记(深入)”;

1、如果你喜欢使用模板( 或需要一些其中的选项)构建应用程序,那么请选择Vue

将标记放在HTML文件中是Vue应用程序的默认选项。与Angular类似,大括号用于数据绑定表达式,指令(特殊的HTML属性)用于向模板添加功能。下面是一个简单的Vue程序例子。它可以输出一条消息,有一个按钮可以动态反转消息:

  

{{ message }}

  
new Vue({  el: '#app',  data: {    message: 'Hello Vue.js!  },  methods: {    reverseMessage: function () {      this.message = this.message.split('').reverse().join('');    }  }});

登录后复制

相比之下,React应用程序避开模板,要求开放人员在JavaScript中创建DOM,通常用JSX辅助,下面是用React来实现同样的功能:

class App extends React.Component {  constructor(props) {    super(props);    this.state = {      message: 'Hello React.js!'    };  }  reverseMessage() {    this.setState({       message: this.state.message.split('').reverse().join('')     });  }  render() {    return (      
        

{this.state.message}

              
    )  }}ReactDOM.render(App, document.getElementById('app'));

登录后复制

对于学习标准的web初级开发者而言,模板更容易理解。但是也有很多经验丰富的开发人员乐意使用模板,因为模板可以更好地分离布局和功能,同时也可以选择向Pug这样的预处理器。

但是,使用模板需要学习所有的HTML扩展语法,渲染函数只需要了解标准的HTML和JavaScript

2、如果你喜欢简单的能正常工作的,那么请选择Vue

一个简单的Vue项目可以不需要解析,直接在浏览器中运行,这允许Vue可以像jQuery一样在项目中引用。

虽然在技术上使用React也是可行的,但是典型的React代码更倾向于像classes和non-mulating 数组方法这样的JSX和ES6的特性。但是Vue在简洁设计方面更为深入。我们来比较两者如何处理应用程序的数据(即“状态”)。

在React中State是不可以直接改变的,需要调用setState接口:

this.setState({     message: this.state.message.split('').reverse().join('') });

登录后复制

当前和之前的状态差异让React知道什么时候在DOM中重新渲染以及渲染什么,因此不可变的状态是非常必要的。

相比之下,数据可以在Vue中突变。相同的数据属性在Vue中发生变化更为简单。

// Note that data properties are available as properties of // the Vue instancethis.message = this.message.split('').reverse().join('');

登录后复制

在你得出Vue渲染系统比React渲染低效的结论之前,让我们来看看Vue中的状态管理:当你向状态添加新对象时,Vue会遍历它的所有属性并且转换为getter和setter。Vue系统会持续追踪状态并且在状态发生变化时,自动重新渲染DOM。

令人印象深刻的是,Vue中的状态改变更为简洁的同时,重新渲染系统的效率其实比React更好。

Vue的反应系统确实有值得注意的事项。例如:它不能检测到属性的添加、删除以及特定数组的变化。在这种情况下,可以使用Vue API中类似React的set方法。

3、如果你希望你的程序更小更快,那么请选择Vue

React和Vue都将构建一个虚拟DOM,并且在应用程序状态更改时同步更新实际的DOM。两者都有自己的优化方法。Vue核心开发人员提供了一个基准测试,展示了Vue的渲染系统比React的更快。在这个测试中,10000个项目的列表被渲染了100次。下面的表格展示了比较的结果。

1af4bbc174b4ffc3cebbdfebdb791dc.png

从实际角度而言,这种基准只与边缘情况有关。大多数应用程序不需要经常进行这种操作,因此不能将其视为比较的一个重要因素。

虽然页面的大小与项目相关,Vue又占据了优势。目前发布的Vue库只有25.6KB。

要用React实现类似的功能,你需要使用React DOM(37.4KB)和React with Addons库(11.4KB),总共为48.8KB,几乎是Vue的两倍。为了公平起见,你可以使用React获得更多的API,但是不会有双倍的功能。

相关免费学习推荐:javascript(视频)

以上就是什么时候使用vue.js的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3021341.html

(0)
上一篇 2025年3月13日 05:45:22
下一篇 2025年3月5日 04:08:39

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue.js与其它框架的不同是什么

    vue.js与其它框架的不同:1、AngularJs的学习成本较高,而Vue本身提供的API都比较简单、直观;2、React依赖Virtual DOM【虚拟DOM】,而Vue使用的DOM模板。 本教程操作环境:windows7系统、Vue2…

    2025年3月13日
    200
  • vue.js怎样声明变量

    vue.js声明变量的方法:1、使用let定义,let是块级作用域,函数内部使用let定义后,对函数外部无影响;2、使用var定义,var定义的变量可以修改;3、使用const定义,const定义的变量不可以修改。 本教程操作环境:wind…

    2025年3月13日
    200
  • vue.js怎样刷新改变数据

    vue.js刷新改变数据的方法:使用函数【Vue.set()】来进行修改,函数格式为【Vue.set(data,’para’,’value’)】,其中data为Vue创建时传输的data对象名…

    2025年3月13日
    200
  • vue.js怎样隐藏软键盘

    vue.js隐藏软键盘的方法:1、点击键盘开始键,软键盘隐藏,代码为【this.$refs.inputText.blur();】;2、点击input输入框,软键盘显示,代码为【this.$refs.inputText.focus()】。 本…

    2025年3月13日
    200
  • vue.js中怎么设置输入框的长度

    vue.js设置输入框长度的方法:使用vue控制input输入长度和获取输入内容的长度,代码为【 本教程操作环境:windows7系统、Vue2.9.6版,Dell G3电脑。 【相关文章推荐:vue.js】 vue.js设置输入框长度的方…

    2025年3月13日
    200
  • 详解vue.js中的4个级别作用域

    除了 JS 已有的功能外,Vue还具有自己独特的作用域级别。作用域控制可以使用哪些变量以及在何处使用。它控制它们对应用程序的不同部分的“可见性”。 了解 Vue 提供的作用域级别之间的差异会帮助我们编写更清晰的代码。 下面是 vue 中4个…

    2025年3月13日
    200
  • vue.js是基于javascript的吗?

    vue.js是基于javascript的,用于构建用户界面的渐进式框架,采用MIT开源协议。Vue的核心库只关注视图层,采用自底向上增量开发的设计,并且非常容易学习,非常容易与其它库或已有项目整合。 本文操作环境:windows10系统、v…

    2025年3月13日
    200
  • vue.js能做pc端吗

    vue.js能做pc端,因为Vue是一套构建用户界面的渐进式框架,不管是用在PC端还是用在移动端,只要提供对应的API及数据相应就可以;但是PC端单页面对于搜索引擎可能不太友好,无法让搜索引擎把整个网站收录。 推荐:《vue教程》 vue.…

    2025年3月13日
    200
  • 如何删除安装的vue.js

    删除安装的vue.js的方法:首先打开命令窗口;然后通过运行“npm uninstall vue-cli -g”或者“yarn global remove vue-cli”命令卸载vue.js即可。 本教程操作环境:windows7系统、v…

    2025年3月13日
    200
  • vue.js支持移动端吗

    vue.js支持移动端,以制作移动端的Webapp;Vue.js是一个开源JavaScript框架,能够开发单页面应用程序;它还可以用作Web应用程序框架,旨在简化Web开发。 推荐:《vue教程》 Vue.js是一个开源JavaScrip…

    2025年3月13日
    200

发表回复

登录后才能评论