Vue中的选项

生命周期钩子

props
propsData
methods
watch

1.1 data

Vue实例的数据对象

在初始化时，Vue会递归地把data的property转换为getter/setter，能够响应数据变化，以_和$开头的property不会被处理

组件中的data必须返回一个初始数据对象的函数，如果是一个对象，组件创建的多个实例会共享引用这个数据对象。

1.2 computed

计算属性对象
函数形式的属性：仅读取
对象形式的属性：通过set/get函数读取和设置

  data() {
    return {
      a: 1,
    };
  },
  computed: {
    fnA() {
      return this.a * 2;
    },
    oA: {
      get() {
        return this.a + 1;
      },
      set(newVal) {
        this.a = newVal * 2;
      },
    },
  },
  mounted() {
    console.log(this.fnA); //2
    console.log(this.oA); //2
    console.log(this.a); //1

    this.oA = 2;
    console.log(this.oA); //5
    console.log(this.a); //4
    console.log(this.fnA); //8
  },

1.3 methods

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

1.4 watch

设置数据侦测的对象

函数与字符串形式

 data() {
  return {
    a: 1,
    b: { c: "bar" },
  };
},
watch: {
  a: "show",
  b: "show",
},
methods: {
  show(val, oldVal) {
    console.log(val, oldVal);
  },
},
mounted() {
  this.a = 2; //2 1
  this.b.c = 2;
},

函数形式就是把字符串替换为函数，不能深度侦测

data() {
  return {
    a: 1,
    b: { c: "bar" },
  };
},
watch: {
  a: {
    handler: "show",
    immediate: true,
  },
  b: {
    handler: "show",
    deep: true,
  },
},
methods: {
  show(val, oldVal) {
    console.log(val, oldVal);
  },
},
mounted() {
  this.b.c = 2;
},
// 1 undefined
//observer observer

handler后跟回调函数，immediate为true会立即执行，deep为true可以深度侦测

数组里可以使用字符串、函数、对象形式，组合起来使用，它们会依次调用，可以设置多个handler

1.5 props

接收父组件的数据，数组或对象

数组为简单形式

//父组件
<template>
<div>
  <Child :name="{ obj, c }" />
</div>
</template>

<script>
import Child from "./components/Child.vue";
export default {
name: "App",
data() {
  return {
    obj: {
      a: 1,
      b: 2,
    },
    c: 3,
  };
},
components: {
  Child,
},
};
</script>
//子组件
<template>
<div>{{ name }}</div>
</template>

<script>
export default {
props: ["name"],
};
</script>

父组件传递数据后，子组件用数组接收即可使用

对象形式可以对接收的数据进行配置

//父组件
<Child :prop1="obj" :prop2="c" :prop3="d"/>
//子组件
<template>
<div>
  <span>{{ prop1 }}</span>
  <span>{{ prop2 }}</span>
  <span>{{ prop3 }}</span>
</div>
</template>

<script>
export default {
props: {
  prop1: [Object, Array],
  prop2: Number,
  prop3: {
    type: Number,
    default: 0,
    required: false,
    validator(value) {
      return value >= 0;
    },
  },
},
};
</script>

对象形式的props内的每个属性可以进行检测，单独一个值或数组中可以添加类型检测

- type：类型检查 String，Number，Boolean，Array，Object，Date，Fuction，Symbol，也支持自定义的构造函数，通过instanceof检查
- default：未接收到数据的默认值
- required：布尔值，该prop是否必须接收到
- validator：判断函数，将该prop作为参数传入，进行检查
当不满足条件时会报出警告

1.6 propsData

仅在new创建的实例中使用

template
render
renderError

2.1 el

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

2.2 template

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

如果以#开始，将被用作选择符，并使用匹配的innerHTML作为模板

选项中包含渲染函数时，该模板将被忽略

2.3 render

渲染函数，字符串模板的替换方案
接收一个createElement方法作为第一参数用来创建VNode
如果组件是一个函数组件，渲染函数还会接收一个额外的context参数，为没有实例的函数组件提供上下文信息。

选项中存在render函数时，Vue构造函数不会从template选项或通过el选项指定的挂载元素中提取HTML模板编译渲染函数

render(createElement){
    return createElement(
        'App',
        {
            style:{
                color:"red",
            },
        },
        [
            'text',
            createElement('h1','头条')
        ]
    )
}

createElemnt可以接收三个参数，第一个必选，后两两个可选

参数1：{String | Object | Function}
可以是一个HTML标签名，组件选项对象，或者resolve了上述任何一种的一个async函数
参数2：{Objcet}
一个模板中attribute对应的数据对象
参数3：{Stirng | Array}
子级虚拟节点，由createElement()构建，也可以使用字符串来生成文本虚拟节点

2.4 renderError

renderError(h,err)
只在开发者环境下工作，当render函数遭遇错误时，提供另一种渲染输出。
错误会作为第二个参数传递到renderError

directives
filters
components

3.1 directives

包含Vue实例可用指令的哈希表
Vue.directive

//局部注册
directives:{
    focus:{
        inserted(el,binding){
            el.focus();
            el.value = binding.value
        }
    }
}

3.2 filters

包含Vue实例可用过滤器的哈希表
Vue.filter

//局部注册
filters:{
    upperCase(value){
        return value.toUpperCase()
    }
}

3.3 components

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

//局部注册
import Child1 from './components/Child1.vue'
components:{
    Child1,
    Child2:{
        template:"<h1>衬衫的价格是{{price}}</h1>",
        data(){
            return {
                price:"九磅十五便士",
            }
        }
    }
}

parent
mixins
extends
provide/inject

4.1 parent

指定已创建实例的父实例，建立父子关系
子实例可以用this.$parent访问父实例，
子实例被推入父实例的$children数组中

let vm1 = new Vue({
    el: "#root1",
    data() {
        return {
            num: 1,
        }
    },
    async mounted() {
        await this.$nextTick()
        console.log('vm1', this.$children[0].num)
    },
})
let vm2 = new Vue({
    el: "#root2",
    data() {
        return {
            num: 2
        }
    },
    parent: vm1,
    mounted() {
        console.log('vm2', this.$parent.num)
    },
})
// vm2 1
// vm1 2

使用CLI时，局部注册的组件可以直接使用this.$parent与$children

4.2 mixins

接收一个混入对象的数组
Vue.mixin

//mixins.js
export const mixin1 = {
    created() {
        console.log(this._uid, "created")
    },
}
export const mixin2 = {
    mounted() {
        console.log(this._uid, "mounted")
    },
}
//main.js 全局注册
import { mixin1 } from './mixins'
Vue.mixin(mixin1)
//子组件 局部注册
import { mixin2 } from "../mixins";
export default {
  mixins: [mixin2],
};
// 0 'created'
// 1 'created'
// 2 'created'
// 2 'mounted'

mixin的钩子按照传入顺序以此调用，在调用组件自身钩子之前被调用
可以做选项合并，可复用的指令、组件、方法等可以合并到组件的选项中

4.3 extends

扩展组件，可以是选项对象或构造函数
与mixin类似，mixin相当于多继承，extends为单继承

//extends.js
export const extend = {
    data() {
        return {
            a: "extend"
        }
    },
}
//组件
import { extend } from "../extends";
export default {
  extends: extend,
  data() {
    return {
      b: "my",
    };
  },
  mounted() {
    console.log(this.$data);
  },
};
//{a:'extentd',b:'my'}

4.4 provide/inject

祖组件向子孙后代注入一个依赖
provide: 对象/函数返回对象
inject：字符串数组/对象
注入的数据是非响应式的，可以传入可监听的对象可响应

注入一个对象

//祖组件
provide: {
  bar: "foo",
},
//子孙组件
 inject: ["bar"],//数组接收

注入函数，返回一个对象
```
//祖组件
provide(){
  return {
    bar:'foo'
  }
}
//子孙组件
inject: {
  grand: {
    default: "接收失败",
    from: "bar",
  },
},
```
接收不同名的key时，需要设置from，default可以是一个函数访问本组件的数据
同名的key，default的值与key相同即可

data与props可以将注入的值作为数据入口

inject: ["bar", "baz"],
data() {
  return {
    a: this.bar,
  };
},
props: {
  b: {
    default() {
      return this.baz;
    },
  },
},

delimiters
functional
model
inheritAttrs
comments

5.1 name

组件名
语义化，便于调试

5.2 delimiters

自定义文本插入分隔符
默认：["{{","}}"]

与Vue.compile一样，只在完整版生效

5.3 functional

是否是函数式组件

无管理任何状态，无箭筒任何传递给它的状态，无生命周期方法，只接收一些prop的函数
这意味着它无状态，没有响应式数据，没有实例(没有this上下文)

函数式组件可以添加render函数选项，render的第二个参数context可以为组件提供上下文
context包括的字段见官网
函数式组件

5.4 model

自定义组件在使用v-model时定制prop和event
{prop:string,event:string}
默认的v-model:{prop:"value",event:"input"}

//自定义组件
Vue.component('my-input', {
    model: {
        prop: 'uname',
        event: 'change'
    },
    props: {
        uname: {
            type: String,
            default: 'Tom'
        },
        value:String
    },
    template: '<input type="text" :value="uname" @input="updateVal($event.target.value)">',
    methods: {
        updateVal(val) {
            this.$emit('change', val)
        }
    },
})
//跟实例
new Vue({
    data() {
        return {
            uname: "张三"
        }
    },
}).$mount("#root1")
//html
<div id="root1">
    <my-checkbox v-model="uname" value="李四"></my-checkbox>
</div>

子组件通过props接收v-model的值并传递给model选项中的prop
当数据改变时会触发事件change，传递一个值
父组件的v-model就接收到了传出的值，实现双向传递

v-model => props => model => :value @input => $emit => v-model

5.4 inheritAttrs

布尔值默认为true
默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上

5.5 comments

布尔值默认为false
是否保留且渲染模板中的HTML注释

仅在完整版中使用

【vue】Vue中的选项

Vue中的选项

1.1 data

1.2 computed

1.3 methods

1.4 watch

1.5 props

1.6 propsData

2.1 el

2.2 template

2.3 render

2.4 renderError

3.1 directives

3.2 filters

3.3 components

4.1 parent

4.2 mixins

4.3 extends

4.4 provide/inject

5.1 name

5.2 delimiters

5.3 functional

5.4 model

5.4 inheritAttrs

5.5 comments

Recommend

iPhone 13 ‘unlock with Apple Watch’ bug fixed in iOS beta

贝莱德SEC文件显示公司通过比特币期货获得36.9万美元收益

在线GIF图片帧拆分工具

百度联手清华大学出版社打造国内首套产教融合人工智能系列教材

Keyhole Software Announces Hire of Two Business Development Managers

随笔档案

萨尔瓦多总统称，三分之一的萨尔瓦多人正在“积极”使用Chivo钱包

Coinbase将允许美国用户直接以加密货币形式存入工资

Hysteresis effect on threadpool hill-climbing · Issue #51935 · dotnet/runtime ·...

字节跳动研发云固件，全球首次实现服务器 LinuxBoot 产品化

About Joyk