Vue初级知识汇总

vue 的生命周期是什么

• beforeCreate: 实例创建前被调用
• created: 实例创建后被调用,完成数据观测,属性和方法的运算,watch/event 实际回调,模板渲染成 html(vm.$el 未定义),数据初始化最好在这个阶段完成
• mounted : 在$el挂载后被调用，此时vm.$el 可以调用，不能保证所有的子组件都挂载，要等视图全部更新完毕用 vm.$nextTick()
• beforeUpdate: 数据更新时调用
• updated : 数据更新后调用
• activated : <keep-alive></keep-alive>包裹的组件激活时调用
• deactivated : <keep-alive></keep-alive>包裹的组件离开时调用
• beforeDestroy : 实例销毁之前调用,此时实例仍然完全可用；
• destroyed : 实例销毁之后调用,此时实例的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

computed 中的属性名和 data 中的属性名可以相同么

不能同名，因为不管是computed属性名还是data数据名还是props数据名都会被挂载在vm实例上，因此这三个都不能同名

怎么缓存当前打开的路由组件，缓存后想更新当前组件怎么办呢

用<keep-alive></keep-alive>内置组件包裹路由组件,在钩子函数activated中更新

跟 keep-alive 有关的生命周期是哪些

• activated钩子：keep-alive 组件激活时调用
• deactivated钩子：keep-alive 组件停用时调用
• 以上钩子服务器端渲染期间不被调用

watch 的属性使用箭头函数定义可以吗

不可以。this会是undefind,因为箭头函数中的this指向的是定义时的this，而不是执行时的this，所以不会指向Vue实例的上下文

watch:{
    show:(val)=>{
        console.log(this)//undefind this会指向show
    },
    id(val){
        conosle.log(this)//Vue实例对象
    }
}

怎么在watch监听开始之后立即被调用

在选项参数中指定immediate: true将立即以表达式的当前值触发回调

watch:{
   a:{
       handler:function(val,oldval){

       },
      immediate: true
   }
}

watch 怎么深度监听对象变化

在选项参数中指定 deep:true

watch:{
   a:{
       handler:function(val,oldval){

       },
      deep:true
   }
}

怎么强制刷新组件

<template>
  <div>
    <demo :key="count"></demo> // 绑定key值
    <button @click="handleRefresh">刷新demo组件</button>
  </div>
</template>
<script>
import demo from "./test.vue";
export default {
  name: "refreshDemo",
  data() {
    return {
      count: 0 
    };
  },
  methods: {
    handleRefresh() {
      this.count += 1 // 更改key值，从而达到刷新组件的效果 当key改变时就是释放原始组件，重新加载新的组件
    }
  }
};
</script>

父组件中的自定义事件怎么接收子组件的多个参数

this.$emit('eventName',data),data可以是个对象，包含子组件的多个参数，然后传给父组件

给组件绑定自定义事件无效怎么解决

加上修饰词.native 否则无法触发事件

<template>
  <div>
    <Main @click.native="shuchu" />
  </div>
</template>
<script>
import Main from "./components/main";
export default {
  components: {
    Main
  },
  data() {
    return {
    };
  },
  methods: {
    shuchu() {
      console.log("1");
    },
  },

};
</script>

怎么访问子组件的实例或者子元素

<template>
  <div>
  <buttom @click="shuchu" ></buttom>
    <Main ref ="main"/>
  </div>
</template>
<script>
import Main from "./components/main";
export default {
  components: {
    Main
  },
  data() {
    return {
    };
  },
  methods: {
    shuchu() {
    //通过使用this.$refs.main.方法名可以调用子组件内methods内的方法
    this.$refs.main.方法名
    //获取子组件data数据
    this.$refs.main.$data

    },
  },

};
</script>

<ul ref="mydiv">
  <li class="item">第一个li</li>
  <li class="item">第二个li</li>
</ul>
console.log(this.$refs['mydiv']
.getElementsByClassName('item')[0].innerHTML)//第一个

怎么在子组件中访问父组件的实例

在子组件中使用this.$parent来访问

怎么在组件中访问到根实例

在子组件中使用this.$root来访问

组件会在什么时候下被销毁

• 没有使用 keep-alive 时的路由切换
• v-if=’false’
• 执行 vm.$destroy()

Vue 组件之间的通信都有哪些

• props
• this.$emit(‘input’,data)
• this.$root.$on(‘input’,function(data){})和 this.$root.$emit(‘emit’,data)
• this.$refs.tree(tree 为 ref 绑定值)
• 自定义事件总线
• Vuex

prop 验证的 type 类型有哪几种 ,可以设置默认值吗

String、Number、Boolean、Array、Object、Date、Function、Symbol， 此外还可以是一个自定义的构造函数 Personnel，并且通过 instanceof 来验证 propwokrer 的值是否是通过这个自定义的构造函数创建的

function Personnel(name, age) {
  this.name = name;
  this.age = age;
}
export default {
  props: {
    wokrer: Personnel,
    propA: [String, Number],
    propB: {
      type: Number,
      default: 1,
    },
    propC: Boolean,
    propD: {
      type: Object,
      default() {
        return {};
      },
    },
  },
}

在 Vue 事件中是如何使用 event 对象的

• @click="handleOpen" 默认第一个参数传入 event 对象
• @click="handleOpen(0, $event)",如果自己需要传入参数和 event 对象，则需要使用$event 来获取 event 对象并传入 handleOpen

在 Vue 事件中传入$event，使用$event.target 和$event.currentTarget 有什么区别

$event.currentTarget始终指向事件所绑定的元素，而$event.target指向事件发生时的元素

表单修饰符和事件修饰符

• .stop：阻止事件传递

• .prevent： 阻止默认事件；

• .capture ：在捕获的过程监听，没有 capture 修饰符时都是默认冒泡过程 监听；

• .self：当前绑定事件的元素才能触发；

• .once：事件只会触发一次；

• .passive：默认事件会立即触发，不要把.passive 和.prevent 一起使用，因为.prevent 将不起作用。

• 表单修饰符.number .lazy .trim

使用事件修饰符要注意

要注意顺序很重要，用@click.prevent.self会阻止所有的点击，而@click.self.prevent只会阻止对元素自身的点击

Vue 如何监听键盘事件

使用按键修饰符 <input @keyup.enter="submit">按下回车键时候触发 submit 事件

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

v-show 和 v-if 有什么区别？使用场景分别是什么

• v-show，切换元素的 display 属性,来控制元素显示隐藏，初始化会渲染，适用频繁显示隐藏的元素,不能用在<template>上
• v-if，通过销毁并重建组件，来控制组件显示隐藏，初始化不会渲染，不适用频繁显示隐藏的组件，可以用在<template>上

vm.$nextTick 有什么作用

vm.$nextTick(() =>{this.handleadd()}),将 handleadd 回调延迟到下次 DOM 更新循环之后执行

Vue 中怎么重置 data

Object.assign(this.$data,this.$options.data())