1. 使用第三方组件库如何更改样式？

在vue开发中，经常运用element-ui、vant等组件库，但是很多时候产品需要我们更改样式，这时我们可以写一个专门的样式文件-全局引用。还有一种方法就是一层层地找UI库的样式层级（十分麻烦）。
在开发中遇到一个需求，后端返给我一段html代码，我去展示（移动端）。在html代码中有图片，尺寸很大，会导致移动端横屏滚动，这时可以使用>>>或者/deep/，即vue的深度作用选择器来设置。
‘>>>’只对css起作用，想对less或者sass生效需要用/deep/

<style scoped>
<!--viewpoint是本页面最外层的class名-->
    .viewpoint >>> img{ 
        width:90%;
    }
</style>

<style lang='less' scoped>
.viewpoint{
    /deep/ img{
       width:90%; 
    }
}
</style>

2. class和style如何动态绑定？

class可以通过对象语法和数组语法进行绑定

• 对象语法：

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> 

data: { 
    isActive: true, 
    hasError: false 
}

• 数组语法：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> 

data: { 
    activeClass: 'active',
    errorClass: 'text-danger'
}

style也可以通过对象语法和数组语法进行绑定

• 对象语法：

<div v-bind:style="{ color: activeColor, fontSize: size + 'px' }"></div> 

data: { 
    activeColor: 'red', 
    size: 30 
}

• 数组语法：

<div v-bind:class="[styleColor,styleSize]"></div> 

data: { 
    styleColor: {
        color: 'red'
    },
    styleSize: {
        font-size: '30px'
    }
}

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

比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现：

// Parent.vue 
<Child @mounted="doSomething"/> 

// Child.vue 
mounted() { 
    this.$emit("mounted"); 
}

以上需要手动通过 $emit 触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示：

// Parent.vue 
<Child @hook:mounted="doSomething"/> 
doSomething() { 
    console.log('父组件监听到 mounted 钩子函数 ...'); 
}

// Child.vue 
mounted() { 
    console.log('子组件触发 mounted 钩子函数 ...');
}

// 以上输出顺序为： 
// 子组件触发 mounted 钩子函数 ... 
// 父组件监听到 mounted 钩子函数 ...

当然 @hook 方法不仅仅是可以监听 mounted，其它的生命周期事件，例如：created，updated 等都可以监听

4. 解决vuex刷新数据丢失的方法

??产生原因：因为store里的数据是保存在运行内存中的，所以刷新页面会重新加载vue实例，vuex中的数据会被重新赋值。
??解决办法：选择合适的客户端存储（sessionStorage），首次加载内容为空，local storage会保留上次的值需要清空。
??在app.vue 的created中监听beforeunload（页面刷新事件），首先在加载时，读取sessionStorage里的状态信息。此时用vuex.store的replaceState方法，替换store的根状态。触发时将状态管理中的state存储到本地sessionStorage

 export default{
    name: 'App',
    created () {
     //在页面加载时读取sessionStorage里的状态信息
       if(sessionStorage.getItem("store") ) {
          this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    }

     //在页面刷新时将vuex里的信息保存到sessionStorage里
      window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state)
    })
  }
}