vue+mixin saves code

This time I will bring you vue mixin to save the amount of code. What are the precautions for vue mixin to save the amount of code? The following is a practical case, let's take a look.

mixin concept: component-level reusable logic, including data variables/life cycle hooks/public methods, so that it can be used directly in mixed components without having to rewrite redundant logic (similar to inheritance)

Usage:

Create a mixin folder under a certain public folder pub, and create mixinTest.js under it

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

Reference the just now in the component Public mixin file and use

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

ps: If you use the Vue.mixin() method, it will affect all Vue examples created later, use with caution!

Pay attention to several characteristics of mixin:

1. The data variables mixed in are shallow merges. In case of conflicts, the data in the component takes precedence (custom variables in the object)

2. The logic in the mixed life cycle function will be merged with the life cycle function logic defined in the component, and executed first (created/mounted/destroy)

3. The mixed value is an object option, which will be mixed into an object. After a conflict, the key name within the component will take precedence (data/method/components/directives)

slot content distribution

Introduction to the concept of slot: The difference between Vue and React in writing lies in the organization of internal elements of components and sub-components. There is no children element in the component for us to access and Display (disregarding the render function for now), the API instead is slot

Usage scenario definition:

1. Customized sub-component with nested HTML inside Or other custom label components

2. This custom sub-component is written in the parent component, and nested things are also placed in the parent component

3. By using the tag in the template of the child component, the effect of rendering the nested tags written in the parent component is achieved

4. Essence It is to put the content of the parent component in the child component and insert it into the position of the child component. Multiple tags will also be inserted together

<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>

Two advanced points of the slot feature:

Compilation scope of slot inserted content: The scope of the distributed content is determined according to the template in which it is located.

1. The location where the specific content is written determines the scope of compilation ( In most cases, it is under the scope of the parent component)

2. 2.1.0 Added a new scope slot, so that the properties of the child component can be exposed to the parent component and written in the child component The content inside uses the slot tag in the child component to directly write custom attributes, and then the parent component writes the tag in the slot plus the slot-scope attribute

3. <!-- 父组件模板 -->
   <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>

   The name attribute of slot specifies the location where the label is inserted, which is the named slot in the document (this official document explains it clearly)

In the subcomponent The slot written in the template has a name attribute ()

1. Write the slot content in the child component in the parent component , specify the slot attribute (

   123

   )

2. The content of the parent component will be placed in the correct position corresponding to slot==name

3. If the slot attribute is not specified, it will be placed in the anonymous slot by default

4. Dynamic components

This feature of dynamic components has been written by many people in many Vue projects, but they have never used it. It is necessary to say a few more wordsApplicability of dynamic components:

Single page application, the switching of some components does not involve routing, but the components in an area of ​​the page need to be changed

1. The definitions of the changed component parameters are consistent, for example It is a dialog box. You need to pass an object into it, but the data structure in the object is different.

2. By using the is attribute of component, you can avoid redundant component code in the template and avoid multiple v -if template code is cleaner

3. Method used (reference from the document):

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

Note:

Dynamic switching All components must be imported into the parent component. The rendering is dynamic, but the introduction is not.

包裹动态组件时，会缓存不活动的组件实例，提高性能，避免重复渲染(keep-alive不会渲染额外DOM结构)

有include和exclude这两个属性，用于指定缓存和不缓存的组件(传入字符串/数组/正则)

另一种避免重新渲染的方法是为标签增加属性v-once，用于缓存大量的静态内容，避免重复渲染。

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

动画与过渡

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

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

DOM属性的改变

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

CSS过渡：

1. vue提供了六个样式后缀，本质是在dom过渡的过程中动态地添加和删除对应的className。(-[enter|leave]-?[active|to]?)

2. 如果用css库来辅助开发，可以在transiton这个标签上定义自定义过渡类名，也是六个属性。([enter|leave]-?[active|to]?-class)

3. 常见的一种效果是元素首次渲染的动画，如懒加载图片飞入，这个时候要在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过渡：

1. 因为现在很多动画库需要工程师调用库提供的函数，把dom元素传入进行处理，这个时候需要这种方式

2. 通过在transiton这个标签上添加监听事件，共8个([before|after]?-?[enter|leave]-?[cancelled]?)

3. 监听事件的回调函数的第一个参数都是el，为过渡的dom元素，在enter和leave这两个还会传入done作为第二个参数

4. 元素首次渲染的动画，可以指定的监听事件有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: '1.4em' }, { duration: 300 })
  done() //回调函数 done 是必须的。否则，它们会被同步调用。
 },
 leave: function (el, done) {
  // Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { 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>

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

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

1. 使用transitoin-group这个组件，其需要渲染为一个真实元素，可以通过tag这个属性来指定。

2. 列表的每个元素需要提供key属性

3. 使用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 'lodash';
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>

数值和属性动态变化

The animation in this part is mainly aimed at the special effects of the data element itself, such as the increase and decrease of numbers, the control of color transition process, the implementation of svg animation, etc. The essence is the change of numbers/text. My own summary is: by using Vue's responsive system, the changes in numbers can be made into continuous effects by the changes in corresponding values ​​on the DOM through external libraries. For example, 1->100 is a continuous process of increasing numbers, black-> red process. The official document mainly uses several sample codes to illustrate. The essential steps are as follows:

1. Modify a certain variable a through the two-way binding of input on the page, and there is also a processing on the dom The transition effect variable b

2. This data is bound by the watcher (a certain attribute in the watch object is this variable a), triggering the logic

3. The logic in the watcher is to specify the initial value b and the final value a through the external transition library, and finally change the value of b to a

4. The variable bound to the DOM is b. If Some complex situations may be based on the calculated properties of b, thereby showing the change process of b

The above idea can be used to complete a unit-level animation effect. This kind of A similar process is actually a very common requirement, so it is necessary to encapsulate this process into a component and only expose the value to be transitioned as the entrance. Every time this value is changed, it will be an animation transition effect. Component encapsulation needs to add the initial value specified in the mounted life cycle based on the above four steps. At the same time, the original two values ​​​​a/b are used as one value in the component, and can be distinguished by newValue and oldValue in the watch object. As for the final SVG, its essence is also a digital transition, but it involves more state variables and longer code. However, there is still not much demand for pure front-end pages, but as a hobby, you can tinker with some fun little ones. demo, but it definitely requires the participation of the designer, otherwise it will be difficult to adjust the parameters.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

node makes a personalized command line tool

jQuery enter trigger button event (with code)

The above is the detailed content of vue+mixin saves code. For more information, please follow other related articles on the PHP Chinese website!