Vue： 构造选项学习笔记

Vue的选项式API包含以下部分：Data、DOM、生命周期钩子，资源、组合、杂项。本篇主要用来记录学习的，主要涉及这些API的类型、限制条件，并且举一些例子来更好理解。

先甩一个文档

数据

data-内部数据

• 类型：Object | Function

• 限制：组件的定义只接受function

  因为组件引入调用data，如果data为对象，那么连续两次引入，第二次就会覆盖掉第一次。当data为Function时，组件调用函数，函数会生成一个全新的对象，所以两次引入会得到两个全新的对象，互不干扰。

  注意，是调用data

• 详细：

  // vue.js完整版为例
  console.log(window.Vue)
  
  const Vue = window.Vue
  
  Vue.config.productionTip = false
  
  new Vue({
    // data是对象
    data:{
      n:0
    },
    // 函数可缩写为 data(){}
    // 或函数
    data:function{
      return{
        n:0
      }
    },
    template:`
      <div>
      {{ n }}
      <button @click="add">+1</button>
      </div>
    `,
    methods:{
      add(){
        this.n += 1
      }
    }
  }).$mount('#app')
  

更多：数据式响应

props-外部数据

• 类型：Array<string> | Object

• 详情：props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值

• 例子：

  传字符串

当使用:时，引号内是JS，比如下面，就可以将n:0传入demo.vue

如果需要再JS里传字符串，则需要再加引号

让儿子call父亲里的函数add

更高级一点的，儿子call父亲的add，父亲的n发生变化，再将n传给儿子

propsData

computed

methods-方法

• 类型：{[key: string]: Function}

• 详细：事件处理函数或者是普通函数

  // 事件处理函数
  new Vue({
    data() {
      return{
        n: 0   
      }
    },
    template:`
      <div>
      {{ n }}
      <button @click="add">+1</button>
      </div>
    `,
    methods: {
      add() {
        // 方法中的this自动绑定为Vue实例
        this.n += 1
      }
    }
  }).$mount('#app')
  

  // 普通函数，可以代替filter
  new Vue({
    data() {
      return{
        n: 0,
        array: [1,2,3,4,5,6,7,8]
      }
    },
    template:`
      <div>
      {{ n }}
      <button @click="add">+1</button>
      <hr>
      {{filter()}}
      </div>
    `,
    methods: {
      add() {
        // 方法中的this自动绑定为Vue实例
        this.n += 1
      },
      filter(){
        return this.array.filter(i => i % 2 === 0)
      }
    }
  }).$mount('#app')
  

  注意：不应该使用箭头函数来定义method函数，因为箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向Vue实例，this.n将是undefined。

watch

DOM

el-挂载点

• 类型：string | Element

• 限制：只在用new创建实例时生效

• 详细：与$mount有替换关系。

  提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

  在实例挂载之后，元素可以用 vm.$el 访问。

  如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。

template

render

renderError

生命周期钩子

生命周期图示

beforeCreate

created-实例出现在内存中

• 类型：Function

• 例子

  代码如下

debuggercreated，可以知道created(){}运行时，实例出现在内存中，不出现在页面中

debuggermounted，可以知道mounted(){}运行时，实例出现在页面中

实例每次更新，updated(){}运行

而每次点击toggle，使实例消失时，destory(){}就会运行，并且再次调出实例时，n还原为0，表示实例从页面和内存中消失

beforeMount

mounted-实例出现在页面中

• 类型：Function

• 例子：参见created中的例子

beforeUpdate

updated-实例更新了

• 类型：Function

• 例子：参见created中的例子

activated

deactivated

beforeDestroy

destroyed-实例从页面和内存中消亡了

• 类型：Function

• 例子：参见created中的例子

errorCaptured

资源

directives

filters

components-组件

• 类型：Object

• 三种引入方式

  考虑模块化，优先使用第一种方法

  方法一：

方法二：

方法三：

结合前两种方法

• 命名规则：组件名推荐大写开头，与原生标签区分。文件名推荐小写，因为有的系统识别不了大小写，比如win10。

组合

parent

mixins

extends

provide

inject