自己遇到的前端问题以及解答（持续更新）

日常经验总结

怎么做出搜索框的左移动画效果？

可以给它上面盖一层，达到想要的效果。

---

计算属性没有监听到数据变化？

可能原因：computed中的计算属性若是根据某个对象中的某个属性监听时，我们必须要以对象的形式进行整体修改，而不是单个修改，否则触发不了计算属性的监听。

这里附赠一幅图解释

  computed: {
    hasFilter() {
      let isActive = false
      for (const key in this.form) {
        if (key === 'createTime') {
          if (this.form[key] && this.form[key].length !== 0) {
            isActive = true
          }
        } else if ((key === 'applicationIndex' || key === 'processModelIndex') && this.form[key] === 0) {
          isActive = true
        }
      }
      if (this.form.applicationIds) {
        isActive = true
      }
      if (this.form.processModelIds) {
        isActive = true
      }
      if (this.keyWord) {
        isActive = true
      }
      return isActive
    }
  }

---

怎么用是否有省略号（也就是text-overflow:ellipsis）作为判断条件？

暂时只知道可以用scrollWidth与clientWidth进行比较判断。

---

使用el-table，如何在el-table-column中使用对象类型的数据？

使用<template slot-scope="scope"></template>，通过scope.row获取到el-table中的当前行数据对象，从而获取到对应的对象数据。

---

.sync修饰符

扩展为一个自动更新父组件属性的v-on监听器，相当于在子组件中通过$emit给把props传过来的数据传入新值。例如：

<template>
    <div class="details">
        <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
        <button @click="changeValue">toggle</button>
    </div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
      template: `<div v-if="show">
                    <p>默认初始值是{{show}}，所以是显示的</p>
                    <button @click.stop="closeDiv">关闭</button>
                 </div>`,
      props:['show'],
      methods: {
        closeDiv() {
          this.$emit('update:show', false); //触发 input 事件，并传入新值
        }
      }
})
export default{
    data(){
        return{
            valueChild:true,
        }
    },
    methods:{
        changeValue(){
            this.valueChild = !this.valueChild
        }
    }
}
</script>

---

路由传值并且跳转后，在当前路由界面刷新，获取的值全部消失？？？

解决办法：将传递的值包装成JSON对象，然后在目的路由解析即可解决问题。

---

在哪个生命周期内调用异步请求？

可以在钩子函数created、beforeMount、mounted中进行调用，因为在这三个钩子函数中，data已经创建，可以将服务端返回的数据进行赋值。但是推荐在created钩子函数中调用异步请求，以下几点优点：

• 能更快获取到服务器端数据，减少页面loading时间；

• ssr不支持beforeMount、mounted钩子函数，所以放在created中有助于一致性

---

父组件可以监听子组件的生命周期吗？

1、可以通过$emit方式在子组件中调用，达到父组件监听

2、可以通过@hook来监听，例如：

//Parent.vue
<Child @hook:mounted="doSomething"></Child>
​
doSomething() {
    console.log('做事')
}
//Child.vue
mounted() {
    console.log('触发mounted钩子函数')
}
//执行顺序：触发mounted钩子函数，做事
tips：@hook方法不仅仅可以监听mounted，其它的声明周期事件，例如created、updated都可以监听

---

为什么要解绑全局事件总线，解绑一般在当前当前组件的beforeDestroy中，使用$off解绑？