vue学习笔记整理(三)--常用选项

 

data: 类型-Object | Function

只有当实例被创建时 data 中存在的属性才是响应式(改动将会触发任何视图的更新)的

vue实例中的data选项是对象，则所有的实例将共享引用同一个数据对象。

组件中的data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

props: 类型-Array<string> | Object

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

// 简单语法
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

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

Vue.extent({...}):参数是对象。个人将其理解为：制造出组件的内容

<div id="mount-point"></div>

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

Vue.component(id,[definition]):

参数：

• {string} id
• {Function | Object} [definition]

注册或获取全局组件。注册还会自动使用给定的id设置组件的名称

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

 

Computed：只要依赖的数据没发生改变，我们就可以直接返回缓存里的数据，而不需要每次都重复执行数据操作。

Methods: 只要发生重新渲染，method 调用总会执行该函数。

 

使用Computed与methods是区别并不明显，但在一些比较复杂或是数据量比较大的，并存在一些依赖关系的时候，计算属性的优势就会突显出来，此时使用计算属性会大大提高我们的性能。