这篇文章主要讲解了“Vue.js的注意事项有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue.js的注意事项有哪些”吧！
成都创新互联公司 是专业的多伦网站建设公司，多伦接单;提供网站设计 、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行多伦网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
1、为什么 Vue.js 不使用 ES Classes 的方式编写组件
如果你使用过类似于 Angular 的框架或者某些后端 OOP 语言后，那么你的***个问题可能是：为什么不使用 Class 形式的组件?
Vue.js 的作者在 GitHub issues 中很好的回答了这个问题：
Use standard JS classes instead of custom syntax?
为什么不使用 Class 这里有三个很重要的原因：
ES Classes 不能够满足当前 Vue.js 的需求，ES Classes 标准还没有完全规范化，并且总是朝着错误的方向发展。如果 Classes 的私有属性和装饰器(当前已进入 Stage 3)稳定后，可能会有一定帮助。
ES Classes 只适合于那些熟悉面向对象语言的人，它对哪些不使用复杂构建工具和编译器的人不够友好。
优秀的 UI 组件层次结构一般都是组件的横向组合，它并不是基于继承的层次结构。而 Classes 形式显然更擅长的是后者。
译者注：But，Vue.js 3.0 将支持基于 Class 的组件写法，真香。
2、如何构建自己的抽象组件?
如果你想构建自己的抽象组件(比如 transition、keep-alive)，这是一个比构建大型 web 应用更加疯狂地想法，这里有一些关于这个问题的讨论，但是并没有什么进展。
Any plan for docs of abstract components?
译者注：在 Vue.js 内部组件(transition、keep-alive)中，使用了一个 abstract 属性，用于声明抽象组件，这个属性作者并不打算开放给大家使用，所以文档也没有提及。但是如果你要使用也是可以的，那么你必须深入源码探索该属性有何作用。
但是不要害怕，如果你可以很好地理解 slots ，你就可以构建自己的抽象组件了。这里有一篇很好的博客介绍了要如何做到这一点。
Writing Abstract Components with Vue.js
译者注：下面是《在 Vue.js 中构建抽象组件》的简单翻译
抽象组件与普通组件一样，只是它不会在界面上显示任何 DOM 元素。它们只是为现有组件添加额外的行为。
就像很多你已经熟悉的 Vue.js 的内置组件，比如：``、``、``。
现在展示一个案例，如何跟踪一个 DOM 已经进入了可视区域 ，让我们使用 IntersectionObserver API 来实现一个解决这个问题的抽象组件。
(完整代码在这里：[vue-intersect](https://github.com/heavyy/vue-intersect))
// IntersectionObserver.vue export default { // 在 Vue 中启用抽象组件 // 此属性不在官方文档中， 可能随时发生更改，但是我们的组件必须使用它 abstract: true, // 重新实现一个 render 函数 render() { // 我们不需要任何包裹的元素，只需要返回子组件即可 try { return this.$slots.default[0]; } catch (e) { throw new Error('IntersectionObserver.vue can only render one, and exactly one child component.'); } return null; }, mounted () { // 创建一个 IntersectionObserver 实例 this.observer = new IntersectionObserver((entries) => { this.$emit(entries[0].isIntersecting ? 'intersect-enter' : 'intersect-leave', [entries[0]]); }); // 需要等待下一个事件队列，保证子元素已经渲染 this.$nextTick(() => { this.observer.observe(this.$slots.default[0].elm); }); }, destroyed() { // 确保组件移除时，IntersectionObserver 实例也会停止监听 this.observer.disconnect(); } } 让我们看看如何使用它?
但是在这样做之前，请你三思。我们一般依赖 mixins 和一些纯函数来解决一些特殊场景的问题，你可以将 mixins 直接看做一个抽象组件。
How do I extend another VueJS component in a single-file component? (ES6 vue-loader)
3、我不太喜欢 Vue.js 的单文件组件，我更希望 HTML、CSS 和 JavaScript 分离。
没有人阻止你这样做，如果你是个注重分离的哲学家，喜欢把不同的东西放在不同文件，或者讨厌编辑器对 .vue 文件的不稳定行为，那么你这么做也是可以的。你要做的很简单：
这么做，就会出现下一个问题：我的组件总是需要 4 个文件(vue + html + css + js)吗?我能不能摆脱 .vue 文件? 答案是肯定的，你可以使用 vue-template-loader。
我的同事还为此写了一篇很棒的教程：
Using vue-template-loader with Vue.js to Compile HTML Templates
4、 函数式组件
感谢 React.js 让函数式组件很流行，这是因为他们无状态、易于测试。然而它们也存在一些问题。
译者注：不了解 Vue.js 函数式组件的可以先在官方文档查看：官方文档
4.1 为什么我不能对功能组件使用基于 Class 的 @Component 装饰器?
再次回到 Classes，它只是一种用于保存本地状态的数据结构。如果函数式组件是无状态的，那么使用 @Component 装饰器就是无意义的。
这里有关于这个的讨论：
How to create functional component in @Component?
4.2 外部类和样式不应用于函数式组件
函数式组件不能像普通组件那样，绑定具体的类和样式，必须在 render 函数中手动应用这些绑定。
DOM class attribute not rendered properly with functional components
class attribute ignored on functional components
4.3 函数式组件总是会重复渲染?
TLDR：在函数式组件中使用有状态组件时务必要小心
Functional components are re-rendered when props are unchanged.
函数式组件相当于直接调用组件的 Render 函数，这意味着你应该：
避免在 render 函数中直接使用有状态组件，因为这会在每次调用 render 函数时创建不同的组件实例。
如果函数式组件是叶子组件，会更好地利用它们。 需要注意的是，同样的行为也适用于 React.js。
4.4 如何在Vue.js 函数式组件中触发一个事件?
在从函数式组件中触发一个事件并不简单。不幸的是，文档中也没有提到这一点。函数式组件中不可用 $emit 方法。stack overflow 上有人讨论过这个问题:
How to emit an event from Vue.js Functional component?
5、Vue.js 的透明包裹组件
组件包裹一些DOM元素，并且公开了这些DOM元素的事件，而不是根DOM的节点实例。
例如：
My Label 这里我们真正感兴趣的是 input 节点，而不是 div 根节点，因为它主要是为了样式和修饰而添加的。用户可能对这个组件的几个输入事件感兴趣，比如 blur、focus、click、hover等等。这意味着我们必须重新绑定每个事件。我们的组件如下所示。
