Vue.js的注意事项与技巧

让我们看看怎样行使它?

<intersection-observer @intersect-enter="handleEnter" @intersect-leave="handleLeave"> 
  <my-honest-to-goodness-component></my-honest-to-goodness-component> 
</intersection-observer> 

可是在这样做之前，请你三思。我们一样平常依靠 mixins 和一些纯函数来办理一些非凡场景的题目，你可以将 mixins 直接看做一个抽象组件。

How do I extend another VueJS component in a single-file component? (ES6 vue-loader)

3、我不太喜好 Vue.js 的单文件组件，我更但愿 HTML、CSS 和 JavaScript 疏散。

没有人阻止你这样做，假如你是个注重疏散的哲学家，喜好把差异的对象放在差异文件，可能厌恶编辑器对 .vue 文件的不不变举动，那么你这么做也是可以的。你要做的很简朴：

<!--https://vuejs.org/v2/guide/single-file-components.html --> 
<!-- my-component.vue --> 
<template src="./my-component.html"></template> 
<script src="./my-component.js"></script> 
<style src="./my-component.css"></style>  

这么做，就会呈现下一个题目：我的组件老是必要 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的节点实例。

譬喻：

<!-- Wrapper component for input --> 
<template> 
    <div class="wrapper-comp"> 
        <label>My Label</label> 
        <input @focus="$emit('focus')" type="text"/> 
    </div> 
</template> 

这里我们真正感乐趣的是 input 节点，而不是 div 根节点，由于它首要是为了样式和修饰而添加的。用户也许对这个组件的几个输入变乱感乐趣，好比 blur、focus、click、hover等等。这意味着我们必需从头绑定每个变乱。我们的组件如下所示。

<!-- Wrapper component for input --> 
<template> 
    <div class="wrapper-comp"> 
        <label>My Label</label> 
        <input type="text" 
            @focus="$emit('focus')" 
            @click="$emit('click')" 
            @blur="$emit('blur')" 
            @hover="$emit('hover')" 
        /> 
    </div> 
</template> 

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!