1. 请问 v-if 和 v-show 有什么区别?

      1. v-if 是动态添加，当值为false 时，是完全移除该元素，即dom 树中不存在该元素。 v-show 仅是隐藏/ 显示，值为false 时，该元素依旧存在于dom 树中。 若其原有样式设置了display: none 则会导致其无法正常显示。

    2. 你用哪个指令遍历对象的属性？例如：对象let obj = {name:’Liming’, gender: ‘man’, ‘age’:20, ‘height’:180},请写出简单代码。

      1. <div v-for="(value,key) in obj" :key="key">
      2. {{key}}---->{{value}}
      3. </div>

    3. Vue 对象中不存在某个属性，需要新增，使用什么语法？如何解决此新增属性响应问题？

    例：let obj = {name:’Liming’, gender: ‘man’} ,如何添加一个新的属性 age,并且使其可响应？

    1. //新增属性（不可响应）
    2. Vue.set (obj, ‘age’, 22) 
    3. //新增可响应属性
    4. vm.$set (object, ‘age’, 22)

    1. Vue中如何动态地在元素上切换 CSS 类或者样式？

      1. <div :class="{ divStyle : isShow }" :style="{height:height;width:width}></div>
      2. new Vue({
      3.  el: '#app',
      4.  data: {
      5.    isShow: true,
      6.    height: '300px',
      7.    width: '100%'
      8.  }
      9. });

    2. Vue中什么是过滤器？请编写一个样例

      1. filters:{
      2. statusFilter(status) {
      3.  const statusMap = {
      4.    success: 'success',
      5.    pending: 'danger'
      6.  }
      7.  return statusMap[status]
      8. }
      9. }

    3. 如何确保在单文件组件中定义的 CSS 样式仅应用于该组件，而不被用于其他组件？

      1. 这可以通过样式标签上的 scoped 属性来实现。在内部 Vue 使用 PostCSS 插件为所有样式元素分配唯一的数据属性，然后使样式针对这些唯一的元素。举个例子：
      2. <template>
      3. <div class=”title”>This is a title</div>
      4. </template>
      5. <style scoped>
      6. .title {
      7.  font-family: sans-serif;
      8.  font-size: 20px;
      9. }
      10. </style>

    4. 如何将数据从父组件传递到子组件？

      1. 可以用作为组件中单向入口的 prop 把数据向下传递到子组件。
      2. <template>
      3. <div>
      4. <contact-list-item v-for=”contact in contacts” :contact=”contact” />
      5. </div>
      6. </template>
      7. <script>
      8. import ContactListItem from ‘./ContactListItem’;
      9. export default {
      10.  name: ‘address-book’,
      11.  data: function() {
      12.    return {
      13.      contacts: [.....]
      14.    }
      15.  },
      16.  components: {
      17.    ContactListItem
      18.  }
      19. }
      20. </script>

    5. 子组件如何发传递信息或数据给父组件？

      1. 可以用 $emit('event-name', eventPayload)发出自定义事件。然后可以像其他事件一样，用 v-on 指令在父组件上拦截。

    6. 使用vuex存储数据，F5刷新浏览器，存储的数据是否还存在？还有什么方法可存储数据到浏览器？

      1. 答：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。使用localstorage或者sessionstorage

    7. 0.1+0.2 === 0.3吗？如果不等于如何让其相等 

      1. (n1 + n2).toFixed(2) // 注意，toFixed为四舍五入

    8. 如何持久化数据到浏览器？请举例2种及以上方法。

      1. sessionStorage、localStorage和cookie的区别
      2. 1）相同点是都是保存在浏览器端、且同源的
      3. 2）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
      4. 3）存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
      5. 4）数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
      6. 5）作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
      7. 6）web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
      8. 7）web Storage的api接口使用更方便