vue面试题目}v-model,事件修饰符，v-show,v

10. 常见的事件修饰符及其作用

once:只会触发一次

.self只会触发自己范围内的时间，不包含子元素

.capture:与事件冒泡方向相反，事件捕获由外箱内

.prevent:等同于javascript当红的event.preventDefault，纺织预设的行为，如果事件可以取消，就取消事件，二不是停止事件的进一步传播

11. v-if、v-show、v-html 的原理

v-if调用addIfCondition方法生产vnode的时候会忽略对应的节点,redner的时候就不会渲染

v-show会生产vnode,render的时候也会渲染成为真是的节点，只是在render过程中会在节点的属性中修改show属性值，也就是常说的display；

●v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值

13. v-if和v-show的区别

v-if是动态乡dom树当中添加或者删除dom元素v-show是通过设置dom元素的display样式属性控制显示或者隐藏

编译过程：v-if切换由一个局部编译卸载的过程，切换过程当中何时的销毁和重建内部的时间监听和子组件，v-show姿势简单的基于css的切换

编译条件:v-if是惰性的，如果初始条件为家，则什么也不做只会在条件第一次的编程真的时候才开始局部编译，v-show在任何条件下，无论首次条件是否为真，都被编译，然后被缓存，而且dom元素被保留

性能消耗：v-if由更多的切换小号,v-show由更多的出书渲染消耗

使用场景：v-if适合运行条件不大可能改变的v-show适合频繁切花的

14. v-model 是如何实现的，语法糖实际是什么？

（1）作用在表单元素上

动态绑定了 input 的 value 指向了 messgae 变量，并且在触发 input 事件的时候去动态把 message设置为目标值：

<input v-model="sth" />
//  等同于
<input 
    v-bind:value="message" 
    v-on:input="message=$event.target.value"
>
//$event 指代当前触发的事件对象;
//$event.target 指代当前触发的事件对象的dom;
//$event.target.value 就是当前dom的value值;
//在@input方法中，value => sth;
//在:value中,sth => value;

（2）作用在组件上在自定义组件中，v-model 默认会利用名为 value 的 prop和名为 input 的事件本质是一个父子组件通信的语法糖，通过prop和$.emit实现。因此父组件 v-model 语法糖本质上可以修改为：

<child :value="message"  @input="function(e){message = e}"></child>

在组件的实现中，可以通过 v-model属性来配置子组件接收的prop名称，以及派发的事件名称。

例子：

// 父组件
<aa-input v-model="aa"></aa-input>
// 等价于
<aa-input v-bind:value="aa" v-on:input="aa=$event.target.value"></aa-input>

// 子组件：
<input v-bind:value="aa" v-on:input="onmessage"></aa-input>

props:{value:aa,}
methods:{
    onmessage(e){
        $emit('input',e.target.value)
    }
}

默认情况下，一个组件上的v-model 会把 value 用作 prop且把 input 用作 event。但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。js 监听input 输入框输入数据改变，用oninput，数据改变以后就会立刻出发这个事件。通过input事件把数据$emit 出去，在父组件接受。父组件设置v-model的值为input $emit过来的值。

一个组件上的v-model会把value用作prop,但是依稀输入类型比如单选框复选框按钮可能想要使用value prop来达到不同的目的，使用model选项可以回避这些情况，js监听input输入框的时候数据改变用onput数据改变以后就会立刻触发这个时间，

15. v-model 可以被用在自定义组件上吗？如果可以，如何使用？

可以。v-model 实际上是一个语法糖，如：

<input v-model="searchText">

实际上相当于：

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

用在自定义组件上也是同理：

<custom-input v-model="searchText">

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

显然，custom-input 与父组件的交互如下：1父组件将searchText变量传入custom-input 组件，使用的 prop 名为value；2custom-input 组件向父组件传出名为input的事件，父组件将接收到的值赋值给searchText；所以，custom-input 组件的实现应该类似于这样：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})