Vue面试题

（1）通过 $emit 触发父组件的事件

// Parent.vue
<Child @mounted="doSomething"/>
 
<script>
 // Child.vue
 mounted() {
   this.$emit("mounted");
 }
</script>

（2）通过hook来监听

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

1. hash模式
   使用 URL hash 值来作路由。
2. history
   依赖 HTML5 History API
3. abstract
   支持所有 JavaScript 运行环境，如 Node.js 服务器端
   如果发现没有浏览器的 API，路由会自动强制进入这个模式
   

1. 实现一个监听器 Observer：
   对数据对象进行遍历，包括子属性对象的属性
   利用 Object.defineProperty() 对属性都加上 setter 和 getter
   这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化
2. 实现一个解析器 Compile：
   解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图
   并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者
   一旦数据有变动，收到通知，调用更新函数进行数据更新
3. 实现一个订阅者 Watcher：
   Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁
   主要的任务是订阅 Observer 中的属性值变化的消息
   当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。
4. 实现一个订阅器 Dep：
   订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher
   对监听器 Observer 和 订阅者 Watcher 进行统一管理。
   

props: {
  num: {
    default: 1,
    validator: function (value) {
      // 返回值为true则验证不通过，报错
      return [1, 2, 3, 4, 5].indexOf(value) !== -1
    }
  }
}

比如平时created时要请求一次数据，并且当搜索值改变，也要请求数据，我们会这么写

created(){
  this.getList()
},
watch: {
  searchInputValue(){
    this.getList()
  }
}

使用immediate完全可以这么写，当它为true时，会初始执行一次

watch: {
  searchInputValue:{
    handler: 'getList',
    immediate: true
  }
}

new Vue({
    el: "#app",
    data() {
        return {
            params: {
                name: '杜恒',
                age: 18
            }
        }
    },
    computed: {
        total() {
            // 通过返回一个高阶函数
            return (arg) => {
                return arg * 10
            }
        }
    }
})

我们常用的使用定时器的方式

export default{
  data(){
    timer:null  
  },
  mounted(){
    this.timer = setInterval(()=>{
      console.log('1');
    },1000);
  }
  beforeDestory(){
    clearInterval(this.timer);
  }
}

上面做法不好的地方在于：全局多定义一个timer变量，使用hook这么做：

export default{
  methods:{
    fn(){
      const timer = setInterval(()=>{
        console.log('1');
      },1000);
      this.$once('hook:beforeDestroy',()=>{
        clearInterval(timer);
      })
    }
  }
}

如以下的情况，el的优先级会大于$mount

new Vue({
  router,
  store,
  el: '#app',
  render: h => h(App)
}).$mount('#root')

<template>
    <aButton @[someEvent]="handleSomeEvent()" :[someProps]="1000" />...
</template>
<script>
  ...
  data(){
    return{
      ...
      someEvent: someCondition ? "click" : "dbclick",
      someProps: someCondition ? "num" : "price"
    }
  },
  methods: {
    handleSomeEvent(){
      // handle some event
    }
  }  
</script>

经常遇到的情况是，多个路由解析为同一个Vue组件。问题是，Vue出于性能原因，默认情况下共享组件将不会重新渲染，如果尝试在使用相同组件的路由之间进行切换，则不会发生任何变化

const routes = [
  {
    path: "/a",
    component: MyComponent
  },
  {
    path: "/b",
    component: MyComponent
  },
];

如果想要重新渲染，就需要使用key

<template>
    <router-view :key="$route.path"></router-view>
</template>