关于vue.js:vueVue中的选项

39次阅读

共计 5854 个字符，预计需要花费 15 分钟才能阅读完成。

Vue 中的选项

  1. 数据
  2. DOM
  3. 生命周期钩子
  4. 资源
  5. 组合
  6. 其余

1 数据

  1. data
  2. props
  3. propsData
  4. methods
  5. 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 创立的实例中应用

2 DOM

  1. el
  2. template
  3. render
  4. 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

3 资源

  1. directives
  2. filters
  3. 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:"九磅十五便士",}
        }
    }
}

4 组合

  1. parent
  2. mixins
  3. extends
  4. 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;},
  },
},

5 其余

  1. name
  2. delimiters
  3. functional
  4. model
  5. inheritAttrs
  6. 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.js
发表至： vue.js
2021-09-29
 0
关于vue.js:vue优化小技巧
关于vue.js:JS根据传入参数替换字符内指定位置的值
关于vue.js:基于Vue实现的侧边栏导航组件自动居中上下滑动切换菜单
关于vue.js:虚拟列表组件