【vue】Vue中的选项

头像
怼怼
    阅读 7 分钟

    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.jsapi属性
    怼怼
    73 声望6 粉丝
    « 上一篇
    【vue】Vue上的API
    下一篇 »
    【vue】Vue实例上的属性

    引用和评论

    推荐阅读
    头像
    【Vue2源码分析与实现】（一）变化侦测

    怼怼赞 1阅读 926

    头像
    开发插件集合

    寒青赞 12阅读 3k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.1k

    头像
    Vue 项目推荐使用这个图标库 vue-icons-plus

    破晓L赞 4阅读 1.9k评论 3

    头像
    Vue使用mixins

    一念赞 4阅读 2.6k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 380评论 1

    头像
    web每日一题（不断更新中）

    夕水赞 2阅读 1.1k

    0 条评论
    得票最新