vue2 面试总结

v-html

• 会有 XSS 风险
• 会覆盖子组件

computed 和 watch

• computed 有缓存，data 不变则不会重新计算        
  • 当 computed 考虑修改时，必须用完整形式写
  • 当 computed 不考虑修改时，可以用简写形式
  • computed适用一个数据被多个数据影响，eg：购物车
  • 合理使用 computed 可提高性能
• watch 深度监听
  • watch 不考虑deep、immediate 时可用简写形式
  • watch 引用类型的监听，拿不到 oldvalue 值
  • watch适用于一个数据影响多个数据，eg：搜索

 事件修饰符

• .prevent：阻止默认事件（常用）；
• .stop：阻止事件冒泡（常用）；
• .once：事件只触发一次（常用）；
• .capture：使用事件的捕获模式；
• .self：只有event.target是当前操作的元素时才触发事件；
• .passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

按键修饰符

 表单

v-model的三个修饰符

• lazy：失去焦点再收集数据
• number：输入字符串转为有效的数字
• trim：输入首尾空格过滤

组件使用 v-model

Vue2：组件使用 v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，子组件可简写，该方式不用写 model 模块，vue会默认把 input 标签上边的 input 事件和 value 属性配置成 model 模块的内容，例如：

父组件：

<template>
  <div>
    <h1>{
   { name }}</h1>
    <!--此处的 “name” 名称可随意变化（对应 data 中名称）-->
    <HelloWorld v-model="name"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components:{HelloWorld},
  data() {
    return {
      name:'李博',
    }
  },

}
</script>

子组件：

<template>
  <div class="hello">
    <!-- emit事件中 input 名称不可变 -->
    <!-- “:value”中，value名称不可变 -->
    <!-- 因为是 v-model 默认使用名为 value 的 prop 和名为 input 的事件 -->
    <input type="text"
      @input="$emit('input', $event.target.value)"
      :value='value'
    >
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    value:{
      type:String
    },
  },
}
</script>

 Vue2：组件使用自定义 v-model

像单选框、复选框等类型的输入控件，则必须使用自定义 v-model

父组件：

<template>
  <div>
    <h1>{
   { boolean }}</h1>
    <!--此处的 “boolean” 名称可随意变化（对应 data 中名称）-->
    <HelloWorld v-model="boolean"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components:{HelloWorld},
  data() {
    return {
      boolean:false
    }
  },
}
</script>

子组件：

<template>
  <div class="hello">
    <!-- 此处“is11”对应 model 中 prop 的 is11 -->
    <input type="checkbox" 
    :checked="is11"