vue总结

vue实例，vue根实例，vue组件

实例：每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成

根实例：通过 new Vue 创建的实例，叫根 Vue 实例

组件：可复用的 Vue 实例，一个组件的 data 选项必须是一个函数，两种组件的注册类型：全局注册和局部注册

根实例和组件实例的区别：

vue实例会比vue组件多出el和router属性，而vue组件的data会被要求必须是函数，防止出现同种组件多实例共享同一个data的事情

组件的注册

1、全局注册

//注册
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

// 模板中使用
<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

2、局部注册
全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

3、在模块系统中局部注册

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

4、基础组件的自动化全局注册
若使用了 webpack (或在内部使用了 webpack 的 [Vue CLI 3+])，那么就可以使用 require.context 只全局注册通用的基础组件。这里有一份可以让你在应用入口文件 (比如 src/main.js) 中全局导入基础组件的示例代码。记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其组件目录的相对路径
  './components',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 获取和目录深度无关的文件名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

for in遍历数组，index是字符串的0,1,2，不是数字，所以arr[index]取不到对应下标的值

  不建议用for-in循环遍历数组还有以下几点原因：

• 代码中的index不是数字，是字符串“0”、“1”、“2”，可能无意间进行字符串的计算“2”+1=“21”等。

• 代码可能按照随机顺序遍历数组元素。

来自 https://www.cnblogs.com/ja-clin/p/6556793.html

vue用props定义事件和emit定义事件如何选择

组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。然而，通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解，从而提高了其可维护性和复用性。

在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的。

--结论：事假就应该用emit

来自 https://segmentfault.com/q/1010000013883412

混入mixins

应用场景：

混入 (mixins)定义了一部分可复用的方法或者计算属性

混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

注意：

1、当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。比如，数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。

2、同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

3、值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。

计算属性的应用场景

mathod需要主动去调用

计算属性类似于推送，源头一变，计算属性的结果就自动变换，逻辑上不用关注数据变换，你一开始掉用后，这种推送链接就建立了，始终自动变换

计算属性和$watch的区别

计算属性是多个因素变化，影响一个结果变化，

$watch是一个因素变换，导致多个结果变换。watch不能监听数组和对象属性的变化。需要用深度监听

watch: {

  itemArr: {

    handler (value, old) {

      console.log(value)  // 这里没办法使用this

    },

  deep: true

  }

}

下拉框回填时，更改默认值不生效，defaultVal = ""或者defaultVal = []

解决方案：声明defaultVal =[null], 赋值时，

this.$set(this.defaultVal, 0, record.type);

表格自动添加序号

方法一：colums中，增加属性：customRender: (text, record, index) => index + 1,

方法二：colums中，增加属性：scopedSlots: { customRender: "index" },同时模板中增加

                <span>{{ index + 1 }}</span>

            </template>

回调传参@click="e => {clickElement(e, records)}"

异步加载的antd Tree组件，设置了 defaultExpandAll 为true但是不起作用

如果一个表单组件没有value prop就可以称为非受控组件

来自 https://www.jianshu.com/p/f83e961b4d73

ref

给原生htmldom绑定ref，获取的是该dom对象

给组件绑定ref，this.$refs.xxx获取的是当前的组件对象

在DOM更新时，比如改变v-show的值，this. $refs.xxx获取不到该DOM，比如一个input框默认隐藏，在mounted中，显示，然后要求自动获取焦点，不能直接this.$ refs.inputA.focus();。要使用下面的：

this.$nextTick(function() {

    this.$refs.inputA.focus();

})

树形数据渲染&递归

组件调用组件本身

prop传递对象

（错误理解）父组件传递的对象，只有在data中定义的对象属性，在能传递到子组件