vue api强化学习之-------vue选项（除去声明周期函数）

vue选项—数据

data

Vue 实例的数据对象,我理解相当于react组件背部的state对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化； 建议在创建实例之前，就声明全部根级响应式属性,实例创建之后，vue实例也代理了data对象上所有的属性，vm.$data.xx与vm.xx相同{以}_{和}$开头的自定义属性，vue为了防止跟自身的属性冲突，不会被代理，只能通过vm.$data.xx

props

用于接收来自父组件的数据,可以是对象或数组，对象时，可以配置高级选项，如类型检测、自定义验证和设置默认值； 基于对象，可以使用的选项有个type:此字段表明接受的类型;default:此字段给定默认值;require:此字段定义prop是否为必须的;validator：此字段定义校验prop的校验函数。

propsData

只用于 new 创建的实例中,创建实例时传递 props。主要作用是方便测试。

computed

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 若为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过可以把vue实例当做参数传递到此箭头函数中； 计算属性的结果会被缓存，其依赖的响应式属性变化时，才会重新计算；默认计算属性只读，也可以通过get/set方法设置读写性；

methods

在此定义的方法被混入到vue实例中，可以通过vm实例访问这些方法，方法中的this自动绑定为vue实例，因此，不能使用箭头函数定义此类方法，因为箭头函数绑定了父级作用域的上下文，this不会指向vue实例；

watch

一个对象，key为需要监听的表达式，val为一个回调函数，Vue实例在实例化后遍历watch中的每一属性，调用vm.$watch监听每一个属性。在此监听器中，可进行异步操作

示例代码

<template> <div class="options"> <!-- 着重演示计算属性 附带data,methods--> <div> <span>a:</span><span>{{a}}</span><br/> <span>计算属性，假如此处通过a进行了复杂的运算</span><span>{{double}}</span> <div> <p><span>b为:{{b}}</span></p> <button @click="method1">重置b</button> <p><span>重置后的b:{{compute_b}}</span></p> </div> </div> <!-- 着重演示watch --> <div> <input type="text" name="" id="" v-model="str"> </div> </div> </template> <script> export default { name: 'VueOptions', data(){ // 根级响应式属性，全部在此处声明 return { a:20, b:"caocao", str:"", } }, // 此处定义的计算属性 混入了vue实例中，vue实例进行了代理 computed:{ // 此处只能读取 double:function(newval,oldval){ return this.a*2; }, compute_b:{ // 读取 get:function(){ return this.b + "______is a hero" }, // 设置 set:function(pra){ this.b =pra } } }, // 此处声明的方法，也混入了vue实例中，vue实例也进行了代理 methods:{ // 通过计算属性重置 method1(){ this.compute_b = "liubei" }, }, watch:{ /* 函数形式监听*/ // str:function(newval,oldval){ // console.log(newval,oldval,".....................监听器监听。。。") // } /* 对象形式监听，还可配置监听参数*/ str:{ handler:function(newval,oldval){ console.log(newval,oldval,".....................监听器监听。。。") }, deep:true,// 深度监听 若监听对象时嵌套对象时，其任何 属性改变时，都会被调用 }, } } </script>

vue选项—DOM

el

只在由new创建的vue实例中才使用。提供一个页面上已经存在的dom元素，用来挂载挂载创建的vue实例； 如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译

template

内容通常为字符串模板 ，作为一个vue实例的标识； 模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽； 如果 Vue 选项中包含渲染函数，该模板将被忽略

render

类型：(createElement: () => VNode) => VNode 字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode 如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息

renderError

类型：(createElement: () => VNode, error: Error) => VNode 只在开发者环境下工作。当 render 函数遭遇错误时，提供另外一种渲染输出。其错误将会作为第二个参数传递到 renderError。这个功能配合 hot-reload 非常实用

vue选项—资源

directives

组件内，可通过此选项定义指令;如下示例 也可通过Vue.directives定义全局指令，详见vue全局api中的directives

/*组件内部可通过directives选项定义组件内部可使用的指令，下面定义了v-color指令*/ directives:{ color:function(el,binding){ el.style.color = binding.value } }, components

在组件内部的选项中，注册外部引入的组件，注册之后，外部组件才能在此组件中使用； 定义全局组件，详细看vue全局api中的component

<template> <div class="login base"> /*注册过后的组件，才能在此处正常使用*/ <index /> </div> </template> import index from './index.vue' export default { name: 'login', // 此处注册引入的外部组件 components:{ index }, } filters

过滤器，常用于对某些数据的格式化，比如数字用逗号分开，翻译管理部门等等，在vue中通常用在两个地方：双花括号插值和 v-bind 表达式 双花括号中这样使用： {{ message | capitalize }} ，capitalize为定义的过滤器名； v-bind表达式中这样使用：

，formatId 为定义的过滤器名 过滤器可以在组件内定义，也可以全局定义,全局过滤器详细看vue全局api中的filters

/*在组件内部，通过filters选项，定义局部的过滤器，下面为一个格式化字符串的过滤器（字符串转首字母大写）*/ filters: { // 首字母大写 capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } },

vue选项—组合

mixins

mixins 选项接受一个混入对象的数组； 这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。> 假如你混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。 Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用 通常会把vue实例一些可复用的功能方法，放置到mixins中； 也可以创建全局混入，详见vue全局api中的mixin

//自定义混入对象，包含了一个钩子函数 var mixin = { created: function () { console.log(1) } } // 创建的vue实例本身就有此钩子函数，当再混入同样的钩子函数时，两个函数都将被执行，并且被混入的函数先被执行 var vm = new Vue({ created: function () { console.log(2) }, mixins: [mixin] }) // => 1 // => 2 extends

类型为函数或者对象 组件内部，扩展一个组件，若要全局扩展一个组件，则需要使用vue全局api中的extend方法 extends用法和mixins很相似,只不过接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件

parent

此选项指定已创建实例的父实例，子实例可通过this.$parent访问父实例，父实例的this.$children也包含了此子实例，

provid/inject

provide：Object | () => Object inject：Array | { [key: string]: string | Symbol | O provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效

vue选项—其他

name

组件名称

delimiters

类型：Array 默认值：["{{", “}}”] 限制：这个选项只在完整构建版本中的浏览器内编译时可用。 改变纯文本插入分隔符

functional

使组件无状态 (没有 data ) 和无实例 (没有 this 上下文)。他们用一个简单的 render 函数返回虚拟节点使他们更容易渲染

model

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

inheritAttrs

默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。 注意：这个选项不影响 class 和 style 绑定

comments

类型：boolean 默认值：false 限制：这个选项只在完整构建版本中的浏览器内编译时可用。 当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们