Vue 问答

---

1. v-if 和 v-show 的区别。

参考答案

• v-if 让元素 出现/不出现 在页面
  v-show 元素 一直 在页面中 添加style display:...
• 当v-if 为 true 的时候 元素 created
  当v-if 为 false 的时候 元素 destroy
  v-show 只改style 不去触发 生命周期的钩子

---

2. 依赖注入怎么使用

provide 选项应该是一个对象 或 返回一个对象的函数

 provide() {
            return {
                xxx: "yyy"
            };
        }

inject 选项 一个字符串数组 或 一个对象

 inject: ["xxx"],
 methods:{
    a(){
        this.xxx
    }
 }

---

3. mixins 怎么使用

示例组件

const xxx  = {
  name:"Loo",
  data(){ return {a:''}},
  mounted(){},
  methods:{
    foo(){}
  }
}
export default xxx

mixins 选项接受一个混入对象的数组

import XXX from "xxx";
new Vue({
  name:"Loo1",
  mounted() { console.log(2) },
  mixins: [XXX]
})

---

4. 自定义指令

export default {
  inserted: function (el) {
      el.focus()
  },
  bind:function(el,binding,vnode,oldVnode){
    console.log(el,binding.value)
  },
  componentUpdated(){},
  unbind(){}
}

组件接受一个 directives 的选项

import XXX from "xxx"
new Vue({
  name:"Loo",
  directives: {XXX},
  methods:{}
})

使用

<template>
   <div v-xxx>
   </div>
</template>

---

5. $attrs

当一个组件没有声明任何 prop, vm.$attrs会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件