предисловие

Предварительная альфа-версия Vue 3.x. Позже должны появиться Alpha, Beta и другие версии, и ожидается, что официальная версия 3.0 не будет выпущена как минимум до первого квартала 2020 года;
Поэтому вам следует заложить фундамент Vue2.x до того, как он выйдет;
С базовым использованием Vue легко начать, но есть много оптимизированных способов написания, о которых вы, возможно, не знаете.В этой статье перечислены 36 навыков разработки Vue;
Последующий Vue 3.x будет продолжать обновляться после выхода.

1.require.context()

1. Сценарий: если на страницу необходимо импортировать несколько компонентов, исходный метод записи:

import titleCom from '@/components/home/titleCom'
import bannerCom from '@/components/home/bannerCom'
import cellCom from '@/components/home/cellCom'
components:{titleCom,bannerCom,cellCom}

2. Таким образом пишется много повторяющегося кода, который можно написать с помощью require.context

const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})
components:modules

Таким образом, независимо от того, сколько компонентов введено на страницу, этот метод можно использовать.

3. Методы API

实际上是 webpack 的方法,vue 工程一般基于 webpack,所以可以使用
require.context(directory,useSubdirectories,regExp)
接收三个参数:
directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式,一般是文件名

2.watch

2.1 Обычное использование

1. Сценарий: когда таблица первоначально введена, необходимо вызвать интерфейс запроса getList(), а затем будут повторно запрошены входные изменения.

created(){
  this.getList()
},
watch: {
  inpVal(){
    this.getList()
  }
}

2.2 Немедленное исполнение

2. Вы можете напрямую использовать сокращенную запись свойств watch и handler

watch: {
  inpVal:{
    handler: 'getList',
      immediate: true
  }
}

2.3 Глубокий мониторинг

3. Глубокое свойство часов, глубокий мониторинг, то есть мониторинг сложных типов данных

watch:{
  inpValObj:{
    handler(newVal,oldVal){
      console.log(newVal)
      console.log(oldVal)
    },
    deep:true
  }
}

В этот момент обнаруживается, что значения oldVal и newVal совпадают; Поскольку они индексируют один и тот же объект/массив, Vue не сохраняет копию значения перед модификацией; Следовательно, хотя глубокий мониторинг может отслеживать изменения объекта, он не может отслеживать изменение атрибута в конкретном объекте.

3. 14 видов компонентной связи

3.1 props

Это должно быть самым атрибутом, то есть атрибутом отца сыну; Значение реквизита может быть массивом или объектом;

// 数组:不建议使用
props:[]

// 对象
props:{
 inpVal:{
  type:Number, //传入值限定类型
  // type 值可为String,Number,Boolean,Array,Object,Date,Function,Symbol
  // type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认
  required: true, //是否必传
  default:200,  //默认值,对象或数组默认值必须从一个工厂函数获取如 default:()=>[]
  validator:(value) {
    // 这个值必须匹配下列字符串中的一个
    return ['success', 'warning', 'danger'].indexOf(value) !== -1
  }
 }
}

3.2 $emit

Это также должно быть очень распространенным, инициировать инцидент, который запускает родительский компонент для привязки себя, на самом деле это метод дочернего элемента.

// 父组件
<home @title="title">
// 子组件
this.$emit('title',[{title:'这是title'}])

3.3 vuex

1. Это также очень часто используется, vuex — это менеджер состояния. 2. Это независимый плагин, подходящий для проектов с большим количеством обмена данными, потому что, если это просто общение, его будет тяжелее использовать. 3. API

state:定义存贮数据的仓库 ,可通过this.$store.state 或mapState访问
getter:获取 store 值,可认为是 store 的计算属性,可通过this.$store.getter 或
       mapGetters访问
mutation:同步改变 store 值,为什么会设计成同步,因为mutation是直接改变 store 值,
         vue 对操作进行了记录,如果是异步无法追踪改变.可通过mapMutations调用
action:异步调用函数执行mutation,进而改变 store 值,可通过 this.$dispatch或mapActions
       访问
modules:模块,如果状态过多,可以拆分成模块,最后在入口通过...解构引入

3.4 $атрибуты и$listeners

2.4.0 Новый Эти два свойства являются необычными, но расширенное использование является обычным явлением; 1.$сценарий attrs: если от родителя к дочернему передается много значений, то в дочернем компоненте необходимо определить несколько реквизитов для решения:$attrs получает значение, которое не определено в реквизитах в родительском проходе

// 父组件
<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/>

// 子组件
mounted() {
  console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"}
},

Соответственно, если дочерний компонент определяет свойства, напечатанное значение должно удалить определенное свойство.

props: {
  width: {
    type: String,
    default: ''
  }
},
mounted() {
  console.log(this.$attrs) //{title: "这是标题", height: "80", imgUrl: "imgUrl"}
},

2.$listeners Сценарий: дочернему компоненту необходимо вызвать метод родительского компонента Решение: метод родительского компонента можно передать через v-on="$listeners" передается во внутренний компонент - полезно при создании компонентов более высокого уровня

// 父组件
<home @change="change"/>

// 子组件
mounted() {
  console.log(this.$listeners) //即可拿到 change 事件
}

Если компонент-внук хочет получить доступ к свойствам и методам вызова родительского компонента, он может передаваться напрямую уровень за уровнем.

3.inheritAttrs

// 父组件
<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/>

// 子组件
mounted() {
  console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"}
},

inheritAttrs默认值为true，true的意思是将父组件中除了props外的属性添加到子组件的根节点上(说明，即使设置为true，子组件仍然可以通过$attr获取到props意外的属性)
将inheritAttrs:false后,属性就不会显示在根节点上了

3.5 предоставлять и вводить

2.2.0 Новый описывать: Предоставлять и внедрять в основном обеспечивают варианты использования для библиотек плагинов/компонентов более высокого порядка. Его не рекомендуется использовать непосредственно в коде приложения; и эту пару вариантов нужно использовать вместе; Чтобы позволить компоненту-предку внедрять зависимость во всех своих потомков, независимо от того, насколько глубока иерархия компонентов, и это всегда будет вступать в силу, когда устанавливаются отношения восходящего и нисходящего потоков.

//父组件:
provide: { //provide 是一个对象,提供一个属性或方法
  foo: '这是 foo',
  fooMethod:()=>{
    console.log('父组件 fooMethod 被调用')
  }
},

// 子或者孙子组件
inject: ['foo','fooMethod'], //数组或者对象,注入到子组件
mounted() {
  this.fooMethod()
  console.log(this.foo)
}
//在父组件下面所有的子组件都可以利用inject

Привязки обеспечить и внедрить не являются реактивными. Это официальное намерение. Однако, если вы передаете прослушиваемый объект, свойства объекта по-прежнему реагируют, поскольку объект является ссылочным типом.

//父组件:
provide: { 
  foo: '这是 foo'
},
mounted(){
  this.foo='这是新的 foo'
}

// 子或者孙子组件
inject: ['foo'], 
mounted() {
  console.log(this.foo) //子组件打印的还是'这是 foo'
}

предоставлять и внедрять методы ответа

// 父组件
provide() {
    return {
      staticValue: this.staticValue, // 直接返回值，不可响应
      staticObject: this.staticObject, // 返回一个对象，可响应
      getReactiveValue: () => this.staticValue // 返回一个对象的函数，可响应
    }
  },
  
// 子组件
inject: ["staticValue", "getReactiveValue", "staticObject"],
computed: {
    reactiveValue() {
      return this.getReactiveValue(); // 返回注入的对象函数，通过计算属性来监听值的变化
    },
  },

Таким образом, функция обеспечивает возврат объекта или функции, потому что объекты и функции являются ссылочными типами, фактически изменение вносится не vue, а функцией ссылочного типа JS.

3.6 $родитель и$children

$родитель: родительский экземпляр$дети: дочерний экземпляр

//父组件
mounted(){
  console.log(this.$children) 
  //可以拿到 一级子组件的属性和方法
  //所以就可以直接改变 data,或者调用 methods 方法
}

//子组件
mounted(){
  console.log(this.$parent) //可以拿到 parent 的属性和方法
}

$дети и$родитель не гарантирует порядок и не реагирует Вы можете получить только родительские компоненты первого уровня и дочерние компоненты

3.7 $refs

// 父组件
<home ref="home"/>

mounted(){
  console.log(this.$refs.home) //即可拿到子组件的实例,就可以直接操作 data 和 methods
}

3.8 $root

// 父组件
mounted(){
  console.log(this.$root) //获取根实例,最后所有组件都是挂载到根实例上
  console.log(this.$root.$children[0]) //获取根实例的一级子组件
  console.log(this.$root.$children[0].$children[0]) //获取根实例的二级子组件
}

3.9 .sync

существуетvue@1.xКогда он существовал как функция двусторонней привязки, то есть дочерний компонент мог изменять значение в родительском компоненте; существуетvue@2.0был убит из-за нарушения дизайна одноэлементного потока данных; существуетvue@2.3.0+ В приведенной выше версии повторно введен модификатор .sync;

// 父组件
<home :title.sync="title" />
//编译时会被扩展为
<home :title="title"  @update:title="val => title = val"/>

// 子组件
// 所以子组件可以通过$emit 触发 update 方法改变
mounted(){
  this.$emit("update:title", '这是新的title')
}

3.10 v-slot

2.6.0 Новый 1. slot, slot-cope, scope устарели в 2.6.0, но не удалены 2. Функция состоит в том, чтобы передать шаблон родительского компонента дочернему компоненту. 3. Классификация слотов: A. Анонимный слот (также называемый слотом по умолчанию): без имени, есть только один;

// 父组件
<todo-list> 
    <template v-slot:default>
       任意内容
       <p>我是匿名插槽 </p>
    </template>
</todo-list> 

// 子组件
<slot>我是默认值</slot>
//v-slot:default写上感觉和具名写法比较统一,容易理解,也可以不用写

B. Именованный слот: метка слота относительно анонимного компонента слота именуется именем;

// 父组件
<todo-list> 
    <template v-slot:todo>
       任意内容
       <p>我是匿名插槽 </p>
    </template>
</todo-list> 

//子组件
<slot name="todo">我是默认值</slot>

C. Слот области: данные в дочернем компоненте могут быть получены родительской страницей (так что данные могут быть переданы только с родительской страницы в дочерний компонент).

// 父组件
<todo-list>
 <template v-slot:todo="slotProps" >
   {{slotProps.user.firstName}}
 </template> 
</todo-list> 
//slotProps 可以随意命名
//slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"

// 子组件
<slot name="todo" :user="user" :test="test">
    {{ user.lastName }}
 </slot> 
data() {
    return {
      user:{
        lastName:"Zhang",
        firstName:"yue"
      },
      test:[1,2,3,4]
    }
  },
// {{ user.lastName }}是默认数据  v-slot:todo 当父页面没有(="slotProps")

3.11 EventBus

1. Объявите глобальный вариабельный Eventbus Vue экземпляра, храните все данные связи, мониторы событий, на этой переменной; 2. Похоже на Vuex. Но этот путь доступен только для минимальных проектов 3. Принцип - использовать$на и$создать и создать экземпляр глобальной версии для обмена данными

// 在 main.js
Vue.prototype.$eventBus=new Vue()

// 传值组件
this.$eventBus.$emit('eventTarget','这是eventTarget传过来的值')

// 接收组件
this.$eventBus.$on("eventTarget",v=>{
  console.log('eventTarget',v);//这是eventTarget传过来的值
})

4. Можно добиться уровня и вложенных компонентов для передачи значений, но соответствующее имя события eventTarget должно быть глобально уникальным

3.12 широковещательная передача и отправка

В Vue 1.x есть эти два метода: широковещательная рассылка событий и отправка, но vue 2.x удален. Ниже приведена инкапсуляция двух методов.

function broadcast(componentName, eventName, params) {
  this.$children.forEach(child => {
    var name = child.$options.componentName;

    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      broadcast.apply(child, [componentName, eventName].concat(params));
    }
  });
}
export default {
  methods: {
    dispatch(componentName, eventName, params) {
      var parent = this.$parent;
      var name = parent.$options.componentName;
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;

        if (parent) {
          name = parent.$options.componentName;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    }
  }
}

3.13 Параметры маршрута

1. Схема 1

// 路由定义
{
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
}
// 页面传参
this.$router.push({
  path: `/describe/${id}`,
})
// 页面获取
this.$route.params.id

2. Вариант 2

// 路由定义
{
  path: '/describe',
  name: 'Describe',
  component: Describe
}
// 页面传参
this.$router.push({
  name: 'Describe',
  params: {
    id: id
  }
})
// 页面获取
this.$route.params.id

3. Вариант третий

// 路由定义
{
  path: '/describe',
  name: 'Describe',
  component: Describe
}
// 页面传参
this.$router.push({
  path: '/describe',
    query: {
      id: id
  `}
)
// 页面获取
this.$route.query.id

4. Сравнение трех схем Параметры схемы 2 не будут склеены за маршрутом, а параметры обновления страницы будут потеряны Схема один и три параметра сращены сзади, некрасиво, и выставлена ​​информация

3.14 Vue.observable

2.6.0 Новый Использование: Сделать объект отзывчивым. Vue будет использовать его внутри для обработки объекта, возвращаемого функцией данных; Возвращенный объект можно использовать непосредственно в функциях рендеринга и вычисляемых свойствах, и он будет запускать соответствующие обновления при возникновении изменений; Также может использоваться в качестве минимального межкомпонентного хранилища состояний для простых сценариев. Принцип связи, по сути, заключается в использовании Vue.observable для реализации простого vuex.

// 文件路径 - /store/store.js
import Vue from 'vue'

export const store = Vue.observable({ count: 0 })
export const mutations = {
  setCount (count) {
    store.count = count
  }
}

//使用
<template>
    <div>
        <label for="bookNum">数 量</label>
            <button @click="setCount(count+1)">+</button>
            <span>{{count}}</span>
            <button @click="setCount(count-1)">-</button>
    </div>
</template>

<script>
import { store, mutations } from '../store/store' // Vue2.6新增API Observable

export default {
  name: 'Add',
  computed: {
    count () {
      return store.count
    }
  },
  methods: {
    setCount: mutations.setCount
  }
}
</script>

4.функция рендеринга

1. Сценарий: некоторый код будет многократно повторяться при написании в шаблоне, поэтому функция рендеринга в это время будет работать.

// 根据 props 生成标签
// 初级
<template>
  <div>
    <div v-if="level === 1"> <slot></slot> </div>
    <p v-else-if="level === 2"> <slot></slot> </p>
    <h1 v-else-if="level === 3"> <slot></slot> </h1>
    <h2 v-else-if="level === 4"> <slot></slot> </h2>
    <strong v-else-if="level === 5"> <slot></slot> </stong>
    <textarea v-else-if="level === 6"> <slot></slot> </textarea>
  </div>
</template>

// 优化版,利用 render 函数减小了代码重复率
<template>
  <div>
    <child :level="level">Hello world!</child>
  </div>
</template>

<script type='text/javascript'>
  import Vue from 'vue'
  Vue.component('child', {
    render(h) {
      const tag = ['div', 'p', 'strong', 'h1', 'h2', 'textarea'][this.level-1]
      return h(tag, this.$slots.default)
    },
    props: {
      level: {  type: Number,  required: true  } 
    }
  })   
  export default {
    name: 'hehe',
    data() { return { level: 3 } }
  }
</script>

2.Сравнение рендера и шаблона Первый подходит для сложной логики, второй подходит для простой логики; Последний относится к объявлению рендеринга, первый принадлежит пользовательской функции рендеринга; У первого производительность выше, у второго ниже.

5. Асинхронные компоненты

Сценарий: Если проект слишком большой, это приведет к медленной загрузке, поэтому необходимо добиться загрузки асинхронных компонентов по требованию. 1. Асинхронная регистрация компонентов 3 способа

// 工厂函数执行 resolve 回调
Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包, 这些包
  // 会通过 Ajax 请求加载
  require(['./my-async-component'], resolve)
})

// 工厂函数返回 Promise
Vue.component(
  'async-webpack-example',
  // 这个 `import` 函数会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

// 工厂函数返回一个配置化组件对象
const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

Рендеринг асинхронных компонентов по сути состоит в выполнении двух или более рендерингов.Сначала текущий компонент рендерится как узел комментария.При успешной загрузке компонента выполняется повторный рендеринг через forceRender. Или визуализируйте как узел комментария, затем визуализируйте как узел загрузки и визуализируйте как компонент, который завершает запрос.

2. Загрузка маршрутов по запросу

webpack< 2.4 时
{
  path:'/',
  name:'home',
  components:resolve=>require(['@/components/home'],resolve)
}

webpack> 2.4 时
{
  path:'/',
  name:'home',
  components:()=>import('@/components/home')
}

import()方法由es6提出，import()方法是动态加载，返回一个Promise对象，then方法的参数是加载到的模块。类似于Node.js的require方法，主要import()方法是异步加载的。

6. Динамические компоненты

Сценарий: при переключении вкладок задействована динамическая загрузка компонентов.

<component v-bind:is="currentTabComponent"></component>

Но таким образом компонент будет перезагружаться каждый раз, что будет потреблять много производительности, так что это работает

<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

Таким образом, эффект переключения не имеет эффекта анимации, так что об этом можно не беспокоиться, можно использовать встроенный

<transition>
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>
</transition>

7. Рекурсивные компоненты

Сценарий: если вы разрабатываете древовидный компонент, внутренний уровень определяется в соответствии с фоновыми данными, в это время вам нужно использовать динамические компоненты

// 递归组件: 组件在它的模板内可以递归的调用自己，只要给组件设置name组件就可以了。
// 设置那么House在组件模板内就可以递归使用了,不过需要注意的是，
// 必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded
// 组件递归用来开发一些具体有未知层级关系的独立组件。比如：
// 联级选择器和树形控件 

<template>
  <div v-for="(item,index) in treeArr">
      子组件，当前层级值： {{index}} <br/>
      <!-- 递归调用自身, 后台判断是否不存在改值 -->
      <tree :item="item.arr" v-if="item.flag"></tree>
  </div>
</template>
<script>
export default {
  // 必须定义name，组件内部才能递归调用
  name: 'tree',
  data(){
    return {}
  },
  // 接收外部传入的值
  props: {
     item: {
      type:Array,
      default: ()=>[]
    }
  }
}
</script>

Рекурсивные компоненты должны устанавливать имя и конечные пороги

8. Функциональные компоненты

Определение: не имеет состояния, не может быть создан и не имеет внутренних методов обработки жизненного цикла. Правило: В версиях до 2.3.0 опция props требовалась, если функциональный компонент хотел получать реквизиты. В версии 2.3.0 или выше вы можете опустить параметр props, и все свойства компонента будут автоматически и неявно разрешены как свойства. В версии 2.5.0 и выше, если вы используете однофайловый компонент (то есть обычный файл .vue), вы можете объявить функционал прямо в шаблоне Все, что нужно компоненту, передается через параметр контекста.

Свойства контекста: 1.props: объект, предоставляющий все реквизиты 2.children: массив дочерних узлов VNode 3.slots: функция, которая возвращает объект, содержащий все слоты 4.scopedSlots: (2.6.0+) объект, который предоставляет переданные слоты с областью действия. Также предоставляет обычные слоты как функции. 5.data: весь объект данных, передаваемый компоненту, передается компоненту в качестве второго параметра createElement. 6.parent: ссылка на родительский компонент 7.listeners: (2.3.0+) Объект, содержащий все прослушиватели событий, зарегистрированные родительскими компонентами для текущего компонента. Это псевдоним для data.on . 8.injections: (2.3.0+) Если используется опция inject, объект содержит свойства, которые должны быть внедрены

<template functional>
  <div v-for="(item,index) in props.arr">{{item}}</div>
</template>

9.components и Vue.component

компоненты: локально зарегистрированные компоненты

export default{
  components:{home}
}

Vue.component: глобальная регистрация компонентов

Vue.component('home',home)

10.Vue.extend

Сценарий: некоторые элементы в компоненте vue должны быть смонтированы на элементе, в этот момент вступает в действие расширение. это грамматика для построения компонента Пишу:

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{extendData}}</br>实例传入的数据为:{{propsExtend}}</p>',//template对应的标签最外层必须只有一个标签
  data: function () {
    return {
      extendData: '这是extend扩展的数据',
    }
  },
  props:['propsExtend']
})

// 创建的构造器可以挂载到元素上,也可以通过 components 或 Vue.component()注册使用
// 挂载到一个元素上。可以通过propsData传参.
new Profile({propsData:{propsExtend:'我是实例传入的数据'}}).$mount('#app-extend')

// 通过 components 或 Vue.component()注册
Vue.component('Profile',Profile)

11.mixins

Сценарий: некоторые компоненты имеют некоторую повторяющуюся логику js, такую ​​как проверка кода подтверждения мобильного телефона, время синтаксического анализа и т. д., миксины могут реализовать такое микширование. значение mixins представляет собой массив

const mixin={
    created(){
      this.dealTime()
    },
    methods:{
      dealTime(){
        console.log('这是mixin的dealTime里面的方法');
      }
  }
}

export default{
  mixins:[mixin]
}

12.extends

Расширяет использование и смешины, очень похожие, за исключением того, что полученные параметры являются простыми параметрами объекта или конструктора, он продлевает только однократное расширение компонента

const extend={
    created(){
      this.dealTime()
    },
    methods:{
      dealTime(){
        console.log('这是mixin的dealTime里面的方法');
      }
  }
}

export default{
  extends:extend
}

13.Vue.use()

Сценарий: когда мы используем элемент, мы сначала импортируем, а затем vue.use (), который на самом деле для регистрации компонента и запускает метод установки; Это часто используется в компонентных вызовах; Регистрация того же плагина несколько раз автоматически организована автоматически.

14.install

Сценарий: Говоря о Vue.use(), выполнение этого метода вызовет установку Это плагин для разработки vue.Первым параметром этого метода является конструктор Vue, а вторым параметром является необязательный объект option (необязательный)

var MyPlugin = {};
  MyPlugin.install = function (Vue, options) {
    // 2. 添加全局资源,第二个参数传一个值默认是update对应的值
    Vue.directive('click', {
      bind(el, binding, vnode, oldVnode) {
        //做绑定的准备工作,添加时间监听
        console.log('指令my-directive的bind执行啦');
      },
      inserted: function(el){
      //获取绑定的元素
      console.log('指令my-directive的inserted执行啦');
      },
      update: function(){
      //根据获得的新值执行对应的更新
      //对于初始值也会调用一次
      console.log('指令my-directive的update执行啦');
      },
      componentUpdated: function(){
      console.log('指令my-directive的componentUpdated执行啦');
      },
      unbind: function(){
      //做清理操作
      //比如移除bind时绑定的事件监听器
      console.log('指令my-directive的unbind执行啦');
      }
    })

    // 3. 注入组件
    Vue.mixin({
      created: function () {
        console.log('注入组件的created被调用啦');
        console.log('options的值为',options)
      }
    })

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function (methodOptions) {
      console.log('实例方法myMethod被调用啦');
    }
  }

  //调用MyPlugin
  Vue.use(MyPlugin,{someOption: true })

  //3.挂载
  new Vue({
    el: '#app'
  });

Для получения дополнительной информации, пожалуйста, выполните несколько операций расширения, миксинов, расширений, компонентов и установки в vue.

15. Vue.nextTick

2.1.0 Новый Сценарий: вам нужно, чтобы текстовое поле получало фокус при загрузке страницы. Использование: выполнить отложенный обратный вызов после окончания следующего цикла обновления DOM. Используйте этот метод сразу после изменения данных, чтобы получить обновленный DOM.

mounted(){ //因为 mounted 阶段 dom 并未渲染完毕,所以需要$nextTick
  this.$nextTick(() => {
    this.$refs.inputs.focus() //通过 $refs 获取dom 并绑定 focus 方法
  })
}

16.Vue.directive

16.1 Использование

Сценарий: официальный предоставляет нам множество инструкций, но если мы хотим превратить текст в указанный цвет и определить его как директиву, нам нужно использовать Vue.directive в это время.

// 全局定义
Vue.directive("change-color",function(el,binding,vnode){
  el.style["color"]= binding.value;
})

// 使用
<template>
<div v-change-color=“color”>{{message}}</div>
</template>
<script>
  export default{
    data(){
      return{
        color:'green'
      }
    }
  }
</script>

16.2 Жизненный цикл

1. bind вызывается только один раз и вызывается, когда инструкция привязывается к элементу в первый раз.Этот хук можно использовать для определения действия инициализации, которое выполняется один раз при привязке.
2.inserted: вызывается, когда связанный элемент вставляется в родительский узел (родительский узел может быть вызван, если он существует, он не обязательно должен существовать в документе)
3.update: вызывается при обновлении шаблона, к которому привязан элемент, и независимо от того, изменилось ли значение привязки, путем сравнения значения привязки до и после обновления ненужные обновления шаблона игнорируются.
4.ComponentUpdate: шаблон, в котором находится связанный элемент, вызывается при обновлении периода обновления.
5.unbind: вызывается только один раз, когда элемент инструкции не связан

17. Vue.filter

Сценарий: преобразование временной метки в год, месяц, день. Это общедоступный метод, поэтому его можно извлечь в фильтр для использования.

// 使用
// 在双花括号中
{{ message | capitalize }}

// 在 `v-bind` 中
<div v-bind:id="rawId | formatId"></div>

// 全局注册
Vue.filter('stampToYYMMDD', (value) =>{
  // 处理逻辑
})

// 局部注册
filters: {
  stampToYYMMDD: (value)=> {
    // 处理逻辑
  }
}

// 多个过滤器全局注册
// /src/common/filters.js
let dateServer = value => value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3') 
export { dateServer }
// /src/main.js
import * as custom from './common/filters/custom'
Object.keys(custom).forEach(key => Vue.filter(key, custom[key]))

18.Vue.compile

Сценарий: скомпилируйте строку шаблона в функции рендеринга. Работает только с автономными сборками

var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

19.Vue.version

Сценарий: некоторые плагины для разработки должны быть совместимы с разными версиями vue, поэтому будет использоваться Vue.version. Использование: Vue.version() может получить версию vue.

var version = Number(Vue.version.split('.')[0])

if (version === 2) {
  // Vue v2.x.x
} else if (version === 1) {
  // Vue v1.x.x
} else {
  // Unsupported versions of Vue
}

20.Vue.set()

Сценарий: когда вы используете индекс для прямой установки элемента массива или когда вы изменяете длину массива, данные не обновляются в ответ из-за ограничений метода Object.defineprototype() Однако vue.3.x будет использовать прокси, и эта проблема будет решена. решение:

// 利用 set
this.$set(arr,index,item)

// 利用数组 push(),splice()

21.Vue.config.keyCodes

Сценарий: Пользовательские псевдонимы модификаторов ключей

// 将键码为 113 定义为 f2
Vue.config.keyCodes.f2 = 113;
<input type="text" @keyup.f2="add"/>

22.Vue.config.performance

Сценарий: отслеживание производительности

Vue.config.performance = true

Доступно только в режиме разработки и в браузерах, поддерживающих API performance.mark.

23.Vue.config.errorHandler

1. Сценарий: укажите обработчик необработанных ошибок во время рендеринга и наблюдения за компонентом. 2. Правила: Начиная с версии 2.2.0, этот хук также перехватывает ошибки в хуках жизненного цикла компонентов. Кроме того, когда этот хук не определен, пойманная ошибка будет выводиться через console.error, чтобы избежать сбоя приложения. Начиная с версии 2.4.0, этот хук также будет перехватывать ошибки внутри пользовательских обработчиков событий Vue. Начиная с версии 2.6.0, этот хук также перехватывает ошибки, возникающие внутри прослушивателя v-on DOM. Кроме того, если какой-либо переопределенный хук или обработчик возвращает цепочку промисов (например, асинхронную функцию), ошибки из этой цепочки промисов также будут обрабатываться. 3. Используйте

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
}

24.Vue.config.warnHandler

2.4.0 Новый 1. Сценарий: назначьте настраиваемый обработчик предупреждению среды выполнения Vue, которое будет действовать только в среде разработчика. 2. Использование:

Vue.config.warnHandler = function (msg, vm, trace) {
  // `trace` 是组件的继承关系追踪
}

25.v-pre

Сценарий: vue — адаптивная система, но некоторые статические теги не нужно компилировать несколько раз, что может снизить производительность.

<span v-pre>{{ this will not be compiled }}</span>   显示的是{{ this will not be compiled }}
<span v-pre>{{msg}}</span>     即使data里面定义了msg这里仍然是显示的{{msg}}

26.v-cloak

Сценарий: В случае низкой скорости сети при использовании vue для привязки данных переменные будут мерцать при рендеринге страницы Использование: Эта директива остается в элементе до тех пор, пока связанный экземпляр не завершит компиляцию. При использовании с правилами CSS, такими как [v-cloak] { display: none }, эта директива может скрывать нескомпилированные теги Mustache до тех пор, пока экземпляр не будет готов.

// template 中
<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>

// css 中
[v-cloak] {
    display: none;
}

Это может устранить мерцание, но появится белый экран, который можно использовать вместе со скелетным экраном.

27.v-once

Сцена: какой-то шаблон статический Дом не меняется, то вам нужно только один раз, вы можете уменьшить накладные расходы на производительность

<span v-once> 这时只需要加载一次的标签</span>

Разница между v-once и v-pre: v-once визуализируется только один раз; v-pre не компилируется и выводится как есть

28. Модификаторы событий

.stop:阻止冒泡
.prevent:阻止默认行为
.self:仅绑定元素自身触发
.once: 2.1.4 新增,只触发一次
.passive: 2.3.0 新增,滚动事件的默认行为 (即滚动行为) 将会立即触发,不能和.prevent 一起使用

29. Модификаторы клавиш и коды клавиш

Сценарий: иногда вам нужно следить за поведением клавиатуры, например нажатием клавиши ввода для запроса интерфейса и т. д.

// 对应键盘上的关键字
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

30.Vue-router

Сценарий: Vue-router — официальный плагин маршрутизации.

30.1 Кэширование и анимация

1. Для роутинга используется официальный компонент vue-router, и способ его использования считается всем знакомым;
2. Здесь я опишу кеш роутинга и анимацию;
3. Вы можете использовать exclude (исключение) или include (включение), новое в 2.1.0, чтобы судить

<transition>
  <keep-alive :include="['a', 'b']">
  //或include="a,b" :include="/a|b/",a 和 b 表示组件的 name
  //因为有些页面,如试试数据统计,要实时刷新,所以就不需要缓存
    <router-view/> //路由标签
  </keep-alive>
  <router-view exclude="c"/> 
  // c 表示组件的 name值
</transition>

Примечание. При сопоставлении сначала проверяется параметр имени самого компонента, и если параметр имени недоступен, он соответствует его локально зарегистрированному имени (значение ключа параметра компонентов родительского компонента). Анонимные компоненты не могут быть сопоставлены
4. Используйте v-if, чтобы судить, компонент будет перерендерен, но не обязательно перечислять имена компонентов по одному.

30.2 Глобальные перехватчики маршрутизации

1.router.beforeEach

router.beforeEach((to, from, next) => {
  console.log('全局前置守卫：beforeEach -- next需要调用') //一般登录拦截用这个,也叫导航钩子守卫
  if (path === '/login') {
    next()
    return
  }
  if (token) {
    next();
  } 
})

2.router.beforeResolve (v 2.5.0+) Как и в случае с beforeEach, отличие состоит в том, что защита синтаксического анализа вызывается до подтверждения навигации и после разрешения всех встроенных в компоненты защиты и компонентов асинхронной маршрутизации. то есть вызывается после beforeEach

3.маршрутизатор.после каждого глобальный почтовый хук Вызывается в конце всех переходов маршрутизации Эти хуки не будут принимать следующую функцию и не изменят саму навигацию.

30.3 Крючки маршрутизации компонентов

1.beforeRouteEnter Вызывается перед подтверждением соответствующего маршрута, который отображает компонент, использование и параметры аналогичны router.beforeEach, следующий должен быть активно вызван На данный момент экземпляр компонента не создан и не может получить доступ к этому Доступ к экземплярам компонента можно получить, передав обратный вызов next. Выполните обратный вызов, когда навигация будет подтверждена, и передайте экземпляр компонента в качестве параметра метода обратного вызова.

beforeRouteEnter (to, from, next) {
  // 这里还无法访问到组件实例，this === undefined
  next( vm => {
    // 通过 `vm` 访问组件实例
  })
}

2.beforeRouteUpdate (версия 2.2+) Вызывается при изменении текущего маршрута и повторном использовании компонента, через this можно получить доступ к экземпляру, необходимо активно вызывать next, и обратный вызов не может быть передан

3.beforeRouteLeave Вызывается при переходе от соответствующего маршрута компонента, вы можете получить доступ к экземпляру компонента this, next необходимо вызывать активно, обратный вызов не может быть передан

30.4 Режим маршрутизации

Установите свойство режима: хэш или история

30.5 Vue.$router

this.$router.push():跳转到不同的url，但这个方法回向history栈添加一个记录，点击后退会返回到上一个页面
this.$router.replace():不会有记录
this.$router.go(n):n可为正数可为负数。正数前进， 负数后退,类似 window.history.go(n)

30.6 Vue.$route

Представляет объект маршрутизации текущего перехода, атрибуты: имя: название маршрута путь: путь запрос: передать параметры для получения значений params: передать параметры для получения значений fullPath: проанализированный URL-адрес, включая полный путь к параметрам запроса и хэш. сопоставлено: копия записи маршрута redirectedFrom: если есть перенаправление, это имя маршрута, с которого произошло перенаправление.

this.$route.params.id:获取通过 params 或/:id传参的参数
this.$route.query.id:获取通过 query 传参的参数

30.7 ключи просмотра маршрутизатора

Сценарий: поскольку Vue будет повторно использовать одни и те же компоненты, то есть /page/1 => /page/2 или /page?id=1 => /page?id=2, при переходе таких ссылок он не будет выполнять созданные и навесной классный крючок

<router-view :key="$route.fullPath"></router-view>

Таким образом, будет выполнен как созданный, так и смонтированный компонент.

31.Object.freeze

Сценарий: длинный список данных, как правило, не изменяется, но vue выполняет преобразование геттера и сеттера. Использование: это новая функция ES5, которая может заморозить объект и предотвратить его изменение. Поддержка: vue 1.0.18+ поддерживает его.Для объектов, которые заморожены с помощью замораживания данных или vuex, vue не будет выполнять преобразование геттера и сеттера Примечание. Замораживание замораживает только одно свойство внутри, ссылочный адрес все еще можно изменить.

new Vue({
    data: {
        // vue不会对list里的object做getter、setter绑定
        list: Object.freeze([
            { value: 1 },
            { value: 2 }
        ])
    },
    mounted () {
        // 界面不会有响应,因为单个属性被冻结
        this.list[0].value = 100;

        // 下面两种做法，界面都会响应
        this.list = [
            { value: 100 },
            { value: 200 }
        ];
        this.list = Object.freeze([
            { value: 100 },
            { value: 200 }
        ]);
    }
})

32. Шаблон отладки

Сценарий: в процессе разработки Vue вы часто сталкиваетесь с проблемой ошибок переменных JavaScript при рендеринге шаблона шаблона.В это время вы можете выполнить отладку через console.log В это время вы можете смонтировать функцию журнала в среде разработки.

// main.js
Vue.prototype.$log = window.console.log;

// 组件内部
<div>{{$log(info)}}</div>

33. Советы по vue-загрузчику

33.1 preserveWhitespace

Сценарий: в разработке кода vue обычно есть пробелы, в это время, если пробел не убрать для упаковки и сжатия, размер пакета будет увеличен. Настройка saveWhitespace может уменьшить размер пакета.

{
  vue: {
    preserveWhitespace: false
  }
}

33.2 transformToRequire

Сценарий: Раньше при написании Vue я часто писал такой код: требую изображение заранее и передаю его в переменную, а затем передаю компоненту

// page 代码
<template>
  <div>
    <avatar :img-src="imgSrc"></avatar>
  </div>
</template>
<script>
  export default {
    created () {
      this.imgSrc = require('./assets/default-avatar.png')
    }
  }
</script>

Теперь: после настройки transformToRequire вы можете настроить его напрямую, чтобы vue-loader автоматически запрашивал соответствующие свойства и передал их компоненту.

// vue-cli 2.x在vue-loader.conf.js 默认配置是
transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
}

// 配置文件,如果是vue-cli2.x 在vue-loader.conf.js里面修改
  avatar: ['default-src']

// vue-cli 3.x 在vue.config.js
// vue-cli 3.x 将transformToRequire属性换为了transformAssetUrls
module.exports = {
  pages,
  chainWebpack: config => {
    config
      .module
        .rule('vue')
        .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
      options.transformAssetUrls = {
        avatar: 'img-src',
      }
      return options;
      });
  }
}

// page 代码可以简化为
<template>
  <div>
    <avatar img-src="./assets/default-avatar.png"></avatar>
  </div>
</template>

34. Установите псевдонимы для путей

1. Сценарий: в процессе разработки нам часто нужно вводить различные файлы, такие как картинки, CSS, JS и т. д. Чтобы не писать длинные относительные пути (../), мы можем настроить псевдоним для разных каталогов

2.vue-cli 2.x конфигурация

// 在 webpack.base.config.js中的 resolve 配置项，在其 alias 中增加别名
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

3.vue-cli 3.x конфигурация

// 在根目录下创建vue.config.js
var path = require('path')
function resolve (dir) {
  console.log(__dirname)
  return path.join(__dirname, dir)
}
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set(key, value) // key,value自行定义，比如.set('@@', resolve('src/components'))
  }
}

35.img не удалось загрузить

Сценарий: Иногда адрес фонового изображения не может быть открыт, поэтому в это время следует добавить изображение по умолчанию.

// page 代码
<img :src="imgUrl" @error="handleError" alt="">
<script>
export default{
  data(){
    return{
      imgUrl:''
    }
  },
  methods:{
    handleError(e){
      e.target.src=reqiure('图片路径') //当然如果项目配置了transformToRequire,参考上面 33.2
    }
  }
}
</script>

36.css

36.1 Местные стили

1. Атрибут scoped тега стиля в Vue указывает, что его стиль влияет только на текущий модуль, который является приватизацией стиля.

2. Правила/принципы рендеринга: Добавьте уникальный атрибут данных в узел HTML DOM, чтобы указать уникальность Добавьте селектор атрибутов данных текущего компонента в конец соответствующего селектора CSS, чтобы приватизировать стиль, например: .demo[data-v-2311c06a]{} Если введено меньше или sass, он будет установлен только для последнего элемента.

// 原始代码
<template>
  <div class="demo">
    <span class="content">
      Vue.js scoped
    </span>
  </div>
</template>

<style lang="less" scoped>
  .demo{
    font-size: 16px;
    .content{
      color: red;
    }
  }
</style>

// 浏览器渲染效果
<div data-v-fed36922>
  Vue.js scoped
</div>
<style type="text/css">
.demo[data-v-039c5b43] {
  font-size: 14px;
}
.demo .content[data-v-039c5b43] { //.demo 上并没有加 data 属性
  color: red;
}
</style>

36.2 Глубинный атрибут

// 上面样式加一个 /deep/
<style lang="less" scoped>
  .demo{
    font-size: 14px;
  }
  .demo /deep/ .content{
    color: blue;
  }
</style>

// 浏览器编译后
<style type="text/css">
.demo[data-v-039c5b43] {
  font-size: 14px;
}
.demo[data-v-039c5b43] .content {
  color: blue;
}
</style>

послесловие

Оригинальные кодовые слова непросты, добро пожаловать, звезда!