数据与要领

📒当一个vue实例被建立时，它向vue相应式体系中加入了其data能找到的一切的属性，当这些属性值变化时，视图将会相应。
是建立的时刻才会去监听，数据才是相应式的。假如在建立以后向一个对象中增加一个属性，这个属性不会被监听到，不是相应式的。在建立对象的时刻，假如能估计有什么属性，应当先初始化对象，设置一些初始值。
📒 Object.freeze()会凝结一个对像，阻挠修正现有的对象。假如运用了和这个要领，页面不会再监听这个对象了。
📒 不要在选项属性或许回调函数上运用箭头函数。箭头函数是和父级上下文绑定的，this在一切的生命周期中，不一定是指向vue实例。
📒 v-once： 一次性的绑定值，当数据转变的时刻，不会再随之变化了，
📒 在模板中放入太多的逻辑会让模板太重且难以保护。关于庞杂的逻辑，不引荐放在模版内里，应当运用盘算属性

盘算属性&&要领&&watch

📒 盘算属性是基于依靠来举行缓存的。只要在相干的依靠发作变化的时刻才会从新盘算。要领实在能够获得和盘算属性雷同的结果。
差别的是，盘算属性在依靠没有变化的时刻，不会更新，有缓存。

📒 缓存的意义：假如有个结果盘算会斲丧大批的机能才盘算出来，假如运用函数，那每次挪用这个结果都要实行一次函数，机能斲丧打，运用
盘算属性，在个中依靠没有变化的时刻不会从新盘算，机能斲丧比较小
📒 watch：当须要在数据变化时实行异步或许开支比较大的操纵运用

📒 在写代码的时刻，假如某个结果依靠一个值的变化，而且盘算这个结果比较庞杂，引荐运用盘算属性。要善用盘算属性。

class && style

📒 只管不要写在模版内里，模版应当是简约的。

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

v-if && v-show

• v-if：有很高的切换开支，在运转切换少的状况下引荐运用
• v-show: 初始衬着开支高, 在频仍切换的时刻引荐运用

📒 v-if和v-for一同运用的时刻，v-for优先级比v-if高

v-for

📒 能够经由历程一个对象来迭代，第二个参数为键名,第三个参数为索引

<div v-for="(value, key, index) in object">
  {{index}}{{ key }}: {{ value }}
</div>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

📒 “当场复用”战略：
当 Vue.js 用 v-for 正在更新已衬着过的元素列表时，它默许用“当场复用”战略。假如数据项的递次被转变，Vue 将不会挪动 DOM 元夙来婚配数据项的递次， 而是简朴复用此处每一个元素，而且确保它在特定索引下显现已被衬着过的每一个元素。这个相似 Vue 1.x 的 track-by=”$index” 。
📒 v-for能够运用要领：能够用来过滤处置惩罚数据了

<li v-for="n in even(numbers)">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

key

作用：重要是为了高效的更新假造DOM。进步遍历机能。别的vue中在运用雷同标署名元素的过渡切换时，也会运用到key属性，其目标也是为了让vue能够辨别它们，不然vue只会替代其内部属性而不会触发过渡结果。

1. 两个雷同的组件发作相似的DOM组织，差别的组件发作差别的DOM组织。
2. 统一层级的一组节点，他们能够经由历程唯一的id举行辨别。

当页面的数据发作变化时，Diff算法只会比较统一层级的节点：假如节点范例差别，直接干掉前面的节点，再建立并插进去新的节点，不会再比较这个节点今后的子节点了。假如节点范例雷同，则会从新设置该节点的属性，从而完成节点的更新。当某一层有许多雷同的节点时，也就是列表节点时，Diff算法的更新历程默许状况下也是遵照以上准绳。

数组更新检测

以下变异要领能够触发视图更新

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

⚠️ 以下几种要领不能检测数组变化：

• 当你运用索引直接设置一个项时，比方：

vm.items[indexOfItem] = newValue

• 当你修正数组的长度时，比方：

vm.items.length = newLength

解决要领：

Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)

📒 vue不能检测对象属性的增加或许删除
解决要领：

• 经由历程vue.set
• 运用Object.assgin或许_.extends()，建立新对象

事宜处置惩罚

📒 在要领中传入$event，能够接见DOM原生事宜对象

<button v-on:click="warn($event)">
  Submit
</button>

📒 事宜修饰符

表单输入绑定

📒 v-model不会在输入法组合笔墨历程当中更新，能够运用input来监听这个历程。
📒修饰符：

• .lazy: v-model内容change的时刻更新，而不是input的时刻更新
• .number
• .trim

组件

📒 动态组件：经由历程is绑定组件称号, 有些标签内里只能运用牢固标签，不能直接写组件称号，能够经由历程is来运用组件

<!-- 组件会在 `currentTabComponent` 转变时转变 -->
<component v-bind:is="currentTabComponent"></component>

<table>
  <tr is="blog-post-row"></tr>
</table>

📒 全局注册的行动必须在根 Vue 实例 (经由历程 new Vue) 建立之前发作

props

📒 props是经由历程援用传入的，所以子组件修正会影响父组件的变化
📒 prop 会在一个组件实例建立之前举行考证 (beforeCreated)
📒 interitAttrs
在版本 2.4 之前，默许状况下父作用域的不被作为props特征绑定的属性，将会作为一般的 HTML 属性，运用在跟元素上。设置 interitAttrs 为 false，以后，不会运用到跟元素上。

// parent.vue
<template>
  <child-commpent :foo="f" :boo="b"></child-comment>
</template>
<script>
const childComment = () => import('./childCom.vue')
export default {
  data () {
    return {
      f: 'Hello world!'
      b: 'Hello Vue!'
    }  
  }
}
// childComment.vue
<template>
  <div>{{ foo }}<div>
</template>

<script>
export default {
  props: ['foo']
}
</script>
</script>

末了会被衬着城如许：

<div boo="Hello Vue!">Hello world!</div>

设置 interitAttrs 为 false

export default {
  props: ['foo'],
  interitAttrs: false
}

衬着结果：

<div>Hello world!</div>

📒 $attrs
运用 v-bind=”$attrs”, 将父组件中不被以为 props特征绑定的属性传入子组件中，一般合营 interitAttrs 选项一同运用

<template>
  <child-commpent :foo="f" :boo="b" coo="c"></child-comment>
</template>
<script>
const childComment = () => import('./childCom.vue')
export default {
  data () {
    return {
      f: 'Hello world!'
      b: 'Hello Vue!',
      c: 'Hello'
    }  
  }
}
</script>
// childComment.vue
<template>
  <div>{{ foo }}<div>
  <p>attrs: {{ $attrs }}</p>
</template>
<script>
export default {
  props: ['foo'],
  interitAttrs: false
}
</script>

衬着结果：

Hello world!
Hello Vue!, Hello

📒 props能够以字符串数组的情势列出

自定义的v-model

边境处置惩罚状况

📒 $refs 只会在组件衬着完成以后见效，而且它们不是相应式的。这只意味着一个直接的子组件封装的“逃生舱”——你应当防止在模板或盘算属性中接见 $refs。

keep-alive

📒 keep-alive组件能够记着包括组件的状况

nextTick

在修正数据以后马上挪用这个函数，能够猎取更新后的DOM,假如须要DOM更新后举行一些操纵，能够运用这个函数

mixins

数据的优先级比组件内部定义的低
同名钩子函数混合成一个数组，混入对象的钩子比组件内部定义的钩子先实行

衬着函数&& jsx

假造DOM更新页面节点

vue不能检测对象属性的增加和删除，能够经由历程vue.set(obj, key, value)来增加属性

.sync

供应关于 prop 的双向绑定。

  <child :bar.sync="foo"></child>

实际上是个语法糖

  <child :bar="foo" @update:bar="e => foo = e">

此时须要在子组件中显现触发事宜：

  this.$emit('update:bar', newValue)

猎取表单数据

猎取同时还能够给变量一个初始值

const { userName, password, checked = [] } = this.form

template && render

当Vue选项对象中有render衬着函数时，Vue组织函数将直接运用衬着函数衬着DOM树，
当选项对象中没有render衬着函数时，Vue组织函数起首经由历程将template模板天生render函数，然后再衬着DOM树，
而当选项对象中既没有render衬着函数，也没有template模板时，会经由历程el属性猎取挂载元素的outerHTML来作为模板，并编译天生衬着函数。
假如 Vue 选项中包括衬着函数，该模板将被疏忽。
Vue 选项中的 render 函数若存在，则 Vue 组织函数不会从 template 选项或经由历程 el 选项指定的挂载元素中提掏出的 HTML 模板编译衬着函数。
举行DOM衬着的时刻，render函数优先级最高，template和el次之。终究获得的都是render函数
在实例挂载以后，元素能够用vm.$el接见

未完。。。