内存图

回顾公式：

• 对象.proto === 其构造函数.prototype
• 函数.proto === Function.prototype

所以

• vm.proto === Vue.prototype
• Vue.proto === Function.prototype

• 把Vue的实例命名为vm是尤雨溪的习惯，我们应该沿用
• vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新
• vm的构造函数是Vue，按照ES6的说法，vm所属的类是Vue
• options是new Vue的参数，一般称之为选项或构造选项（即构造函数后面的选项）
• 接下来一一了解图中的五个问号

一：options里面有什么

补充知识：方法和函数的区别

补充知识：生命周期和钩子

• 生命周期就是代码执行的过程，于Vue而言，生命周期就是created，mounted，updated和destroyed等
• 钩子就是在代码执行过程中的回调函数，也就是代码执行过程中所需的一些逻辑处理。
• 一般而言，生命周期是框架中定义好的，你只需将你的逻辑挂载在生命周期上，称为钩子。

入门属性

el-挂载点（与$mount有替换关系）

• 类型：string | Element

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

• 详细：

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

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

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

• 与$mount有替换关系

//el
new Vue({
    el:'#app',//对应html中id=app
    render：h=>h(Demo)
})

//mount
new Vue({
    render：h=>h(Demo)
}).$mount('#app')
复制代码

data-内部数据（优先使用函数，避免两个组件共用data的问题）

• 类型：Object | Function

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

• 详细：

  Vue 实例的数据对象。Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的 property 会被忽略。大概来说，data 应该只能是数据 – 不推荐观察拥有状态行为的对象。

• 示例

//对象
new Vue({
    data:{
        n:0
    },
    template:'',
    methods:{}
}).$mount('#app')

//函数
new Vue({
    data:function(){//:function可省略
        return{
            n:0
        }
    },
    template:'',
    methods:{}
}).$mount('#app')
复制代码

methods-方法（事件处理函数/普通处理函数）

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

• 详细：

  methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

  注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

• 示例：

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2
复制代码

componens-使用Vue组件，注意大小写

• 类型：Object

• 详细：

  包含 Vue 实例可用组件的哈希表。

• 示例

• 1.引用（优先使用这种方法）

• 2.全局定义

• 3.结合前两种的写法

• 4.文件名尽量全部小写，组件最好首字母大写

四个钩子

• created-实例出现在内存中
• mounted-实例出现在页面中
• updated-实例更新了
• destroyed-实例从页面和内存中消亡了（例：子组件，点按钮就unvisible，当unvisible时就会触发destroyed）

props-外部数据/属性

• 传字符串（message=”n”）

• 传非字符串，如数字、变量等（加冒号即可,例:①:message=”n”传入this.n数据；②:fn=”add”传入this.add函数）

• 声名

进阶属性（未完待续）