Vue.js学习Ⅱ----Vue实例与选项

Vue 实例

构造器

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的：

var vm = new Vue({
  ...
});

在实例化 Vue 时，需要出入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部选项：API 文档

所有的 Vue.js 组件其实都是被扩展的 Vue 实例。

数据与方法

每个 Vue 实例都会代理其 data 对象里的所有的属性，当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

只有这些被代理的属性是响应的，如果在实例创建后添加新的属性到实例上，它是不会触发视图更新的。
除了 data 属性，Vue实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $ ，以便与代理的 data 属性区分:

var data = { a: 1 }
var vm = new Vue({
  el: '#eg',
  data: data
})

console.log(vm.$el);
console.log("vm.$data:",vm.$data);
})

所以，以_或$开头的属性不会被Vue实例代理，因为它们可能和Vue内置的属性、API方法冲突。

不要在实例属性或者回调函数中使用箭头函数。因为箭头函数绑定父级上下文，所以 this 不会像预想的一样是 Vue 实例。

实例属性和方法的完整列表中查阅 API 参考。

常用选项

1. 数据

1）data

• 类型：Object | Function
• 详细： Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。
  实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。
  当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
• 示例：

var data = {a:1}; 
var vm = new Vue({
    el : "#app1",
    data : data
});

vm.a;   ==>1
vm.$data === data;  ==>true
vm.a === vm.$data.a;  ==>true

2) props

• 类型：Array(string) | Object
• 详细：用于接收来自父组件的数据。因为组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。
• 示例

<div id="app2">
  <mydemo message="hey jude"></mydemo>
</div>

Vue.component("mydemo" , {
    props : ["message"],
    template : "<span>{{message}}</span>"
});

var app2 = new Vue({
    el : "#app2"
});
---------------------------------------------------------------------------------------------
// 对象语法，提供校验
Vue.component('props-demo-advanced', {
  props: {
    // 只检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

3) propsData

• 类型：{ [key : string] : any }
• 详细：创建实例时传递 props。主要作用是方便测试。
• 限制： 只用于 new 创建的实例中。

<div id="app2"> </div>

var Comp = Vue.extend({
    props : ["message"],
    template : "<span>{{message}}</span>"
});

var app2 = new Comp({
    el : "#app2",
    propsData : {
        message : "mmmm"
    }
});

4) computed

• 类型：{ [key: string]: Function | { get: Function, set: Function } }
• 详细：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
• 限制：切勿使用箭头函数来定义计算属性函数 (例如 aDouble: () => this.a * 2)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
• 示例：

var vm = new Vue({
    data : {a:1},
    computed : {
        aDouble : function() {
            return this.a*2;
        },
        aPlus : {
            get : function(){
                return this.a + 1;
            },
            set : function(v){
                this.a = v- 1;
            }
        }
    }
});

console.log(vm.aDouble);    //2
console.log(vm.aPlus);      //2
console.log(vm.a);          //1
vm.aPlus = 3;
console.log(vm.a);          //2

5) methods

• 类型：{ [key: string]: Function }
• 详细：methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
• 示例：

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

6) watch

• 类型：{ [key: string]: string | Function | Object }
• 详细：一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
• 示例：

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    }
  }
})
vm.a = 2；    //new: 2, old: 1

2.DOM

1）el

• 类型：string | HTMLElement

• 限制：只在由 new 创建的实例中遵守

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

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

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

2）template

• 类型：string

• 详细：
  一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发 slot。

  如果值以 # 开始，则它用作选项符，将使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type="x-template"> 包含模板。

3）render

• 类型：(createElement: () => VNode) => VNode

• 详细：
  字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。render 函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

  如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。

• 注意：Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译 render 函数。

4）renderError

• 类型：(createElement: () => VNode, error: Error) => VNode

• 详细：
  只在开发者环境下工作。

  当 render 函数遭遇错误时，提供另外一种渲染输出。其错误将会作为第二个参数传递到 renderError。这个功能配合 hot-reload 非常实用。

• 示例：

new Vue({
  render (h) {
    throw new Error('oops')
  },
  renderError (h, err) {
    return h('pre', { style: { color: 'red' }}, err.stack)
  }
}).$mount('#app')

3.生命周期钩子

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

1）beforeCreate

• 类型：Function

• 详细：
  在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

2）created

• 类型：Function

• 详细：
  实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el
  属性目前不可见。

3）beforeMount

• 类型：Function

• 详细：
  在挂载开始之前被调用：相关的 render
  函数首次被调用。
  该钩子在服务器端渲染期间不被调用。

生命周期图示

=====================================================

实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。钩子的 this 指向调用它的 Vue 实例。

作者：ewbar7
链接：https://www.jianshu.com/p/0a9667ac36d6
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。