【.com快译】不知道你是否熟悉或正在使用Vue.js。总的来说，Vue是一个用于设计用户界面的渐进式框架。与其他框架不同，它在设计时考虑了增量适应性。Vue的核心库都是围绕着视图层的。它不仅易于使用，而且易于与第三方库和现有项目集成。同时，当Vue生态系统支持的库与单文件组件（SFC）等工具结合使用时，Vue还可以为复杂的单页应用提供相应的驱动和功能。Vue.js的优点和缺点优点：代码可读性强提供丰富的文档和支持材料适应性和反应性但由于大多数开发人员未能遵循Vue.js的最佳实践（请参阅--https://levelup.gitconnected.com/best-practices-for-vue-js-b46760fe0096），他们不仅未能充分发挥Vue.js的全部潜力，而且可能时不时地犯错误。就我个人而言，我已经使用Vue.js一段时间了，除了有一段美好的时光和经验之外，我也犯过一些错误。为了避免大家掉进同一个“坑”，我总结了七个常见的错误如下：1.添加模板编译器在尝试导入Vue.js时，我发现：即使我按照官方指南中的说明进行操作事情，组件的内联（inline）模板也会返回一个空白页面。为此，当我尝试使用那些渲染函数或定义为单文件组件的模板时，问题不会重现。由于Vue有很多不同的版本，我猜这是版本差异造成的。毕竟，NPM包导出的默认构建通常只用于构建运行时（runtime），并不包括模板编译器。如果你熟悉JSXforReact，模板编译器应该不难理解。它的作用是通过函数调用只替换那些模板字符串，然后创建一个虚拟DOM节点。单文件组件不会出现这个问题的主要原因是单文件组件使用了vue-loader和vueify工具。这两个工具都可以使用渲染函数定义的模板生成简单的JavaScript组件。因此，为避免此问题，您需要在导入期间指定正确的构建版本。当然，你也可以通过在bundler的配置中为Vue创建别名（alias）来解决这类问题。2.保持属性的反应性React用户必须熟悉反应性的概念。它通过调用setState函数来工作。此函数能够更新各种属性值。尽管反应性也是Vue.js的一大优势，但它在Vue中的工作方式与在React中不同。在Vue中，它代理了各种组件的属性。用于覆盖和更新的Get和Set函数在虚拟DOM中传递。varvm=newVue({el:'#vm',template:`
{{item.count}}
`,data:{item:{}},beforeMount(){this.$data.item.count=0;},methods:{updateCount(){//JavaScriptobjectisupdatedbut//thecomponenttemplateisnotrenderedag??ainthis.$data.item.count++;}}});在上面的Java代码示例中，您可以清楚地看到Vue实例有一个名为item的属性，其中包含一个空对象。组件初始化后，Vue创建一个代理，其get和set函数连接到item属性。从那里，框架会跟踪个人价值观的变化并做出相应的反应。3、导出单文件组件为了简化JavaScript文件的复杂性，Vue采用了一种简单的处理方式——单文件组件，可以将所有的HTML、CSS、JavaScript代码都收集到同一个文件中。但是，由于单文件组件的代码通常驻留在Vue文件中的script标签中，所以即使是用JavaScript编写的代码，仍然需要导出相应的组件。当然，你可以使用以下三种方式来实现：直接导出命名导出默认导出如果你选择命名导出方式，那么我们将无法对每个组件进行重命名。更重要的是，命名导出与单文件组件不兼容。因此，如果您是新手用户，我建议您最好使用默认的导出方式。4.避免合并单文件组件由于单文件组件允许开发者在同一个文件中添加各种代码、模板和样式，简化了整个开发过程。但是，为了避免混淆，我们应该根据需要将不同的单文件组件分开。新导入的单文件组件很可能会覆盖之前的单文件组件，所以我们在合并的时候一定要小心。另外，单文件组件最大的缺点之一就是我们不能将它们作为一个整体导入到多个Vue组件中。5.父数据更新子组件在Vue.js中，父组件使用props或发送事件消息将数据向下传递给子组件。并且子组件也会响应。这种关系通常被称为propsdown和eventup。以下代码片段显示父数据如何通过props传递给子元素：
6。Promise是根据Vuex的行为生成的。在Vuex中，所有的行为都是异步的，所以为了让调用函数知道某个行为是否已经完成，唯一的办法就是返回一个promise（承诺），稍后再解决。Vue据此生成一个HTTP调用，并在promise之后一一处理各种“解决”或“拒绝”。7.结合Vue.js和jQuery如果需要将Vue框架与其他DOM操作工具集（如jQuery）一起使用，需要注意它们之间的相互隔离。也就是说，您可以使用jQuery来操作DOM小部件或使用Vue，但请不要同时使用两者。通常，包装器组件充当Vue、相应组件和其他内部DOM元素之间的链接，以相互交互。这些组件将用于通过jQuery操作各种内部DOM元素。最后，希望您在使用Vue.js框架设计应用程序、开发解决方案或创建Web应用程序时，能够避免犯上述七种常见的Vue.js错误。原标题：7CommonVue.jsMistakesYouShouldNeverMake，作者：IrfanAhmed
