Vue实践与总结——组件与数据

Vue实现组件化流程

• Vue提供了一套构建组件的API，用于声明和实现 根组件，可复用组件
• Vue库提供了名为Vue的构造函数，用于初始化Vue实例
• Vue的实例往往是根组件对象，组件在构建时，可以传入配置数据，用于构建组件的基本结构和功能。这种行为叫做Options API（封装实现，传入参数，生成组件）。
  • Options API：
    • 通过配置模板参数template:，填充组件内容，生成有内容的组件
    • app.$mount()指定渲染后的结果（结构）所在的 DOM 结构的位置。vm.$mount()官网解释

let app = new Vue({
  template:`<div>hello world</div>`
})
app.$mount('#app')

• 总体步骤：组件-->通过（template）-->DOM-->挂载到页面中指定位置

注意：组件生成的结构（DOM）会替换掉挂载点元素，所以挂载点不可以是html、body。

组件对数据的处理

• 存储在data对应的对象中。
• 数据必须是一个对象。

let app = new Vue({
  template:`<div>hello world</div>`
  data:{
    name:'xiaoming'
  }
})
app.$mount('#app')

• Vue内部会遍历data对象，将data中的值交给Vue实例持有（挂载到实例对象）。
• _开头的属性或方法，不建议访问（JS难实现私有）。$开头的属性或方法，Vue对外提供访问。

组件化规则

1. 符合HTML标签命名规则
2. 不能与原生HTML标签重名

可复用组件类型

• 全局组件：通过Vue.component 创建，在Vue的任何地方都可访问
• 局部组件：组件的options中有一个选项components，可用来定义组件，可定义多个组件，每个组件就是一个key-value的映射
  注： 局部定义组件只能在当前的组件中才能使用，其他地方，包括组件的子级也不能使用。

组件的属性传递

类似给函数定义形参

props: ['name', 'age'],
props谁定义谁修改。遵循单向数据流原则。
子类通过 $emit('change',属性名) 的事件方式通知父类，父类修改属性值

• 组件内部可以通过computed（计算）、watch（监听），动态改变属性的状态

data() { 
  return {
  // 可以访问到props
  name:'xiaoming',
  age:18
  }
}
computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // 你可以传入回调数组，它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }

非 prop 特性

一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性，这些 props 会被自动添加到组件的根元素上。

替换/合并已有的特性

默认情况下，非prop 特性的属性会覆盖组件根元素上同名的内容，但是针对 style 和 class 有特殊的处理，它们会合并（同名样式还是会覆盖）。

禁用特性继承

如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false，我们可以通过组件的 this.$attrs 来获取这些属性。

注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定。

动态组件

• component 是 vue 内置的一个组件，它提供一个 is 属性用来动态渲染不同的组件
• 当组件切换的时候，都会触发组件的销毁和重建。首先，性能不好。其次，会丢失组件状态

keep-alive 组件

• 当在这些组件之间切换的时候，有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。keep-alive 是一个内置容器组件， 使用 >keep-alive 以后，内部包含的组件将增加 激活 和 失活/冻结 的状态

使用了 keep-alive 的组件会触发 activated、deactivated 两个生命周期函数

activated

keep-alive 组件激活时调用

deactivated

keep-alive 组件停用时调用

单文件组件

单文件组件把一个组件所包含的 结构、样式、行为、分别通过 template、style、script 进行分离，然后统一组织在一个文件中。