vue面试题9|[2024-11-15]

问题1：scoped原理

1.作用：让样式在本组件中生效，不影响其他组件

2.原理：给节点新增自定义属性，然后css根据属性选择器添加样式。

问题2：让css只在当前组件生效

<style scoped>

问题3：scss、stylus

scss：

        1.下载 npm install sass-loader node-sass --save

        2. <style lang='scss' scoped>   （不能修改其他组件的样式）

        3.scss 样式穿透 ：父元素 /deep/ 子元素

             

stylus：

        1.下载 npm install stylus stylus-loader --save

        2. <style lang='stylus' scoped>

        3.stylus样式穿透：①父元素 /deep/ 子元素  ② 父元素 >>> 子元素

问题4：vue组件之间如何传值通信

1.父组件 传值 子组件

        父组件：<Son :messg='msg'> </Son> 

                （这里msg是父组件中定义的数据，messg是子组件接受的）

        子组件：props:['messg']  or  props:{ messg:数据类型 }

2.子组件 传值 父组件

        子组件：

                this.$emit("自定义事件名称",要传的数据)   自定义事件名称=getVal

        父组件：

                <Son @childInput='getVal'></Son>  （@之后的事件是需要父组件定义的）

                methods:{

                        childInput(msg){

                                // msg就是子组件传递过来的数据

                        }

                }

3.兄弟组件之间的传值

        通过一个中转（bus）：

                import Vue from 'vue'

                export default new Vue;

        A兄弟传值： 

                import bus from '@/common/bus'

                bus.$emit('toFooter',this.msg)

        B兄弟接受：

                import bus from '@/common/bus'

                bus.$on('toFooter',(data) => {

                        //data就是this.msg数据

                })

问题5：computed、methods、watch有什么区别？

1.computed vs methods 区别

        computed是有缓存的

        methods是没有缓存的

2.computed vs watch 区别

        watch是监听，数据或者路由发生改变了，才可以响应（执行）

        computed计算某一个属性的变化，如果某个值改变了，计算属性会监听到进行返回

        watch是当前监听的数据改变了，才会执行内部代码

问题6：props和data优先级谁高？

优先级由源码决定：

        props ===>  methods  ===>  data  ===>  computed  ===> watch