前端面试积累Day sevenVue插槽请简述、Watch监听器、计算属性与watch监听的区别。 “成功只比未成功多坚

Vue插槽请简述

引用：www.cnblogs.com/sherryweb/p…
Vue中为了实现模板的复用，可以使用插槽(Slot)。插槽有三种类型：匿名插槽、具名插槽、作用域插槽。

匿名插槽（默认插槽）
当组件中只需要插入一个html标签的时候，使用匿名插槽就可以了。
在子组件中使用 <slot></slot> 在父组件中直接使用<child></child>这个标签中的所有内容都会替换插槽slot部分的代码。
具名插槽
就是我们在组件中定义了多个slot，为了分清楚父组件的内容哪一个作用于哪一个solt上面，需要给插槽取一个名字来区分。
在子组件中使用<slot name="hello"></slot> 在父组件中使用<child> <div slot="hello"></div> </child>
```
另外在vue2.6+以上有一个新的插槽的写法，要使用到template标签。其中具名插槽的绑定写法也变成了v-slot:hello。
···
<child>
    <template v-slot:hello>
    </template>
</child>
···
```

作用域插槽
作用域插槽就是通过在子组件插槽<slot></slot>中绑定一些属性来把数据传递给父组件。从而父组件可以访问子组件插槽中的数据。

1. 直接使用子组件名的插槽
<child>
    <div slot-scope="params">{{params.id}}</div>
</child>
2. 使用template
<child>
    <template scope="params">{{params.id}}</template>
</child>

Watch监听器

Watch监听器的作用是监控一个值的变化。

1. 第一种情况，watch监听的是基本数据类型
    watch:{
        name(newValue, oldValue){
            console.log('name', newValue, oldValue);
        }
    }
    当name这个基本数据类型的值发生变化时，就会调用执行watch监听器中对应的代码。
    
2. 第二种情况，watch监听的是引用数据类型（对象）
    此时如果还是按照第一种情况的代码处理时，当被监听的对象的值发生变化时也不会触发监听事件。需要使用deep属性来进行深度监听。
    watch:{
        info:{
            handler: function(newValue, oldValue){
                console.log('info', newValue, oldValue);
            },
            deep: true
        }
    }

计算属性与watch监听的区别

Computed：具有缓存功能，当无关数据发生改变时，并不会重新进行计算，而是直接使用缓存中的值。计算属性是用来声明式的描述一个值依赖了其他的值，当所依赖的变量发生变化时，计算属性也跟着改变。 Watch：Watch监听的是在Data中定义的变量，当该变量变化时，会触发watch中的方法。