집 > 기사 > 웹 프론트엔드 > Vue 문서에서 쉽게 간과되는 여러 부분에 대한 자세한 분석

Vue 문서에서 쉽게 간과되는 여러 부분에 대한 자세한 분석

亚连원래의: 2018-05-29 11:09:171551검색

Vue 문서에서 공부하지 않을 수 있는 일부 내용에 대해서는 Vue 문서에서 간과하기 쉬운 여러 부분에 대한 자세한 분석을 주로 소개합니다. 필요한 친구들이 참고할 수 있습니다.

Vue 문서에 여러분이 공부하지 않을 수 있는 내용을 간략하게 요약해 놓았습니다. 경험이 풍부한 분들을 위한 패스트푸드이기 때문에 초보자에게는 특별히 적합하지 않으며 몇 가지 부족한 점이 있을 수 있으니 더 많은 제안 부탁드립니다.

코드를 절약하는 Mixin

mixin 개념: 데이터 변수/라이프 사이클 후크/공용 메소드를 포함한 구성 요소 수준의 재사용 가능한 논리로 중복 논리를 반복적으로 작성할 필요 없이 혼합 구성 요소에서 직접 사용할 수 있습니다. 상속)

사용법:

특정 공용 폴더 pub 아래에 mixin 폴더를 만들고 그 아래에 mixinTest.js를 만듭니다

const mixinTest = {
  created() {
    console.log(`components ${this.name} created`)
  },
  methods: {
    hello() {
      console.log(&#39;mixin method hello&#39;)
    }
  }
}
export default mixinTest

컴포넌트에서 방금 공용 mixin 파일을 참조하여 사용

import mixinTest from &#39;../pub/mixin/mixinTest.js&#39;
export default {
  data() {
    return {
      name: &#39;hello&#39;
    }
  },
  mixins: [mixinTest],
  methods: {
    useMixin() {
      this.hello()
    }
  }
}

ps: Vue.mixin() 메서드를 사용하면 나중에 생성되는 모든 Vue 예제에 영향을 미치므로 주의해서 사용하세요!

mixin의 여러 기능에 주의하세요.

혼합된 데이터 변수는 얕은 병합입니다. 충돌이 발생하는 경우 구성 요소의 데이터가 우선 적용됩니다(객체의 사용자 정의 변수)
논리 혼합 라이프 사이클 함수는 컴포넌트에 정의된 라이프 사이클 함수 로직과 병합하고 먼저 실행(생성/마운트/파기)합니다.
객체로 혼합된 값을 가진 옵션은 객체로 혼합됩니다. 충돌이 발생하면 구성 요소 내의 키 이름도 우선 적용됩니다(데이터/메소드/구성 요소/지시문)

슬롯 콘텐츠 배포

슬롯 개념 소개: 작성 시 Vue와 React의 차이점은 구성에 있습니다. 구성 요소 및 하위 구성 요소의 내부 요소입니다. 구성 요소에 액세스하고 표시할 수 있는 하위 요소가 없습니다(당분간 렌더링 기능을 고려하지 않음). 대신 API는 슬롯입니다

사용 시나리오 정의:

사용자 정의 하위 구성 요소에는 중첩된 HTML 또는 기타 사용자 정의 태그 구성 요소가 있습니다
이 사용자 정의 하위 구성 요소는 상위 구성 요소에 작성되며 중첩된 항목도 상위 구성 요소에 배치됩니다. 하위 구성 요소의 템플릿에서 58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee 태그를 사용하여 달성됩니다. 상위 구성 요소에 작성된 중첩 태그의 효과
는 기본적으로 상위 구성 요소의 내용을 하위 구성 요소에 배치하는 것입니다. 여러 태그도 함께 삽입됩니다

<template>
  <p id="app"> 
    <self-component> <!--self-component表示自定义的组件-->
      <span>12345</span> <!--父组件里的嵌套标签--> 
    </self-component> 
  </p> 
</template>
<script>
export default {
  components: [selfComponent]
}
</script>

<!--self-component的组件模板-->
<template>
  <p>
    <button><slot></slot></button>
  </p>
</template>
<script>
export default {
  // 只有子组件的模板里面有slot标签，才能取到写在自定义组件里面的标签的渲染引用
}
</script>

슬롯 기능의 두 가지 고급 점:

슬롯 삽입된 콘텐츠의 편집 범위: 배포되는 콘텐츠는 해당 콘텐츠가 위치한 템플릿에 따라 결정됩니다.

특정 콘텐츠가 작성된 위치에 따라 컴파일 범위가 결정됩니다(대부분의 경우 상위 컴포넌트의 범위에 속함)

2.1. 0+는 새로운 범위 슬롯을 추가하여 하위 구성 요소의 속성이 상위 구성 요소의 하위 구성 요소에 작성된 내용에 노출될 수 있도록 합니다
하위 구성 요소의 슬롯 태그는 사용자 정의 속성을 직접 작성할 수 있으며, 상위 구성 요소는 슬롯 범위 속성과 함께 슬롯에 태그를 작성합니다

<!-- 父组件模板 -->
<child :items="items">
 <!-- 作用域插槽也可以是具名的 -->
 <li slot="item" slot-scope="props" class="my-fancy-item">{{ props.text }}</li>
</child>

<!-- 子组件模板 -->
<ul>
 <slot name="item" v-for="item in items" :text="item.text">
  <!-- 这里写当父组件引用子组件但没写内部内容时展示的东东 -->
 </slot>
</ul>

태그가 삽입되는 위치를 지정하는 슬롯의 이름 속성은 문서의 명명된 슬롯입니다( 이 공식 문서에 명확하게 설명되어 있습니다)

하위 컴포넌트의 템플릿에 작성된 슬롯에는 이름 속성(af84d27f87c182823f3fa1c1661899d27971cf77a46923278913ee247bc958ee)이 있습니다.

슬롯 내용을 다음과 같이 씁니다. 상위 구성 요소의 하위 구성 요소는 슬롯 속성을 지정합니다(dc291568df035039bbe0de0297cbb0a112394b3e26ee717c64999d7867364b1b4a3)
상위 구성 요소의 콘텐츠는 슬롯==에 해당합니다. 올바른 위치
슬롯 속성이 지정되지 않으면 기본적으로 익명 슬롯 위치에 배치됩니다
동적 구성 요소

동적 구성 요소의 이 기능은 다음과 같은 Vue 프로젝트에서 사용되지 않습니다. 몇 마디 더 말해야겠습니다.
동적 구성 요소의 적용:

일부 구성 요소의 전환에는 라우팅이 포함되지 않습니다. 변경해야 하는 페이지 영역

변경된 구성요소 매개변수는 모두 정의가 일치합니다. 예를 들어 개체를 전달해야 하지만 개체의 데이터 구조입니다.
구성 요소의 is 속성을 사용하면 템플릿의 중복 구성 요소를 방지하여 여러 v-if 템플릿을 방지하고 코드가 더 깔끔해집니다. 사용된 방법(문서 참조):

<keep-alive>
  <component v-bind:is="currentView">
  <!-- 组件在 vm.currentview (对应组件名称)变化时改变！ -->
  <!-- 非活动组件将被缓存！可以保留它的状态或避免重新渲染 -->
  </component>
</keep-alive>

동적으로 전환되는 구성 요소는 상위 구성 요소에 도입되어야 하지만 가져오기는 동적이 아닙니다.

7c9485ff8c3cba5ae9343ed63c2dc3f7 동적 구성 요소를 래핑할 때 비활성 구성 요소 인스턴스는 성능을 향상하고 반복 렌더링을 방지하기 위해 캐시됩니다(연결 유지는 추가 DOM 구조를 렌더링하지 않음)

7c9485ff8c3cba5ae9343ed63c2dc3f7 캐시된 구성 요소와 캐시되지 않은 구성 요소(문자열/배열/정규로 전달)를 지정하기 위한 include 및 제외라는 두 가지 속성이 있습니다.
다시 렌더링을 방지하는 또 다른 방법은 Used를 사용하여 v-once 속성을 태그에 추가하는 것입니다. 반복되는 렌더링을 피하기 위해 많은 양의 정적 콘텐츠를 캐시합니다.

ps:7c9485ff8c3cba5ae9343ed63c2dc3f7不会在函数式组件中正常工作，因为它们没有缓存实例。

动画与过渡

其实很多前端工程师第一次用Vue的动画和过渡都是通过库组件来做到的，所以对这块没怎么深挖，各种过渡特效和按钮动画就跑起来了，现在就看下文档，补补课

前端实现动画的基本方法分为三种种：css3的过渡和keyframe/javascript操纵dom/使用webgl或者canvas来独立实现，其中第三种是作为展示动画，与交互结合较少，而Vue作为一个框架，其支持动画基是从前两种入手的，从官方文档提到的四种支持就可以看出这一点。不过官方文档是从DOM过渡和状态过渡两个方面来讲解，前者是DOM的消失和出现的动画等属性的变化，后者是页面上某些值的变化。

DOM属性的改变

若是单个元素/组件的显隐，在组件外面包裹一层300ff3b250bc578ac201dd5fb34a00046087faffb1c3f26530d25a6b190c2f81，而后选择是css过渡还是javascript过渡

CSS过渡：

vue提供了六个样式后缀，本质是在dom过渡的过程中动态地添加和删除对应的className。(-[enter|leave]-?[active|to]?)
如果用css库来辅助开发，可以在transiton这个标签上定义自定义过渡类名，也是六个属性。([enter|leave]-?[active|to]?-class)
常见的一种效果是元素首次渲染的动画，如懒加载图片飞入，这个时候要在transiton标签上加上appear，另有三个属性可指定(appear-?[to|active]?-class)

<!-- 每种CSS动画库对应的class命名规则可能不同，所以根据不同库要自己写，以animate.css为例 -->
<transition
  name="custom-classes-transition"
  enter-active-class="animated tada"
  leave-active-class="animated bounceOutRight"
  :duration="{ enter: 500, leave: 800 }"
>...</transition>
<!-- duration属性可以传一个对象，定制进入和移出的持续时间-->

JS过渡：

因为现在很多动画库需要工程师调用库提供的函数，把dom元素传入进行处理，这个时候需要这种方式
通过在transiton这个标签上添加监听事件，共8个([before|after]?-?[enter|leave]-?[cancelled]?)
监听事件的回调函数的第一个参数都是el，为过渡的dom元素，在enter和leave这两个还会传入done作为第二个参数
元素首次渲染的动画，可以指定的监听事件有4个([before|after]?-?appear和appear-cancelled)

<template>
  <transition v-bind:css="false"
  v-on:before-enter="beforeEnter" v-on:enter="enter"
  v-on:leave="leave" v-on:leave-cancelled="leaveCancelled">
    <!-- 对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测 -->
  </transition>
</template>
<script>
methods: { // 以Velocity库为例
  beforeEnter: function (el) {/*...*/},
 // 此回调函数是可选项的设置
 enter: function (el, done) {
  // Velocity(el, { opacity: 1, fontSize: &#39;1.4em&#39; }, { duration: 300 })
  done() //回调函数 done 是必须的。否则，它们会被同步调用。
 },
 leave: function (el, done) {
  // Velocity(el, { translateX: &#39;15px&#39;, rotateZ: &#39;50deg&#39; }, { duration: 600 })
  done()
 },
 leaveCancelled: function (el) {/*...*/}
}
</script>

多元素过渡其实就是一句话：照常使用v-if/v-else的同时对同一种标签加上key来标识

Vue对于这种多元素动画有队列上的处理，这就是transiton这个标签上的mode属性，通过指定(in-out|out-in)模式，实现消失和出现动画的队列效果，让动画更加自然。

<transition name="fade" mode="out-in">
 <!-- ... the buttons ... -->
</transition>

多组件过渡也是一句话：用上一节提到的动态组件，即可完成。

针对列表过渡，其本质仍是多个元素的同时过渡，不过列表大部分是通过数组动态渲染的，因此有独特的地方，不过整体的动画思路不变。具体有以下几点

使用transitoin-group这个组件，其需要渲染为一个真实元素，可以通过tag这个属性来指定。
列表的每个元素需要提供key属性
使用CSS过渡的话，要考虑到列表内容变化过程中，存在相关元素的定位改变，如果要让定位是平滑过渡的动画，要另外一个v-move属性。这个属性是通过设置一个css类的样式，来将创建元素在定位变化时的过渡，Vue内部是通过FLIP实现了一个动画队列，只要注意一点就是过渡元素不能设置为display:inline,这里需要文档上的代码做一个简短的demo：(其实通过在li上设置过渡transition属性也可以实现v-move的效果)

<template>
  <button v-on:click="shuffle">Shuffle</button>
  <transition-group name="flip-list" tag="ul">
    <li v-for="item in items" v-bind:key="item">{{ item }}</li>
  </transition-group>
</template>
<script>
import _ from &#39;lodash&#39;;
export default {
  data() {
    return {
      items: [1,2,3,4,5,6,7,8,9]
    }
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
}
</script>
<style lang="css">
.flip-list-move {
 transition: transform 1s;
}
</style>

数值和属性动态变化

这一部分的动画主要是针对数据元素本身的特效，比如数字的增减，颜色的过渡过程控制，svg动画的实现等，其本质都是数字/文本的变化。我自己总结就是：通过利用Vue的响应式系统，把数字的变化通过外部库把DOM上对应数值的变化做出连续的效果，如1->100是个数字递增的连续过程，黑色->红色的过程。官方文档主要是用几个示例代码来说明，其本质步骤如下：

在页面上通过input的双向绑定修改某一变量a，还有一个处理dom上的过渡效果的变量b
这个数据被watcher绑定(watch对象中某个属性是这个变量a)，触发逻辑
在watcher里面的逻辑就是通过外部过渡库，指定初始值b和最终值a，是把b的值最后改为a
DOM上绑定的变量就是b，如果某些复杂情况可能是基于b的计算属性，从而把b的变化过程展现出来

위의 아이디어는 단위 수준의 애니메이션 효과를 완성하는 데 사용될 수 있습니다. 이 유사한 프로세스는 실제로 매우 일반적인 요구 사항이므로 이 프로세스를 구성 요소로 캡슐화하고 항목으로 전환할 값만 노출해야 합니다. , 이 값이 변경될 때마다 애니메이션 전환 효과입니다. 컴포넌트 캡슐화는 위의 4단계를 기반으로 마운트된 라이프사이클에 지정된 초기값을 추가해야 하며 동시에 원래의 두 값인 a/b는 컴포넌트에서 하나의 값으로 사용되며 구별될 수 있다. watch 객체의 newValue 및 oldValue를 사용합니다. 최종 SVG의 경우에도 그 본질은 디지털 전환이지만 더 많은 상태 변수와 더 긴 코드가 포함됩니다. 그러나 순수한 프런트 엔드 페이지에 대한 수요는 아직 많지 않지만 취미로 약간의 재미를 느낄 수 있습니다. 작은 데모이지만 반드시 디자이너의 참여가 필요합니다. 그렇지 않으면 매개 변수를 조정하기가 어려울 것입니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

Vue 문서에서 쉽게 간과되는 여러 부분에 대한 자세한 분석

관련 기사