【vue】Vue中的选项

怼怼

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:类型检查 StringNumberBooleanArrayObjectDateFuctionSymbol,也支持自定义的构造函数,通过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时定制propevent
{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注释

仅在完整版中使用
阅读 813
37 声望
2 粉丝
0 条评论
37 声望
2 粉丝
文章目录
宣传栏