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

日常经验总结

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

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

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

可能原因：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解绑？

最后

以上就是欣慰河马为你收集整理的自己遇到的前端问题以及解答（持续更新）的全部内容，希望文章能够帮你解决自己遇到的前端问题以及解答（持续更新）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。