Vue初级知识汇总

2020-07-25

字数统计: 1.9k字 | 阅读时长: 7分

Vue 初级知识汇总

Vue2.0 兼容 IE 哪个版本以上吗

不支持ie8及以下，部分兼容ie9 ，完全兼容10以上，因为vue的响应式原理是基于es5的Object.defineProperty(),而这个方法不支持ie8及以下。

vue 的生命周期是什么

beforeCreate:实例创建前被调用
created :实例创建后被调用,完成数据观测,属性和方法的运算,watch/event 实际回调,模板渲染成 html(vm.$el 未定义),数据初始化最好在这个阶段完成
beforeMount : 在$el挂载前被调用，相关的 render 函数首次被调用，期间将模块渲染成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内置组件包裹路由组件,在钩子函数 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())。

内容来源:掘金作者红尘炼心